javascript / expert
Snippet
Fehlergrenzen auf Komponentenebene via onErrorCaptured
onErrorCaptured ist ein spezieller Lifecycle-Hook, der wie ein 'try-catch' für den gesamten Komponenten-Teilbaum fungiert. Er fängt Fehler aus Render-Funktionen, Watchern und Event-Listenern von Kindkomponenten ab. Die Rückgabe von 'false' ist entscheidend, da sie verhindert, dass der Fehler zum globalen App-Handler aufsteigt, was eine lokalisierte, sanfte Fehlerbehandlung ermöglicht.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { onErrorCaptured, ref } from 'vue';export default {setup() {const error = ref(null);onErrorCaptured((err, instance, info) => {error.value = err.message;console.error(`Error in ${instance.$options.name}:`, info);// Return false to stop the error from propagating further upreturn false;});return { error };}}
vue
Erklärung
1
onErrorCaptured((err, instance, info) => {
Hook, der ausgelöst wird, wenn eine untergeordnete Komponente einen unbehandelten Fehler wirft.
2
return false;
Stoppt die Fehlerfortpflanzung und fängt den Fehler auf dieser Ebene effektiv ab.