fix(ui-mode): format request body when headers are lower case (#32395)

Resolves #32396 Currently, the request body is not formatted when content type header is lower case (`content-type`). Even though the value is `application/json`. It happens because we are looking only for `Content-Type` header ignoring headers that are lower case. <img width="674" alt="363197933-5178ec23-b9cf-46b5-8284-e8d4d730b036" src="https://github.com/user-attachments/assets/0ef01b52-7dd8-4f33-b836-9adb86f94cc9">
microsoft · Aug 30, 2024 · a6b320e · a6b320e
1 parent ed5c21b
commit a6b320e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 1 deletion.
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -59,7 +59,7 @@ const RequestTab: React.FunctionComponent<{
   React.useEffect(() => {
     const readResources = async  () => {
       if (resource.request.postData) {
-        const requestContentTypeHeader = resource.request.headers.find(q => q.name === 'Content-Type');
+        const requestContentTypeHeader = resource.request.headers.find(q => q.name.toLowerCase() === 'content-type');
         const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : '';
         if (resource.request.postData._sha1) {
           const response = await fetch(`sha1/${resource.request.postData._sha1}`);

diff --git a/tests/assets/network-tab/network.html b/tests/assets/network-tab/network.html
@@ -13,6 +13,25 @@
     </style>
     <script src='script.js'></script>
     <script>fetch('/api/endpoint')</script>
+    <script>
+      const body = JSON.stringify({
+        data: {
+          key: 'value',
+          array: ['value-1', 'value-2'],
+        },
+      });
+
+      fetch('/post-data-1', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body,
+      });
+      fetch('/post-data-2', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body,
+      });
+    </script>
   </head>
   <body>
     <h1>Network Tab Test</h1>

diff --git a/tests/playwright-test/ui-mode-test-network-tab.spec.ts b/tests/playwright-test/ui-mode-test-network-tab.spec.ts
@@ -93,3 +93,45 @@ test('should filter network requests by url', async ({ runUITest, server }) => {
   await expect(networkItems).toHaveCount(1);
   await expect(networkItems.getByText('font.woff2')).toBeVisible();
 });
+
+test('should format JSON request body', async ({ runUITest, server }) => {
+  const { page } = await runUITest({
+    'network-tab.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('network tab test', async ({ page }) => {
+        await page.goto('${server.PREFIX}/network-tab/network.html');
+      });
+    `,
+  });
+
+  await page.getByText('network tab test').dblclick();
+  await page.getByText('Network', { exact: true }).click();
+
+  await page.getByText('post-data-1').click();
+
+  await expect(page.locator('.CodeMirror-code .CodeMirror-line').allInnerTexts()).resolves.toEqual([
+    '{',
+    '  "data": {',
+    '    "key": "value",',
+    '    "array": [',
+    '      "value-1",',
+    '      "value-2"',
+    '    ]',
+    '  }',
+    '}',
+  ]);
+
+  await page.getByText('post-data-2').click();
+
+  await expect(page.locator('.CodeMirror-code .CodeMirror-line').allInnerTexts()).resolves.toEqual([
+    '{',
+    '  "data": {',
+    '    "key": "value",',
+    '    "array": [',
+    '      "value-1",',
+    '      "value-2"',
+    '    ]',
+    '  }',
+    '}',
+  ]);
+});