Fix FormData handling in fetch instrumentation (#139)

* Fix FormData handling in fetch instrumentation

* fixed types

* changeset

.changeset/config.json

@@ -7,7 +7,13 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["e2e", "sample", "bridge-emulator", "collector"],
+  "ignore": [
+    "e2e",
+    "sample",
+    "bridge-emulator",
+    "collector",
+    "multiple-exporters"
+  ],
   "snapshot": {
     "useCalculatedVersion": true
   }

.changeset/twelve-items-sell.md

@@ -0,0 +1,5 @@
+---
+"@vercel/otel": patch
+---
+
+Fix FormData in fetch instrumentation

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

@@ -16,9 +16,20 @@ export function runService(request: Request): Promise<string> {
         return "<no data>";
       }
 
+      let body: BodyInit | null = null;
+      const isFormData = url.searchParams.get("mode") === "formdata";
+      if (isFormData) {
+        const fd = new FormData();
+        fd.set("cmd", "echo");
+        fd.set("data.foo", "bar");
+        body = fd;
+      } else {
+        body = JSON.stringify({ cmd: "echo", data: { foo: "bar" } });
+      }
+
       const response = await fetch(dataUrl, {
         method: "POST",
-        body: JSON.stringify({ cmd: "echo", data: { foo: "bar" } }),
+        body,
         headers: { "X-Cmd": "echo" },
         cache: "no-store",
       });

packages/bridge-emulator/package.json

@@ -28,17 +28,19 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "formidable": "3.5.2",
     "next": "14.2.1-canary.7"
   },
   "peerDependencies": {
     "@opentelemetry/api": "^1.7.0",
     "@vercel/otel": "workspace:^"
   },
   "devDependencies": {
+    "@types/formidable": "3.4.5",
     "@types/node": "^20",
     "@vercel/otel": "workspace:^",
     "eslint-config": "workspace:*",
-    "typescript-config": "workspace:*",
-    "typescript": "^5"
+    "typescript": "^5",
+    "typescript-config": "workspace:*"
   }
 }

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

@@ -1,4 +1,5 @@
 import { Server, type IncomingMessage, type ServerResponse } from "node:http";
+import formidable from "formidable";
 
 export interface Bridge {
   port: number;
@@ -59,26 +60,51 @@ class BridgeEmulatorServer implements Bridge {
       req: IncomingMessage,
       res: ServerResponse
     ): Promise<void> => {
-      const body = await new Promise<Buffer>((resolve, reject) => {
-        const acc: Buffer[] = [];
-        req.on("data", (chunk: Buffer) => {
-          acc.push(chunk);
+      let json: BridgeEmulatorRequest;
+      if ((req.headers["content-type"] ?? "").includes("multipart/form-data")) {
+        json = await new Promise<BridgeEmulatorRequest>((resolve, reject) => {
+          const inst = formidable({});
+          inst.parse(req, (err, fields, _files) => {
+            if (err) {
+              reject(err);
+              return;
+            }
+            resolve({
+              cmd: Array.isArray(fields.cmd) ? fields.cmd[0] : fields.cmd,
+              data: Object.fromEntries(
+                Object.entries(fields)
+                  .filter(([key]) => key.startsWith("data."))
+                  .map(([key, value]) => [
+                    key.slice(5),
+                    Array.isArray(value) ? value[0] : value,
+                  ])
+              ),
+            } as unknown as BridgeEmulatorRequest);
+          });
         });
-        req.on("end", () => {
-          resolve(Buffer.concat(acc));
+      } else {
+        const body = await new Promise<Buffer>((resolve, reject) => {
+          const acc: Buffer[] = [];
+          req.on("data", (chunk: Buffer) => {
+            acc.push(chunk);
+          });
+          req.on("end", () => {
+            resolve(Buffer.concat(acc));
+          });
+          req.on("error", reject);
         });
-        req.on("error", reject);
-      });
-
-      const json = JSON.parse(
-        body.toString("utf-8") || "{}"
-      ) as BridgeEmulatorRequest;
+        json = JSON.parse(
+          body.toString("utf-8") || "{}"
+        ) as BridgeEmulatorRequest;
+      }
 
       if (json.cmd === "ack") {
         const waiting = this.waitingAck.get(json.testId);
         if (waiting) {
           waiting.finally(() => {
-            this.waitingAck.delete(json.testId);
+            if ("testId" in json) {
+              this.waitingAck.delete(json.testId);
+            }
             res.writeHead(200, "OK", { "X-Server": "bridge" });
             res.write("{}");
             res.end();

packages/otel/src/instrumentations/fetch.ts

@@ -304,6 +304,11 @@ export class FetchInstrumentation implements Instrumentation {
 
       try {
         const startTime = Date.now();
+        // Remove "content-type" for a FormData body because undici regenerates
+        // a new multipart separator each time.
+        if (init?.body && init.body instanceof FormData) {
+          req.headers.delete("content-type");
+        }
         const res = await originalFetch(input, {
           ...init,
           headers: req.headers,