add error handling for invalid read data

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fix cut off text on search bar dropdown
 - Fix broken link on the About page
 - SFR-2008: Automate License Page Headers and Sub-Headers
+- Add error page for /read links with invalid source
 
 ## [0.18.1]
 

src/components/ReaderLayout/ReaderLayout.tsx

@@ -26,6 +26,7 @@ import Link from "../Link/Link";
 import { addTocToManifest } from "@nypl/web-reader";
 import Loading from "../Loading/Loading";
 import { trackCtaClick } from "~/src/lib/adobe/Analytics";
+import NotFound404 from "~/src/pages/404";
 
 const origin =
   typeof window !== "undefined" && window.location?.origin
@@ -68,6 +69,10 @@ const ReaderLayout: React.FC<{
   const isEmbed = MediaTypes.embed.includes(link.media_type);
   const isRead = MediaTypes.read.includes(link.media_type);
 
+  if (!isEmbed && !isRead) {
+    return NotFound404();
+  }
+
   const pdfWorkerSrc = `${origin}/pdf-worker/pdf.worker.min.js`;
 
   /**

src/pages/404.tsx

@@ -1,21 +1,31 @@
+import { TemplateAppContainer } from "@nypl/design-system-react-components";
 import React from "react";
+import DrbBreakout from "../components/DrbBreakout/DrbBreakout";
 import Layout from "../components/Layout/Layout";
 import Link from "../components/Link/Link";
 
-const NotFound404 = () => (
-  <Layout>
-    <h1>404 Not Found</h1>
+const NotFound404 = () => {
+  const contentPrimaryElement = (
+    <>
+      <h1>404 Not Found</h1>
 
-    <p>We&apos;re sorry...</p>
+      <p>We&apos;re sorry...</p>
 
-    <p>The page you were looking for doesn&apos;t exist.</p>
+      <p>The page you were looking for doesn&apos;t exist.</p>
 
-    <p>
-      Search&nbsp;
-      <Link to="/">Digital Research Books Beta</Link>
-      {"."}
-    </p>
-  </Layout>
-);
+      <p>
+        Search&nbsp;
+        <Link to="/">Digital Research Books Beta</Link>
+        {"."}
+      </p>
+    </>
+  );
+
+  return (
+    <Layout>
+      <TemplateAppContainer breakout={<DrbBreakout />} contentPrimary={contentPrimaryElement} />
+    </Layout>
+  );
+};
 
 export default NotFound404;