Trying an error in prod 🤠

Author: drjonnicholson

src/App.jsx

@@ -1,5 +1,6 @@
 import About from './components/About'
 import Acclaim from './components/Acclaim'
+import ErrorBoundary from './components/ErrorBoundary'
 import Experience from './components/Experience'
 import Footer from './components/Footer'
 import Header from './components/Header'
@@ -8,7 +9,7 @@ import Skills from './components/Skills'
 
 const App = () => {
   return (
-    <div>
+    <ErrorBoundary>
       <Header />
       <main>
         <About />
@@ -18,7 +19,7 @@ const App = () => {
         <Publications />
       </main>
       <Footer />
-    </div>
+    </ErrorBoundary>
   )
 }
 

src/components/About/About.jsx

@@ -3,6 +3,7 @@ import avatar01 from './images/01.png?width=230'
 import { about, author } from 'site-config'
 
 const About = () => {
+  throw new Error('🌶️🌶️😉')
   return (
     <div className={styles.blurb}>
       <picture>

src/components/ErrorBoundary/ErrorBoundary.jsx

@@ -0,0 +1,47 @@
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+import styles from './ErrorBoundary.module.css'
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      hasError: false,
+      error: null,
+    }
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error }
+  }
+
+  /**
+   * @param {Error} error
+   * @param {import('react').ErrorInfo} errorInfo
+   */
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className={styles.error}>
+          <div>
+            <strong>
+              {this.state.error.name} :{this.state.error.message}
+            </strong>
+          </div>
+          {this.state.error.stack && <pre>{this.state.error.stack}</pre>}
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default ErrorBoundary

src/components/ErrorBoundary/ErrorBoundary.module.css

@@ -0,0 +1,13 @@
+@value vars: "../../variables.module.css";
+@value surface100, surfacemixed600, containerwidth from vars;
+
+.error {
+  background-color: surfacemixed600;
+  padding: 2em;
+  width: 100%;
+  height: 100%;
+}
+
+.error pre {
+  font-size: medium;
+}

src/components/ErrorBoundary/index.jsx

@@ -0,0 +1,2 @@
+import ErrorBoundary from './ErrorBoundary'
+export default ErrorBoundary

src/components/Footer/index.jsx

@@ -1,3 +1,3 @@
-import { default as Footer } from './Footer'
+import Footer from './Footer'
 
 export default Footer

src/components/Header/index.jsx

@@ -1,3 +1,3 @@
-import { default as Header } from './Header'
+import Header from './Header'
 
 export default Header

src/components/Icon/index.jsx

@@ -1,3 +1,3 @@
-import { default as Icon } from './Icon'
+import Icon from './Icon'
 
 export default Icon

src/components/Loader/index.jsx

@@ -1,3 +1,3 @@
-import { default as Loader } from './Loader'
+import Loader from './Loader'
 
 export default Loader

src/components/Publications/Entry/index.jsx

@@ -1,3 +1,3 @@
-import { default as Entry } from './Entry'
+import Entry from './Entry'
 
 export default Entry

src/components/Publications/index.jsx

@@ -1,3 +1,3 @@
-import { default as Publications } from './Publications'
+import Publications from './Publications'
 
 export default Publications

src/components/Skills/index.jsx

@@ -1,3 +1,3 @@
-import { default as Skills } from './Skills'
+import Skills from './Skills'
 
 export default Skills

src/components/Socials/index.js

@@ -0,0 +1,3 @@
+import Socials from './Socials'
+
+export default Socials

src/components/Socials/index.jsx

@@ -1,5 +1,6 @@
 import { StrictMode, Suspense, lazy } from 'react'
 import { createRoot } from 'react-dom/client'
+import ErrorBoundary from './components/ErrorBoundary'
 import Loader from './components/Loader'
 import './index.module.css'
 
@@ -9,8 +10,10 @@ const root = createRoot(node)
 
 root.render(
   <StrictMode>
-    <Suspense fallback={<Loader />}>
-      <App />
-    </Suspense>
+    <ErrorBoundary>
+      <Suspense fallback={<Loader />}>
+        <App />
+      </Suspense>
+    </ErrorBoundary>
   </StrictMode>,
 )

src/index.jsx

@@ -91,8 +91,10 @@ strong {
   font-weight: 500;
 }
 
-#root {
+:global #root {
   isolation: isolate;
+  width: 100vw;
+  height: 100vh;
 }
 
 :global .container {