mirror of
https://github.com/DI0IK/homepage-plus.git
synced 2025-07-10 15:28:47 +00:00
place error boundaries closer to the source
This commit is contained in:
parent
88c774339d
commit
ea96999377
6 changed files with 31 additions and 21 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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 (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue