From ed4439ae6ff9852c9cfb391746858aac1d8aa0eb Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Fri, 8 Aug 2025 14:55:12 +0200
Subject: [PATCH] =?UTF-8?q?debug(admin):=20ErrorBoundary=20hinzugef=C3=BCg?=
 =?UTF-8?q?t=20und=20Checkbox-Handler=20abgesichert=20f=C3=BCr=20Debug=20s?=
 =?UTF-8?q?tatt=20blanker=20Seite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index bb98b51..d598044 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -119,6 +119,7 @@ export default function App() {
   }
 
   return (
+    <ErrorBoundary>
     <div className="container">
       <header>
         <div className="header-row">
@@ -276,8 +277,14 @@ export default function App() {
                   className="row-check"
                   type="checkbox"
                   checked={!!selectedSet[key]}
-                  onClick={(e) => { e.stopPropagation(); }}
-                  onChange={(e) => setSelectedSet((prev) => ({ ...prev, [key]: e.target.checked }))}
+                  onClick={(e) => { try { e.stopPropagation(); } catch {} }}
+                  onChange={(e) => {
+                    try {
+                      setSelectedSet((prev) => ({ ...prev, [key]: e.target.checked }));
+                    } catch (err) {
+                      console.error('Checkbox change error:', err);
+                    }
+                  }}
                 />
               )}
               <button className="sound" type="button" onClick={(e) => { e.stopPropagation(); handlePlay(s.name, s.relativePath); }} disabled={loading}>
@@ -298,6 +305,7 @@ export default function App() {
       </section>
       {/* footer counter entfällt, da oben sichtbar */}
     </div>
+    </ErrorBoundary>
   );
 }
 
@@ -346,6 +354,28 @@ function CustomSelect({ channels, value, onChange }: SelectProps) {
   );
 }
 
+// Einfache ErrorBoundary, damit die Seite nicht blank wird und Fehler sichtbar sind
+class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { error?: Error }>{
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { error: undefined };
+  }
+  static getDerivedStateFromError(error: Error) { return { error }; }
+  componentDidCatch(error: Error, info: any) { console.error('UI-ErrorBoundary:', error, info); }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ padding: 20 }}>
+          <h2>Es ist ein Fehler aufgetreten</h2>
+          <pre style={{ whiteSpace: 'pre-wrap' }}>{String(this.state.error.message || this.state.error)}</pre>
+          <button type="button" onClick={() => this.setState({ error: undefined })}>Zurück</button>
+        </div>
+      );
+    }
+    return this.props.children as any;
+  }
+}
+