From 6533cd44e7d74c8ef364e6532a3cc540c4dc9202 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20Schr=C3=B6tler?= <niklas@allround.digital>
Date: Sun, 26 Nov 2023 20:55:28 +0100
Subject: [PATCH] App: Added error handling for panels and backgroundImage
functionality
---
src/App.tsx | 41 +++++++++++++++++++++++++++++++----------
1 file changed, 31 insertions(+), 10 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 2c3ec2a..cb722c2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,11 @@
import React from 'react';
import './App.css';
import ScreenWrapper from "./meta/ScreenWrapper";
-import PanelWrapper from "./meta/PanelWrapper";
-import PanelTitle from "./meta/PanelTitle";
-import PanelContent from "./meta/PanelContent";
-import FahrplanPanel from "./panels/Fahrplan/FahrplanPanel";
-import LayoutElement from "./layout/LayoutElement";
import useLayout from "./hooks/useLayout";
import {PanelRenderers} from "./panels/_Panels";
+import LayoutElement from "./layout/LayoutElement";
+import ErrorPanel from "./panels/Error";
+import {ErrorBoundary} from "react-error-boundary";
function App() {
const layout = useLayout();
@@ -22,14 +20,37 @@ function App() {
return (
<div className={"overflow-hidden w-screen h-screen bg-zinc-950 text-white"} style={{fontFamily: "Inter"}}>
- <ScreenWrapper>
+ <ScreenWrapper backgroundImage={layout.background}>
{
layout.panels.map(panel => {
- const Renderer = PanelRenderers[panel.type];
+ try {
+ const Renderer = PanelRenderers[panel.type];
+
+ if(!Renderer) {
+ console.error(`Rendering a panel of type ${panel.type} at (${panel.position.x}, ${panel.position.y}) failed. Config:`, panel.config)
+ return (
+ <LayoutElement config={panel}>
+ <ErrorPanel
+ message={`Unable to find a panel definition for type "${panel.type}"`}
+ />
+ </LayoutElement>
+ )
+ }
+
+ return (
+ <LayoutElement config={panel}>
+ <ErrorBoundary fallback={
+ <ErrorPanel
+ message={`Panel of type ${panel.type} failed to render. Please check the config you provided.`}
+ />
+ }>
+ <Renderer definition={panel.config} />
+ </ErrorBoundary>
+ </LayoutElement>
+ )
+ } catch (e) {
- return (
- <Renderer definition={panel.config} />
- )
+ }
})
}
</ScreenWrapper>
--
GitLab