From c99b81f249f5bbf47db72323130189ccb19e4321 Mon Sep 17 00:00:00 2001
From: Nulo <hi@nulo.in>
Date: Fri, 13 Sep 2024 19:54:29 -0300
Subject: [PATCH] Gracefully handle broken JSON+LD

---
 app/domain/[domain]/page.tsx | 42 ++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/domain/[domain]/page.tsx b/app/domain/[domain]/page.tsx
index a2192f1..5383e99 100644
--- a/app/domain/[domain]/page.tsx
+++ b/app/domain/[domain]/page.tsx
@@ -45,6 +45,17 @@ export async function generateMetadata(
   };
 }
 
+function formatJson(json: string) {
+  try {
+    return {
+      valid: true,
+      value: JSON.stringify(JSON.parse(json || "{}"), null, 2),
+    };
+  } catch {
+    return { valid: false, value: json };
+  }
+}
+
 export default async function Page({
   params,
 }: {
@@ -57,6 +68,11 @@ export default async function Page({
     await reify(params.domain, data);
   }
 
+  const jsonld = data.detected_technologies.find(
+    (datum) => datum.identifier === "jsonld"
+  )?.metadata.value;
+  const formattedJsonLd = formatJson(jsonld ?? "{}");
+
   return (
     <div className="">
       <h1>
@@ -141,27 +157,15 @@ export default async function Page({
             </Grid.Item>
           ))}
       </Grid.Container>
-      <SectionHeader>JSON+LD</SectionHeader>
-      <ul>
-        {data.detected_technologies.find(
-          (datum) => datum.identifier === "jsonld"
-        )?.metadata && (
+      {jsonld && (
+        <>
+          <SectionHeader>JSON+LD</SectionHeader>
           <pre className="whitespace-pre max-w-full overflow-x-scroll">
-            {JSON.stringify(
-              JSON.parse(
-                data.detected_technologies.find(
-                  (datum) => datum.identifier === "jsonld"
-                )?.metadata.value || "{}"
-              ),
-              null,
-              2
-            )}
+            {formattedJsonLd.value}
           </pre>
-        )}
-        <ul className="only:block hidden opacity-50">
-          No JSON+LD record found
-        </ul>
-      </ul>
+          {!formattedJsonLd.valid && <p>(this JSON isn&apos;t valid)</p>}
+        </>
+      )}
     </div>
   );
 }