Improve baseline error handling for the UI dashboard
- Lingua principale
- Nessun dato sulla lingua
- Stelle
- 3
- Fork
- 0
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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.
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Direzione di ricerca
Inizia leggendo site/src/components/ErrorBoundary e il wrapper intorno all'applicazione in site/src/App.tsx. Abilita l'impostazione noUncheckedIndexedAccess di TypeScript, analizza perché la boundary esistente non rileva gli errori e aggiungi una boundary intorno al contenuto principale, in modo che la UI mostri il comportamento di fallback senza perdere inutilmente la navigazione.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100