How to use correlation id to track the request flow in nextjs app

Implementing a correlation ID in a Next.js application involves several steps to ensure that each request has a unique identifier that can be used for tracing through the application's lifecycle. Here’s a guide on how to do this:

Steps to Implement Correlation ID in a Next.js App

1. Install necessary dependencies: You might need UUID for generating unique IDs.
2. Create a middleware to generate and attach a correlation ID.
3. Propagate the correlation ID to API routes and server-side logic.
4. Log the correlation ID in client-side and server-side logs.

Step 1: Install Dependencies

First, install the UUID package for generating unique IDs:

npm install uuid

Step 2: Create a Middleware to Generate and Attach a Correlation ID

In a Next.js app, you can use a custom _middleware.js file to create middleware. However, note that as of Next.js 12, you can use middleware.js for Next.js Edge Middleware.

// middleware.js
import { NextResponse } from 'next/server';
import { v4 as uuidv4 } from 'uuid';

export function middleware(req) {
  const correlationId = uuidv4();
  req.headers.set('x-correlation-id', correlationId);
  const response = NextResponse.next();
  response.headers.set('x-correlation-id', correlationId);
  return response;
}

Step 3: Propagate the Correlation ID to API Routes

Ensure that API routes and server-side functions can access the correlation ID:

// pages/api/example.js
import { v4 as uuidv4 } from 'uuid';

export default function handler(req, res) {
  const correlationId = req.headers['x-correlation-id'] || uuidv4();
  console.log(`Correlation ID: ${correlationId}`);
  res.setHeader('x-correlation-id', correlationId);
  res.status(200).json({ message: 'Hello, world!', correlationId });
}

Step 4: Log the Correlation ID in Server-Side Logs

Modify your logging setup to include the correlation ID in logs. This example uses a simple logger function:

// utils/logger.js
export function logger(message, correlationId) {
  console.log(`[${correlationId}] ${message}`);
}

Use this logger in your API routes and React components:

Server-Side (API Routes):

// pages/api/example.js
import { logger } from '../../utils/logger';

export default function handler(req, res) {
  const correlationId = req.headers['x-correlation-id'] || uuidv4();
  logger('Handling request', correlationId);
  res.setHeader('x-correlation-id', correlationId);
  res.status(200).json({ message: 'Hello, world!', correlationId });
}

Client-Side (React Components):

You can also propagate the correlation ID to the client-side as well by using server actions or traditional fetch call!

By following these steps, you can effectively implement and use a correlation ID in a Next.js application. This allows you to track the flow of each request through the app, making it easier to debug and trace issues.

1. Install Dependencies: Install UUID for generating unique IDs.
2. Middleware: Create a middleware to generate and attach a correlation ID.
3. API Routes: Propagate and log the correlation ID in API routes.
4. Logging: Ensure client-side and server-side logs include the correlation ID for traceability.