Merge pull request #26 from buttondown/issue-25

Gracefully handle broken JSON+LD
buttondown · Sep 13, 2024 · 1b426e6 · 1b426e6
2 parents e82e9a3 + c99b81f
commit 1b426e6
Showing 1 changed file with 23 additions and 19 deletions.
diff --git 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>
   );
 }