Improve error handling and logging

pietvanzoen · Jul 9, 2023 · cec03b8 · cec03b8
1 parent ae04825
commit cec03b8
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 32 deletions.
diff --git a/app/components/Head.tsx b/app/components/Head.tsx
@@ -1,5 +1,6 @@
 import { Links, Meta } from "@remix-run/react";
 import type { LinkHTMLAttributes } from "react";
+import { makeTitle } from "~/utils/meta";
 import type { Theme } from "./ThemeStyles";
 import ThemeStyles from "./ThemeStyles";
 
@@ -108,7 +109,13 @@ const LINKS = [
   },
 ];
 
-export default function Head({ theme }: { theme: Theme }) {
+export default function Head({
+  theme,
+  title,
+}: {
+  theme: Theme;
+  title?: string;
+}) {
   return (
     <head>
       <meta charSet="utf-8" />
@@ -120,6 +127,7 @@ export default function Head({ theme }: { theme: Theme }) {
         <link key={i} {...link} />
       ))}
       <Meta />
+      {title && <title>{makeTitle([title])}</title>}
       <Links />
       <ThemeStyles theme={theme || "system"} />
     </head>

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -10,6 +10,8 @@ import { Response } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import isbot from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
+import debug from "debug";
+const log = debug("app:entry");
 
 const ABORT_DELAY = 5_000;
 
@@ -105,10 +107,11 @@ function handleBrowserRequest(
           pipe(body);
         },
         onShellError(error: unknown) {
+          log("shell error", error);
           reject(error);
         },
         onError(error: unknown) {
-          console.error(error);
+          log(error);
           responseStatusCode = 500;
         },
       }

diff --git a/app/root.tsx b/app/root.tsx
@@ -18,6 +18,8 @@ import type { Theme } from "./components/ThemeStyles";
 import Head from "./components/Head";
 import NavigationLoader from "./components/NavigationLoader";
 import Header from "./components/Header";
+import debug from "debug";
+const logError = debug("app:rootError");
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: stylesUrl }];
@@ -30,28 +32,36 @@ export async function loader({ request }: LoaderArgs) {
   });
 }
 
-function Document({ children }: { children: React.ReactNode }) {
+function Document({
+  title,
+  children,
+}: {
+  children: React.ReactNode;
+  title?: string;
+}) {
   const data = useLoaderData<typeof loader>();
   return (
     <html lang="en">
-      <Head theme={data?.user?.theme as Theme} />
+      <Head theme={data?.user?.theme as Theme} title={title} />
       <body>
         <Header showNav={Boolean(data?.user)} />
 
         <main id="main">{children}</main>
 
         <footer>
           <small>
-            <p>
-              Version:{" "}
-              <a
-                href={`https://github.com/pietvanzoen/gifable/tree/${
-                  data?.buildSHA === "dev" ? "main" : data?.buildSHA
-                }`}
-              >
-                {data?.buildSHA}
-              </a>
-            </p>
+            {data?.buildSHA && (
+              <p>
+                Version:{" "}
+                <a
+                  href={`https://github.com/pietvanzoen/gifable/tree/${
+                    data?.buildSHA === "dev" ? "main" : data?.buildSHA
+                  }`}
+                >
+                  {data?.buildSHA}
+                </a>
+              </p>
+            )}
 
             <div>
               <a
@@ -94,6 +104,7 @@ export default function App() {
 
 export function ErrorBoundary() {
   let error = useRouteError();
+  logError(error);
   if (isRouteErrorResponse(error)) {
     return (
       <Document title={`${error.status} ${error.statusText}`}>
@@ -105,22 +116,14 @@ export function ErrorBoundary() {
         </div>
       </Document>
     );
-  } else if (error instanceof Error) {
-    return (
-      <Document title="Uh-oh!">
-        <div className="notice">
-          <h1>Error</h1>
-          <p>{error.message}</p>
-          <p>The stack trace is:</p>
-          <pre>{error.stack}</pre>
-        </div>
-      </Document>
-    );
   } else {
     return (
-      <Document title="Uh-oh!">
-        <h1>Unknown Error</h1>
-        <p>Something went wrong.</p>
+      <Document title="Something went wrong">
+        <center>
+          <h1>🙈 Whoops, something went wrong</h1>
+          <img src="/images/500.jpg" alt="500 error" width="300" />
+          <p>Sorry about that. Please try again.</p>
+        </center>
       </Document>
     );
   }

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -222,7 +222,3 @@ export default function MediaRoute() {
     </>
   );
 }
-
-export function ErrorBoundary() {
-  return <div className="notice">I did a whoopsies.</div>;
-}
diff --git a/public/images/500.jpg b/public/images/500.jpg
-Original file line number
+Diff line change
@@ Expand Up / @@ -222,7 +222,3 @@ export default function MediaRoute() { @@
         </>
       );
     }
-    export function ErrorBoundary() {
-      return <div className="notice">I did a whoopsies.</div>;
-    }