Generate a traceId for the same HTTP request

[jdnichollsc]

Hello folks, thanks for this awesome framework!

I was wondering if we can generate and then loading the same traceId using the same request object from multiple routes (root, etc).

It would be really useful for logging requests (Transaction Traces) while the routes are loading, what do you think about this feature? <3

Thanks in advance!

[kiliman]

I have an old patch that added a X-Remix-Navigation-Id similar to your traceId. I was using this to support a shared request cache.

https://github.com/kiliman/remix-playground/blob/main/patches/%40remix-run%2Breact%2B0.17.5.patch

[jdnichollsc]

I have this logic to be able to inject traceId for logs:

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const traceId = formData.get('traceId')?.toString();

  await fetch(`${apiUrl}/auth`, {
    method: 'POST',
    body: JSON.stringify({...}),
    headers: {
      'X-Trace-Id': `${traceId}`,
    }
  });
  // redirect to the same route
  return redirect('/login');
};
export const loader: LoaderFunction = async ({ request }) => {
  const traceId = crypto.randomUUID();
  return json(
    {
      traceId,
    },
    {
      headers: {
        'X-Trace-Id': traceId,
      },
    }
  );
};

It works great for the route itself but I want to get the same traceId from parent or child routes as well.

Additionally, in terms of navigation experience, I don't know if we can force to reload the page in the redirection of that action to be able to detect if the user was redirected to the same page (useful for using toast messages from useEffects, etc)

[kiliman]

Since loaders and actions run independently, you’ll need remix to add support for this. I don’t think you can do it in user land.