Improve baseline error handling for the UI dashboard
- Vorherrschende Sprache
- Keine Sprachdaten
- Sterne
- 3
- Forks
- 0
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
This is a request spurred by recent issues (coder/coder#13130 and coder/coder#13723). Decided to spin this off into a separate issue instead of piling more stuff on top of the latest issue.
## Problem
In the past two months, we have had two breaking issues slip through all of our error handling and lead to the entire UI app blowing up. This issue outlines steps for improving the dashboard's general reliability, and making it much harder for these problems to happen again.
## Action items
- [ ] Turn on [TypeScript's `noUncheckedIndexedAccess` compiler setting](https://www.typescriptlang.org/tsconfig/#noUncheckedIndexedAccess)
- This setting can present a bit of a difficulty curve depending on how you write your JS/TS, but it basically ensures that we will never accidentally access a property from a null/undefined value again (unless we use type assertions to silence type warnings)
- I don't think we'll need to change too much of our existing code to make the compiler happy with this setting, but I'm sure there's at least a few lines we'd have to change
- This setting 100% would've caught coder/coder#13723.
- [ ] Investigate why our current top-level error boundary is letting errors slip through as uncaught errors
- We have [an error boundary in place](https://github.com/coder/coder/tree/main/site/src/components/ErrorBoundary) that is supposed to catch any render errors, and display a fallback UI. [It's wrapped around our entire application](https://github.com/coder/coder/blob/05fdb9c1f7052b81973a3ee083fd67edfceb7fc4/site/src/App.tsx#L84), but it hasn't always been triggering.
- [ ] Add an additional error boundary around the main content of the app
- Even if the top-level error boundary would always trigger when needed, there's still the matter that if an error happens in one part of the app, the entire app unloads for the fallback UI
- I suggest adding at least one more error boundary around the main content (everything below the nav bar, basically). This would make it so that even if an error happens, the navigation will still likely be enabled. The top-level error boundary should be for completely unprecedented, unrecoverable errors.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Rechercherichtung
Beginne mit dem Lesen von site/src/components/ErrorBoundary und des Wrappers um die Anwendung in site/src/App.tsx. Aktiviere TypeScripts noUncheckedIndexedAccess-Einstellung, untersuche, warum die bestehende Boundary Fehler nicht erfasst, und füge eine Boundary um den Hauptinhalt hinzu, damit die UI das Fallback-Verhalten anzeigt, ohne unnötigerweise die Navigation zu verlieren.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100