--- a/toolkit/content/aboutTelemetry.js
+++ b/toolkit/content/aboutTelemetry.js
@@ -102,17 +102,16 @@ function filterObject(obj, filterOut) {
   for (let k of Object.keys(obj)) {
     if (filterOut.indexOf(k) == -1) {
       ret[k] = obj[k];
     }
   }
   return ret;
 }
 
-
 /**
  * This turns a JSON object into a "flat" stringified form, separated into top-level sections.
  *
  * For an object like:
  *   {
  *     a: {b: "1"},
  *     c: {d: "2", e: {f: "3"}}
  *   }
@@ -2079,16 +2078,24 @@ function togglePingSections(isMainPing) 
 
 function displayPingData(ping, updatePayloadList = false) {
   gPingData = ping;
 
   // Render raw ping data.
   let pre = document.getElementById("raw-ping-data");
   pre.textContent = JSON.stringify(gPingData, null, 2);
 
+  try {
+    displayRichPingData(ping, updatePayloadList);
+  } catch (err) {
+    PingPicker._showRawPingData();
+  }
+}
+
+function displayRichPingData(ping, updatePayloadList) {
   // Update the structured data rendering.
   const keysHeader = bundle.GetStringFromName("keysHeader");
   const valuesHeader = bundle.GetStringFromName("valuesHeader");
 
   // Update the payload list and process lists
   if (updatePayloadList) {
     renderPayloadList(ping);
     renderProcessList(ping, document.getElementById("scalars-processes"));