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

javascript

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 up
      return false;
    });
 
    return { error };
  }
}

vue

Erklärung

onErrorCaptured((err, instance, info) => {

Hook, der ausgelöst wird, wenn eine untergeordnete Komponente einen unbehandelten Fehler wirft.

return false;

Stoppt die Fehlerfortpflanzung und fängt den Fehler auf dieser Ebene effektiv ab.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Fehlergrenzen auf Komponentenebene via onErrorCaptured

Verwandt