TELESTION-443: Error Boundaries

frontend-react/package.json

@@ -68,6 +68,7 @@
 		"nats.ws": "^1.19.1",
 		"react-bootstrap": "^2.9.1",
 		"react-dom": "^18.2.0",
+		"react-error-boundary": "^4.0.12",
 		"react-router-dom": "^6.19.0",
 		"zod": "^3.22.4"
 	},

frontend-react/src/app/index.tsx

@@ -1,5 +1,6 @@
 import { initTelestion, registerWidgets, UserData } from '../lib';
 import { simpleWidget } from './widgets/simple-widget';
+import { errorWidget } from './widgets/error-widget';
 
 const defaultUserData: UserData = {
 	version: '0.0.1',
@@ -8,7 +9,7 @@ const defaultUserData: UserData = {
 			title: 'Default Dashboard',
 			layout: [
 				['.', '8fj2o4', '.'],
-				['.', '.', '.']
+				['.', '9fj2o4', '9fj2o4']
 			]
 		}
 	},
@@ -18,11 +19,15 @@ const defaultUserData: UserData = {
 			configuration: {
 				text: 'Hello World!'
 			}
+		},
+		'9fj2o4': {
+			type: 'error-widget',
+			configuration: {}
 		}
 	}
 };
 
-registerWidgets(simpleWidget);
+registerWidgets(simpleWidget, errorWidget);
 
 await initTelestion({
 	version: '0.0.1',

frontend-react/src/app/widgets/error-widget/error-widget.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+export function ErrorWidget() {
+	const [showError, setShowError] = useState(false);
+	useEffect(() => {
+		const timeout = setTimeout(() => {
+			setShowError(true);
+		}, 3_000);
+		return () => clearTimeout(timeout);
+	}, []);
+
+	if (showError) {
+		throw new Error(
+			`Test error thrown by the error widget at ${new Date().toISOString()}`
+		);
+	}
+
+	return (
+		<div>
+			<h1>This widget will throw an error after three seconds</h1>
+			<p>It is used to test the error handling of the dashboard.</p>
+		</div>
+	);
+}

frontend-react/src/app/widgets/error-widget/index.tsx

@@ -0,0 +1,14 @@
+import { ErrorWidget } from './error-widget.tsx';
+import { Widget } from '../../../lib';
+
+export const errorWidget: Widget = {
+	id: 'error-widget',
+	label: 'Error Widget',
+
+	createConfig() {
+		return {};
+	},
+
+	element: <ErrorWidget />,
+	configElement: <div>Config</div>
+};

frontend-react/src/lib/widget/component/error-fallback.module.css

@@ -0,0 +1,5 @@
+.alert {
+	max-height: 100%;
+	min-height: 100%;
+	overflow-y: auto;
+}

frontend-react/src/lib/widget/component/error-fallback.tsx

@@ -0,0 +1,34 @@
+import { Alert, AlertHeading, Button } from 'react-bootstrap';
+import styles from './error-fallback.module.css';
+
+export function ErrorFallback({
+	error,
+	resetErrorBoundary
+}: {
+	error: Error;
+	resetErrorBoundary: () => void;
+}) {
+	return (
+		<Alert variant="danger" className={styles.alert}>
+			<AlertHeading>Widget Error</AlertHeading>
+			<p>
+				Unfortunately, the widget encountered an error and cannot be displayed.
+			</p>
+			<p>Please try again or contact your developer if the problem persists.</p>
+			<details>
+				<summary>Details</summary>
+				<p>
+					<strong>{error.message}</strong>
+				</p>
+				<pre>{error.stack}</pre>
+			</details>
+			<Button
+				className={'mt-4'}
+				variant={'outline-light'}
+				onClick={resetErrorBoundary}
+			>
+				Reload the widget
+			</Button>
+		</Alert>
+	);
+}

frontend-react/src/lib/widget/component/widget-renderer.tsx

@@ -3,6 +3,8 @@ import { getWidgetById } from '../state.ts';
 import { getUserData } from '../../user-data';
 
 import styles from './widget-renderer.module.css';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from './error-fallback.tsx';
 
 export interface WidgetRendererProps {
 	widgetInstanceId: string;
@@ -44,7 +46,9 @@ registerWidget({
 					key={`renderer-${widgetInstanceId}`}
 					value={widgetInstance.configuration}
 				>
-					{widget.element}
+					<ErrorBoundary FallbackComponent={ErrorFallback}>
+						{widget.element}
+					</ErrorBoundary>
 				</widgetConfigContext.Provider>
 			) : (
 				<div>