diff --git a/src/components/errorboundry.jsx b/src/components/errorboundry.jsx
index ffee89ff..bad4b552 100644
--- a/src/components/errorboundry.jsx
+++ b/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;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index 373023c1..daae1909 100644
--- a/src/components/services/group.jsx
+++ b/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>
);
}
diff --git a/src/components/services/list.jsx b/src/components/services/list.jsx
index a42a64a1..80b45592 100644
--- a/src/components/services/list.jsx
+++ b/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>
);
diff --git a/src/components/services/widget.jsx b/src/components/services/widget.jsx
index f6ae4204..3a7463ac 100644
--- a/src/components/services/widget.jsx
+++ b/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 (
diff --git a/src/components/widgets/widget.jsx b/src/components/widgets/widget.jsx
index a5ed1eb3..de3f7a35 100644
--- a/src/components/widgets/widget.jsx
+++ b/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 (
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index c9661a07..cb534813 100644
--- a/src/pages/index.jsx
+++ b/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>
)}