javascript / intermediate
Snippet
Erfassen und Klassifizieren unbehandelter Komponentenfehler mittels onErrorCaptured
Der Lifecycle-Hook `onErrorCaptured` fängt unbehandelte Fehler ab, die von untergeordneten Komponenten nach oben steigen. Durch Prüfen des Fehlerobjekts mit JavaScripts `instanceof Error` und Kategorisieren anhand der Fehlermeldung können Komponenten präzise interne Fehlergrenzen bilden. Das Zurückgeben von `false` stoppt die Weiterleitung an globale Fehler-Handler.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref, onErrorCaptured } from 'vue';export function useErrorCatcher() {const activeError = ref(null);const errorSeverity = ref('none');onErrorCaptured((err, targetInstance, info) => {const message = err instanceof Error ? err.message : String(err);const isNetwork = message.toLowerCase().includes('network') || message.toLowerCase().includes('fetch');activeError.value = { message, lifecycleHook: info };errorSeverity.value = isNetwork ? 'warning' : 'critical';return false;});return { activeError, errorSeverity };}
vue
Erklärung
1
onErrorCaptured((err, targetInstance, info) => {
Registriert einen Hook, der ausgelöst wird, sobald eine untergeordnete Komponente einen unbehandelten Fehler auslöst.
2
const message = err instanceof Error ? err.message : String(err);
Liest die Fehlermeldung sicher aus, unabhängig davon, ob ein Error-Objekt oder ein primitiver Wert geworfen wurde.
3
return false;
Verhindert, dass der Fehler weiter nach oben zu Elternkomponenten oder window.onerror propagiert.