Utilizing Remix with Express as the server, I aim to develop an Express middleware that establishes an async context to grant all downstream functions (especially those in the "backend" Remix code) access to this context within the scope of a single request.
Currently, my approach involves:
// within custom ctx.ts
import { AsyncLocalStorage } from "node:async_hooks";
export const asyncLocalStorage = new AsyncLocalStorage<string>();
export const createContext = (fn: any): any => {
const trace = "hardcoded-trace (could be a new UUID)";
return asyncLocalStorage.run(trace, fn);
};
export const getTrace = () => {
return asyncLocalStorage.getStore();
};
// in server.ts
const remixHandler = createRequestHandler({
build: initialBuild,
mode: initialBuild.mode,
});
app.use((req, res, next) => createContext(next));
app.use((req, res, next) => {
// accessing hardcoded trace value here in a following middleware
console.log(getTrace());
});
app.all("*", remixHandler);
// in a Remix loader
export const loader = async ({ request }: LoaderFunctionArgs) => {
// unable to access Trace in the loader (seemingly out of context?)
console.log(getTrace());
};
It seems like the async context gets lost when Express transitions to Remix. Exploring further into this without diving deep into Remix's internal workings is not straightforward.
The only potential solution I see is passing the context through getLoadContext within createRequestHandler. This would involve creating separate async contexts in the loader function, action function, etc., which might feel like a convoluted implementation. Essentially, multiple contexts need to be created and managed for a single request (Express, loader, action...).
My inquiry is: how can I establish a unified async context accessible throughout Express middleware, Remix action, Remix loader, etc., ensuring a consistent context from the start to end of an Express request?