javascript / expert
Snippet
Abfangen von Komponentenfehlern über onErrorCaptured-Stack-Hooks
Der Hook onErrorCaptured fängt Fehler ab, die aus untergeordneten Komponentenbäumen stammen. Die Rückgabe von false aus diesem Hook stoppt die Fehlerweiterleitung und verhindert, dass der Fehler zu Wurzel-Handlern aufsteigt oder den gesamten Komponentenbaum zerstört.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { onErrorCaptured, ref } from 'vue';export function useComponentBoundary(logCallback) {const errorState = ref(null);onErrorCaptured((err, instance, info) => {errorState.value = {error: err,component: instance?.$options?.name || 'Anonymous',location: info};if (logCallback) logCallback(err, info);return false;});return { errorState };}
vue
Erklärung
1
onErrorCaptured((err, instance, info) => {
Registriert einen Lifecycle-Hook, der ausgelöst wird, wenn ein unbehandelter Fehler aus Kindkomponenten aufsteigt.
2
return false;
Stoppt die Fehlerweiterleitung im Elternkomponenten-Baum, um kaskadierende Abstürze zu verhindern.