Bug 1968257 - [devtools] Fix Netmonitor response panel crash on null JSON response. a=RyanVM

Original Revision: https://phabricator.services.mozilla.com/D251555

Differential Revision: https://phabricator.services.mozilla.com/D252033

devtools/client/netmonitor/src/utils/request-utils.js

@@ -736,11 +736,12 @@ function parseJSON(payloadUnclean) {
   if (
     !error &&
     (typeof json !== "object" ||
+      json === null ||
       // Parsed JSON numbers might be different than the source, for example
       // JSON.parse("1516340399466235648") returns 1516340399466235600. In such case,
       // parseJsonLossless will return an object with `type: JSON_NUMBER` property.
       // We still want to display those numbers as the other numbers here.
-      json.type === lazy.JSON_NUMBER)
+      json?.type === lazy.JSON_NUMBER)
   ) {
     return {};
   }

devtools/client/netmonitor/test/browser_net_json-null.js

@@ -14,7 +14,6 @@ add_task(async function () {
   info("Starting test... ");
 
   const { document, store, windowRequire } = monitor.panelWin;
-  const { L10N } = windowRequire("devtools/client/netmonitor/src/utils/l10n");
   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
 
   store.dispatch(Actions.batchEnable(false));
@@ -112,3 +111,37 @@ add_task(async function () {
     );
   }
 });
+
+add_task(async function () {
+  const { tab, monitor } = await initNetMonitor(
+    JSON_BASIC_URL + "?name=root-null",
+    {
+      requestCount: 1,
+    }
+  );
+  info("Starting test... ");
+
+  const { document, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Execute requests.
+  await performRequests(monitor, tab, 1);
+
+  const onCodeMirrorReady = waitForDOM(
+    document,
+    "#response-panel .CodeMirror-code"
+  );
+
+  store.dispatch(Actions.toggleNetworkDetails());
+  clickOnSidebarTab(document, "response");
+  const [codeMirrorCodeEl] = await onCodeMirrorReady;
+  is(
+    codeMirrorCodeEl.querySelector("pre.CodeMirror-line span").textContent,
+    "null",
+    "root null JSON object is displayed in a CodeMirror editor"
+  );
+
+  await teardown(monitor);
+});

devtools/client/netmonitor/test/sjs_json-test-server.sjs

@@ -18,6 +18,9 @@ function handleRequest(request, response) {
     case "null":
       response.write('{ "greeting": null }');
       break;
+    case "root-null":
+      response.write(`null`);
+      break;
     case "nogrip":
       response.write('{"obj": {"type": "string" }}');
       break;