Added ErrorBoundary, in case that improves error-handling

components/errorBoundary/errorBoundary.jsx

@@ -0,0 +1,34 @@
+import { Component } from 'react'
+
+// Adapted from https://nextjs.org/docs/pages/building-your-application/configuring/error-handling
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true }
+  }
+  componentDidCatch(error, errorInfo) {
+    console.log({ error, errorInfo })
+  }
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children
+    }
+    return (
+      <p>
+        There was a glitch.{' '}
+        <button
+          type="button"
+          onClick={() => this.setState({ hasError: false })}
+          style={{ backgroundColor: '#7aefb3', padding: '0.5rem 0.75rem', marginInline: '0.5rem' }}
+        >
+          Try again?
+        </button>
+      </p>
+    )
+  }
+}
+
+export default ErrorBoundary

pages/_app.js

@@ -1,13 +1,18 @@
 import DefaultHead from '../components/defaultHead/DefaultHead'
+import ErrorBoundary from '../components/errorBoundary/errorBoundary'
 import Footer from '../components/footer/Footer'
 import styles from '../css/globals.css'
 
 function App({ Component, pageProps }) {
   return (
     <>
       <DefaultHead />
-      <Component {...pageProps} />
-      <Footer />
+      <ErrorBoundary>
+        <Component {...pageProps} />
+      </ErrorBoundary>
+      <ErrorBoundary>
+        <Footer />
+      </ErrorBoundary>
     </>
   )
 }