place error boundaries closer to the source

src/components/errorboundry.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export default class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -10,8 +10,8 @@ export default class ErrorBoundary extends React.Component {
     // Catch errors in any components below and re-render with error message
     this.setState({
       error,
-      errorInfo
-    })
+      errorInfo,
+    });
 
     // You can also log error messages to an error reporting service here
     // eslint-disable-next-line no-console
@@ -23,11 +23,10 @@ export default class ErrorBoundary extends React.Component {
     if (errorInfo) {
       // Error path
       return (
-        <div>
-          <h2>Something went wrong.</h2>
-          <details style={{ whiteSpace: 'pre-wrap' }}>
-            {error && error.toString()}
-            <br />
+        <div className="inline-block text-sm bg-rose-100 text-rose-900 dark:bg-rose-900 dark:text-rose-100 rounded-md p-2 m-1">
+          <div className="font-medium mb-1">Something went wrong.</div>
+          <details className="text-xs font-mono whitespace-pre">
+            <summary>{error && error.toString()}</summary>
             {errorInfo.componentStack}
           </details>
         </div>
@@ -38,4 +37,4 @@ export default class ErrorBoundary extends React.Component {
     const { children } = this.props;
     return children;
   }
-}
+}

src/components/services/group.jsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
 
-import ErrorBoundary from "components/errorboundry";
 import List from "components/services/list";
 
 export default function ServicesGroup({ services, layout }) {
@@ -13,7 +12,7 @@ export default function ServicesGroup({ services, layout }) {
       )}
     >
       <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
-      <ErrorBoundary><List services={services.services} layout={layout} /></ErrorBoundary>
+      <List services={services.services} layout={layout} />
     </div>
   );
 }

src/components/services/list.jsx

@@ -1,6 +1,5 @@
 import classNames from "classnames";
 
-import ErrorBoundary from "components/errorboundry";
 import Item from "components/services/item";
 
 const columnMap = [
@@ -24,7 +23,7 @@ export default function List({ services, layout }) {
       )}
     >
       {services.map((service) => (
-        <ErrorBoundary key={service.name}><Item key={service.name} service={service} /></ErrorBoundary>
+        <Item key={service.name} service={service} />
       ))}
     </ul>
   );

src/components/services/widget.jsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "next-i18next";
 
+import ErrorBoundary from "components/errorboundry";
 import components from "widgets/components";
 
 export default function Widget({ service }) {
@@ -8,7 +9,11 @@ export default function Widget({ service }) {
   const ServiceWidget = components[service.widget.type];
 
   if (ServiceWidget) {
-    return <ServiceWidget service={service} />;
+    return (
+      <ErrorBoundary>
+        <ServiceWidget service={service} />
+      </ErrorBoundary>
+    );
   }
 
   return (

src/components/widgets/widget.jsx

@@ -1,5 +1,7 @@
 import dynamic from "next/dynamic";
 
+import ErrorBoundary from "components/errorboundry";
+
 const widgetMappings = {
   weatherapi: dynamic(() => import("components/widgets/weather/weather")),
   openweathermap: dynamic(() => import("components/widgets/openweathermap/weather")),
@@ -13,7 +15,11 @@ export default function Widget({ widget }) {
   const InfoWidget = widgetMappings[widget.type];
 
   if (InfoWidget) {
-    return <InfoWidget options={widget.options} />;
+    return (
+      <ErrorBoundary>
+        <InfoWidget options={widget.options} />
+      </ErrorBoundary>
+    );
   }
 
   return (