Track request body size in XHR and Fetch instrumentations

packages/opentelemetry-sdk-trace-web/src/utils.ts

@@ -244,9 +244,7 @@
   }
 
   if (body instanceof FormData) {
-    // typescript doesn't like it when we pass FormData into URLSearchParams
-    // even though this is actually totally valid
-    return getByteLength(new URLSearchParams(body as any).toString());
+    return getFormDataSize(body);
   }
 
   if (body instanceof URLSearchParams) {
@@ -266,6 +264,19 @@
   return TEXT_ENCODER.encode(s).byteLength;
 }
 
+function getFormDataSize(formData: FormData): number {
+  let size = 0;
+  for (const [key, value] of formData.entries()) {
+    size += key.length;
+    if (value instanceof Blob) {
+      size += value.size;
+    } else {
+      size += value.length;
+    }
+  }
+  return size;
+}
+
 /**
  * sort resources by startTime
  * @param filteredResources

packages/opentelemetry-sdk-trace-web/test/utils.test.ts

@@ -645,9 +645,22 @@ describe('utils', () => {
       formData.append('key1', 'true');
       formData.append('key2', 'hello world');
 
-      assert.strictEqual(getXHRBodyLength(formData), 26);
+      assert.strictEqual(getXHRBodyLength(formData), 23);
       assert.strictEqual(getXHRBodyLength(new FormData()), 0);
     });
+    it('should compute body length for FormData payload with a file', () => {
+      const formData = new FormData();
+      const f = new File(
+        ['hello world hello world hello world'],
+        'test_file.txt'
+      );
+      formData.append('file', f);
+
+      // length should be:
+      // 4 for the key of the file in the form data
+      // 35 for the file contents
+      assert.strictEqual(getXHRBodyLength(formData), 39);
+    });
     it('should compute body length for URLSearchParams payload', () => {
       const search = new URLSearchParams({
         key1: 'true',