Accessing Response Headers (e.g., Correlation ID) from a Route Error Response

[jdevcc]

Hi everyone,

I'm working on error handling in our React Router v7 application (framework mode) and would appreciate some insights.

When a loader throws an error, I can detect it in the error boundary via isRouteErrorResponse() and then work with error.data. However, our instrumentation service adds a correlation ID header (for example, "x-correlation-id") to every request, and I'm trying to figure out how to capture this header from the route error response so that I can show it to the user.

Below is an example of how I might conceptually try to access the header in the error boundary:

import { isRouteErrorResponse, useRouteError } from "react-router";

export function ErrorBoundary() {
  const error = useRouteError();

  let correlationId = "";
  if (isRouteErrorResponse(error)) {
    correlationId = error.headers?.get("x-correlation-id") || "";
  }

  return (
    <div>
      <h1>Oops!</h1>
      <p>{error.data?.message ?? "Something went wrong."}</p>
      {correlationId && <p>Correlation ID: {correlationId}</p>}
    </div>
  );
}

My main questions are:

• Is there a supported way to access response headers from a route error response?
• If not, what would the recommended approach or workaround be to propagate such metadata (from the headers) into the error response or error data? Ideally this would be a global solution and not require changing every loader.

Any help or pointers would be greatly appreciated. Thanks in advance!