itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 23:35:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): top-level error boundary so a render error no longer blanks the app (#1194)

Browse Source 
* feat(app): add a top-level error boundary so a render error no longer blanks the app

Until now any thrown error during render took the whole window down with no recovery (issue #382). A class ErrorBoundary around the authenticated shell catches it and shows a recoverable fallback (Try again / Reload app) while playback keeps going. Hook-free + English-only with literal CSS var() fallbacks so it renders even when i18n/theme/state is what broke.

* docs(changelog): error boundary prevents the app blanking on a render error (PR #1194)
This commit is contained in:
Psychotoxical
2026-06-26 20:51:42 +02:00
committed by GitHub
parent afe5b377e0
commit 014d57c53c
5 changed files with 130 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/error-boundary.css
+57
View File
@@ -0,0 +1,57 @@
/* App-level error boundary fallback (components/ErrorBoundary.tsx). Literal
var() fallbacks so it renders even when the active theme is what broke. */
.app-error-boundary {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 60vh;
padding: var(--space-6, 24px);
background: var(--bg-app, #1e1e2e);
color: var(--text-primary, #cdd6f4);
}
.app-error-boundary__card {
width: 100%;
max-width: 520px;
padding: var(--space-6, 24px);
background: var(--bg-card, #313244);
border: 1px solid var(--border, #45475a);
border-radius: var(--radius-lg, 12px);
box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.3));
text-align: center;
}
.app-error-boundary__title {
margin: 0 0 var(--space-2, 8px);
font-size: 20px;
font-weight: 700;
}
.app-error-boundary__text {
margin: 0 0 var(--space-4, 16px);
color: var(--text-secondary, #bac2de);
font-size: 14px;
line-height: 1.5;
}
.app-error-boundary__detail {
margin: 0 0 var(--space-4, 16px);
padding: var(--space-3, 12px);
max-height: 160px;
overflow: auto;
background: var(--bg-deep, #181825);
border-radius: var(--radius-md, 8px);
color: var(--text-muted, #a6adc8);
font-size: 12px;
text-align: left;
white-space: pre-wrap;
word-break: break-word;
}
.app-error-boundary__actions {
display: flex;
gap: var(--space-3, 12px);
justify-content: center;
}
src/styles/components/index.css
+1
View File
@@ -94,3 +94,4 @@
@import './np-dash.css';
@import './orbit-session-top-strip.css';
@import './back-to-top.css';
@import './error-boundary.css';