Fetch: map request/response headers to attributes (#67)

* Fetch: map request/response headers to attributes

* reorder

.changeset/sharp-olives-peel.md

@@ -0,0 +1,5 @@
+---
+"@vercel/otel": minor
+---
+
+Fetch: map request/response headers to attributes

apps/sample/app/api/service/service.ts

@@ -19,6 +19,7 @@ export function runService(request: Request): Promise<string> {
       const response = await fetch(dataUrl, {
         method: "POST",
         body: JSON.stringify({ cmd: "echo", data: { foo: "bar" } }),
+        headers: { "X-Cmd": "echo" },
         cache: "no-store",
       });
       if (dataUrl.includes("example")) {

apps/sample/app/component.tsx

@@ -40,6 +40,7 @@ export async function Component({ searchParams }: Props): Promise<JSX.Element> {
             data: { status: searchParams.status, foo: "bar" },
           }),
           cache: "no-store",
+          headers: { "X-Cmd": "echo" },
           opentelemetry: {
             attributes: {
               custom1: "value1",

apps/sample/instrumentation.ts

@@ -13,6 +13,12 @@ export function register() {
         ignoreUrls: [/^https:\/\/telemetry.nextjs.org/],
         propagateContextUrls: [/^http:\/\/localhost:\d+/],
         dontPropagateContextUrls: [/no-propagation\=1/],
+        attributesFromRequestHeaders: {
+          "request.cmd": "X-Cmd",
+        },
+        attributesFromResponseHeaders: {
+          "response.server": "X-Server",
+        },
       },
     },
   };

packages/bridge-emulator/src/client/index.ts

@@ -79,12 +79,12 @@ class BridgeEmulatorServer implements Bridge {
         if (waiting) {
           waiting.finally(() => {
             this.waitingAck.delete(json.testId);
-            res.writeHead(200);
+            res.writeHead(200, "OK", { "X-Server": "bridge" });
             res.write("{}");
             res.end();
           });
         } else {
-          res.writeHead(404);
+          res.writeHead(404, "Not Found", { "X-Server": "bridge" });
           res.end();
         }
         return;
@@ -107,19 +107,19 @@ class BridgeEmulatorServer implements Bridge {
           { headers: fetchHeaders }
         );
         this.fetches.push(fetchReq);
-        res.writeHead(200);
+        res.writeHead(200, "OK", { "X-Server": "bridge" });
         res.write(JSON.stringify(json.data));
         res.end();
         return;
       }
       if (json.cmd === "status") {
-        res.writeHead(parseInt(json.data.status));
+        res.writeHead(parseInt(json.data.status), "", { "X-Server": "bridge" });
         res.write(JSON.stringify(json.data));
         res.end();
         return;
       }
 
-      res.writeHead(400);
+      res.writeHead(400, "Bad request", { "X-Server": "bridge" });
       res.end();
     };
 

packages/otel/src/instrumentations/fetch.ts

@@ -68,6 +68,24 @@ export interface FetchInstrumentationConfig extends InstrumentationConfig {
    * Example: `fetch: { resourceNameTemplate: "{http.host}" }`.
    */
   resourceNameTemplate?: string;
+
+  /**
+   * A map of attributes that should be created from the request headers. The keys of the map are
+   * attribute names and the values are request header names. If a resonse header doesn't exist, no
+   * attribute will be created for it.
+   *
+   * Example: `fetch: { attributesFromRequestHeaders: { "attr1": "X-Attr" } }`
+   */
+  attributesFromRequestHeaders?: Record<string, string>;
+
+  /**
+   * A map of attributes that should be created from the response headers. The keys of the map are
+   * attribute names and the values are response header names. If a resonse header doesn't exist, no
+   * attribute will be created for it.
+   *
+   * Example: `fetch: { attributesFromResponseHeaders: { "attr1": "X-Attr" } }`
+   */
+  attributesFromResponseHeaders?: Record<string, string>;
 }
 
 declare global {
@@ -163,6 +181,8 @@ export class FetchInstrumentation implements Instrumentation {
     const propagateContextUrls = this.config.propagateContextUrls ?? [];
     const dontPropagateContextUrls = this.config.dontPropagateContextUrls ?? [];
     const resourceNameTemplate = this.config.resourceNameTemplate;
+    const { attributesFromRequestHeaders, attributesFromResponseHeaders } =
+      this.config;
 
     const shouldPropagate = (
       url: URL,
@@ -274,6 +294,10 @@ export class FetchInstrumentation implements Instrumentation {
         propagation.inject(context.active(), req.headers, HEADERS_SETTER);
       }
 
+      if (attributesFromRequestHeaders) {
+        headersToAttributes(span, attributesFromRequestHeaders, req.headers);
+      }
+
       try {
         const startTime = Date.now();
         const res = await originalFetch(input, {
@@ -283,6 +307,9 @@ export class FetchInstrumentation implements Instrumentation {
         const duration = Date.now() - startTime;
         span.setAttribute(SemanticAttributes.HTTP_STATUS_CODE, res.status);
         span.setAttribute("http.response_time", duration);
+        if (attributesFromResponseHeaders) {
+          headersToAttributes(span, attributesFromResponseHeaders, res.headers);
+        }
         if (res.status >= 500) {
           onError(span, `Status: ${res.status} (${res.statusText})`);
         }
@@ -372,3 +399,16 @@ function onError(span: Span, err: unknown): void {
     });
   }
 }
+
+function headersToAttributes(
+  span: Span,
+  attrsToHeadersMap: Record<string, string>,
+  headers: Headers
+): void {
+  for (const [attrName, headerName] of Object.entries(attrsToHeadersMap)) {
+    const headerValue = headers.get(headerName);
+    if (headerValue !== null) {
+      span.setAttribute(attrName, headerValue);
+    }
+  }
+}

tests/e2e/test/vercel-deployment/render-outbound.test.ts

@@ -43,6 +43,8 @@ describe("vercel deployment: outbound", {}, (props) => {
                       expect.any(Number),
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     "http.response_time": expect.any(Number),
+                    "request.cmd": "echo",
+                    "response.server": "bridge",
                     "operation.name": "fetch.POST",
                     "resource.name": `http://localhost:${bridge.port}/`,
                     custom1: "value1",
@@ -106,6 +108,8 @@ describe("vercel deployment: outbound", {}, (props) => {
                       expect.any(Number),
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     "http.response_time": expect.any(Number),
+                    "request.cmd": "echo",
+                    "response.server": "bridge",
                     "operation.name": "fetch.POST",
                     "resource.name": `http://localhost:${bridge.port}/`,
                     custom1: "value1",
@@ -170,6 +174,8 @@ describe("vercel deployment: outbound", {}, (props) => {
                       expect.any(Number),
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     "http.response_time": expect.any(Number),
+                    "request.cmd": "echo",
+                    "response.server": "bridge",
                   },
                 },
                 { name: "process-response" },
@@ -223,6 +229,7 @@ describe("vercel deployment: outbound", {}, (props) => {
                     "http.scheme": "http",
                     "net.peer.name": "localhost",
                     "net.peer.port": `${bridge.port + 1}`,
+                    "request.cmd": "echo",
                   },
                   events: [
                     {
@@ -282,6 +289,8 @@ describe("vercel deployment: outbound", {}, (props) => {
                       expect.any(Number),
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                     "http.response_time": expect.any(Number),
+                    "request.cmd": "echo",
+                    "response.server": "bridge",
                   },
                   events: [],
                 },
@@ -343,6 +352,8 @@ describe(
                         expect.any(Number),
                       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
                       "http.response_time": expect.any(Number),
+                      "request.cmd": "echo",
+                      "response.server": "bridge",
                       "operation.name": "fetch.POST",
                       "resource.name": `custom http localhost:${bridge.port}`,
                     },