feat: add error boundary

makes crashes graceful

src/components/error/ErrorInfo.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import Link from 'next/link';
 import Layout from '../../layouts/Layout';
 import Meta from '../meta/Meta';
@@ -8,39 +9,56 @@ import styles from '../../styles/modules/components/error/error-info.module.scss
 // description copied verbatim from https://www.gnu.org/graphics/sventsitsky-sadgnu.html
 // 404 idea from ninamori.org 404 page.
 
-const ErrorInfo = ({ message = 'Not found, sorry.', statusCode = 404 }) => {
+type Props = {
+  message: string;
+  statusCode?: number;
+  // props specific to error boundary.
+  misc?: {
+    subtext: string;
+    buttonText: string;
+    buttonClickHandler: () => void;
+  };
+};
+
+const ErrorInfo = ({ message, statusCode, misc }: Props) => {
+  const title = statusCode ? `${message} (${statusCode})` : message;
   return (
     <>
-      <Meta
-        title={`${message} (${statusCode})`}
-        description="you encountered an error page!"
-      />
+      <Meta title={title} description='you encountered an error page!' />
       <Layout className={styles.error}>
         <svg
           className={styles.gnu}
-          focusable="false"
-          role="img"
-          aria-labelledby="gnu-title gnu-desc"
+          focusable='false'
+          role='img'
+          aria-labelledby='gnu-title gnu-desc'
         >
-          <title id="gnu-title">GNU and Tux</title>
-          <desc id="gnu-desc">
+          <title id='gnu-title'>GNU and Tux</title>
+          <desc id='gnu-desc'>
             A pencil drawing of a big gnu and a small penguin, both very sad.
             GNU is despondently sitting on a bench, and Tux stands beside him,
             looking down and patting him on the back.
           </desc>
-          <use href="/svg/sadgnu.svg#sad-gnu"></use>
+          <use href='/svg/sadgnu.svg#sad-gnu'></use>
         </svg>
         <h1 className={`heading heading__primary ${styles.heading}`}>
-          <span>{message}</span>
-          <span> ({statusCode})</span>
+          {title}
         </h1>
-        <p className={styles.back}>
-          Go back to{' '}
-          <Link href="/about">
-            <a className="link">the homepage</a>
-          </Link>
-          .
-        </p>
+        {misc ? (
+          <>
+            <p>{misc.subtext}</p>
+            <button className={styles.button} onClick={misc.buttonClickHandler}>
+              {misc.buttonText}
+            </button>
+          </>
+        ) : (
+          <p>
+            Go back to{' '}
+            <Link href='/about'>
+              <a className='link'>the homepage</a>
+            </Link>
+            .
+          </p>
+        )}
       </Layout>
     </>
   );