Issue with AsyncLocalStorage in Next.js 14: context is not being shared between middleware, handlers and SSR pages

[joaquinbentancor]

Summary

I am experiencing issues with sharing the AsyncLocalStorage context between Middleware, API Handlers, and SSR Pages in a Next.js 14 project using AsyncLocalStorage. Even though the context is correctly set in the middleware, it does not propagate to API handlers or server-rendered pages. Is this a expected behaviour? I want to achieve a custom distributed tracing solution that will be defined at middleware level and should be accesible in api handlers and ssr pages.
This works fine with a custom server with Express, but I would like to use the built-in server.

Here is a simplified example that reproduces the problem:

// utils/asyncLocalStorage.ts
import { AsyncLocalStorage } from 'async_hooks';

const asyncLocalStorage = new AsyncLocalStorage();
export default asyncLocalStorage;

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';
import asyncLocalStorage from './utils/asyncLocalStorage';

export function middleware(req: NextRequest) {
  return asyncLocalStorage.run({}, async () => {
    const store = asyncLocalStorage.getStore();
    if (store) {
      store.key1 = test;
    }
    return NextResponse.next();
  });
}

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import asyncLocalStorage from '../../utils/asyncLocalStorage';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const store = asyncLocalStorage.getStore();
  console.log(store); //Here the store is undefined
  res.status(200).send();
}

[MrDelik]

unfortunately, i have the same problem.
Did you manage to find a solution ?

[cklat]

Having the same issue and wondering about a solution particular to this problem or a general solution in integrating a proper logging mechanism with context propagation for a NextJs App.

My files look the following and I'm having trouble accessing the store server side when a transaction is triggered through the client by calling a route in the ApiRouter.

So the following setup for me as follows:

// ./utils/contextLogger.ts

import { AsyncLocalStorage } from 'async_hooks';
import { logger } from '@/next-logger.config';

interface LoggerContext {
  trace: string;
}

const asyncLocalStorage = new AsyncLocalStorage<LoggerContext>();

const getLoggerWithContext = () => {
  const context = asyncLocalStorage.getStore();

  if (context) {
    return logger({
      trace: context.trace,
    });
  }

  return logger;
};

const runWithAsyncContext = (fn: () => Promise<any>, context: LoggerContext) => {
  return asyncLocalStorage.run(context, fn);
};

export { getLoggerWithContext, runWithAsyncContext };

Example usage in Api Route:

// ./api/route.ts

import { NextResponse, NextRequest } from 'next/server';
import { getLoggerWithContext, runWithAsyncContext } from '@/utils/contextLogger';
import { v4 as uuidv4 } from 'uuid';

export const GET = (req: NextRequest) => {
  const trace = uuidv4();

  return runWithAsyncContext(async () => {
    const logger = getLoggerWithContext();
    logger.info('Info log');

    try {
      const s3EntryPoint = process.env.S3_ENTRYPOINT;
      const response = NextResponse.json({ s3EntryPoint });
      response.headers.set('Cache-Control', 'no-store');
      if(s3EntryPoint) {
        logger.info(`Another Info Log`)
      } else {
        logger.warn('A warn log.')
      }
      
      return response;
    } catch (error) {
      logger.error({ error }, 'An error log');
      return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
    }
  }, { trace });
};

export const dynamic = "force-dynamic";

Then Server Side like so which is part of the transaction triggered through the call of the route above:

// .src/lib/backend.ts

import { getLoggerWithContext } from '@/utils/contextLogger';

export const fetchSomething = async (input: string): Promise<Data[]> => {
  
   /....

  const logger = getLoggerWithContext();
  
  logger.info('Fetching data')
  
  return /...
}

Here the logger.info will not populate the trace field with the UUID set in the route. This is because asyncLocalStorage is not the same instance and gets newly created.

Any idea how to solve this or any other suggestions for a lightweight solution?

[janpolacek]

Have you found any solution?

[talhayoun]

Any news regarding this?

[ivandamyanov]

Not sure if this is really the same but have you looked at server side instrumentation https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation and the new client side instrumentation: https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client ?

[ffma-glen-sampson]

same problem