Leronth Posts

Leronth

•Created by Leronth on 6/24/2024 in #❓-help

tRPC + GCP headers issue

Hey everyone, I'm currently working on a tRPC-based app and I'm facing an issue with retrieving headers set by GCP when there are errors like 504 or 500. Specifically, I want to read the X-Cloud-Trace-Context header from the frontend. In my browser, I can see that the header is being sent, but I can't seem to access it from my response in the code. Here's my setup:

const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      url: xxxxx,
      async fetch(url, options) {
        try {
          const res = await fetch(url, options);
          const allHeaders = res.headers;
          for (const [key, value] of allHeaders.entries()) {
            console.log(`${key}: ${value}`);
          }
          const traceHeaders = res.headers.get("x-cloud-trace-context");
          console.log({ traceHeaders });
          if (!res.ok) {
            console.log({ "responseFromError" : res });
            throw new Error(await res.text());
          }
          return res;
        } catch (error: any) {
          if (error.traceHeaders) {
            console.log(`Trace headers in error: ${error.traceHeaders}`);
          }
          console.log({ error });
          throw error;
        }
      },
    }),
  ],
});

const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      url: xxxxx,
      async fetch(url, options) {
        try {
          const res = await fetch(url, options);
          const allHeaders = res.headers;
          for (const [key, value] of allHeaders.entries()) {
            console.log(`${key}: ${value}`);
          }
          const traceHeaders = res.headers.get("x-cloud-trace-context");
          console.log({ traceHeaders });
          if (!res.ok) {
            console.log({ "responseFromError" : res });
            throw new Error(await res.text());
          }
          return res;
        } catch (error: any) {
          if (error.traceHeaders) {
            console.log(`Trace headers in error: ${error.traceHeaders}`);
          }
          console.log({ error });
          throw error;
        }
      },
    }),
  ],
});

Despite seeing the header in the browser's network tab, it doesn't show up in the response headers in my code. I'm using tRPC with queryClient on the frontend and the response type is 'cors'. Has anyone else faced this issue or have any suggestions on how to properly retrieve this header? Thanks in advance!

1 replies