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>
+        <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">
-          <h2>Something went wrong.</h2>
+          <div className="font-medium mb-1">Something went wrong.</div>
-          <details style={{ whiteSpace: 'pre-wrap' }}>
+          <details className="text-xs font-mono whitespace-pre">
-            {error && error.toString()}
+            <summary>{error && error.toString()}</summary>
-            <br />
             {errorInfo.componentStack}
           </details>
         </div>

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 (

src/pages/index.jsx

@@ -8,7 +8,6 @@ import { useEffect, useContext, useState } from "react";
 import { BiError } from "react-icons/bi";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-import ErrorBoundary from "components/errorboundry";
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
 import Widget from "components/widgets/widget";
@@ -20,6 +19,7 @@ import { ColorContext } from "utils/contexts/color";
 import { ThemeContext } from "utils/contexts/theme";
 import { SettingsContext } from "utils/contexts/settings";
 import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
+import ErrorBoundary from "components/errorboundry";
 
 const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
   ssr: false,
@@ -145,7 +145,9 @@ function Index({ initialSettings, fallback }) {
 
   return (
     <SWRConfig value={{ fallback, fetcher: (resource, init) => fetch(resource, init).then((res) => res.json()) }}>
-      <Home initialSettings={initialSettings} />
+      <ErrorBoundary>
+        <Home initialSettings={initialSettings} />
+      </ErrorBoundary>
     </SWRConfig>
   );
 }
@@ -192,14 +194,14 @@ function Home({ initialSettings }) {
               {widgets
                 .filter((widget) => !rightAlignedWidgets.includes(widget.type))
                 .map((widget, i) => (
-                  <ErrorBoundary key={i}><Widget key={i} widget={widget} /></ErrorBoundary>
+                  <Widget key={i} widget={widget} />
                 ))}
 
               <div className="ml-4 flex flex-wrap basis-full grow sm:basis-auto justify-between md:justify-end mt-2 md:mt-0">
                 {widgets
                   .filter((widget) => rightAlignedWidgets.includes(widget.type))
                   .map((widget, i) => (
-                    <ErrorBoundary key={i}><Widget key={i} widget={widget} /></ErrorBoundary>
+                    <Widget key={i} widget={widget} />
                   ))}
               </div>
             </>
@@ -209,7 +211,7 @@ function Home({ initialSettings }) {
         {services && (
           <div className="flex flex-wrap p-8 items-start">
             {services.map((group) => (
-              <ErrorBoundary key={group.name}><ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} /></ErrorBoundary>
+              <ServicesGroup key={group.name} services={group} layout={initialSettings.layout?.[group.name]} />
             ))}
           </div>
         )}
@@ -217,7 +219,7 @@ function Home({ initialSettings }) {
         {bookmarks && (
           <div className="grow flex flex-wrap pt-0 p-8">
             {bookmarks.map((group) => (
-              <ErrorBoundary key={group.name}><BookmarksGroup key={group.name} group={group} /></ErrorBoundary>
+              <BookmarksGroup key={group.name} group={group} />
             ))}
           </div>
         )}