Middleware

Middleware enables developers to easily monitor and analyze log and trace data generated on Vercel, gain insights into their applications, and proactively address potential issues. This Integration offers a robust APM solution through a unified dashboard, streamlining real-time and synthetic monitoring.

In addition, You can create custom dashboards to view trace data, set up alerts on different parameters, and monitor critical issues. The integration enables you to see detailed information about your logs and traces, such as service name, severity, latency, request counts, success ratio, method name, profiling, and attributes.

Proceed by adding a few lines to complete the data flow for traces and profiling.

Required: Integrate @middleware.io/agent-apm-nextjs package

@middleware.io/agent-apm-nextjs assists the platform in sending custom logs and traces from your Next.js project.

// Install package
npm install @middleware.io/agent-apm-nextjs

// Modify next.config.js
module.exports = {
  experimental: {
    instrumentationHook: true,
    serverComponentsExternalPackages: ['@middleware.io/agent-apm-nextjs']
  }
}

// Create instrumentation.ts file
import tracker from '@middleware.io/agent-apm-nextjs';
export function register() {
    tracker.track({
        serviceName: "<SERVICE-NAME>",
        accessToken: "<ACCESS-TOKEN>",
        target: "vercel",
    });
}

// For logs
export default async function handler(req, res) {
    tracker.warn("Warning", { "tester": "Alex" });
    tracker.error("Error");
}

More details on Middleware's Vercel Integration Page.