Snippet

Fehler im Komponentenbaum kontrolliert abfangen mit onErrorCaptured

Der Lebenszyklus-Hook onErrorCaptured fängt Fehler ab, die von untergeordneten Komponenten im Vue-Renderbaum nach oben weitergeleitet werden. Durch die Rückgabe von false wird die Fehlerweiterleitung gestoppt, sodass der Fehler nicht in globale Handler eskaliert oder den übergeordneten Anwendungskontext zum Absturz bringt.

snippet.js

javascript

import { ref, onErrorCaptured } from 'vue';
 
export default {
  setup() {
    const errorState = ref(null);
 
    onErrorCaptured((err, instance, info) => {
      errorState.value = { message: err.message, hookLocation: info };
      return false;
    });
 
    const resetError = () => {
      errorState.value = null;
    };
 
    return { errorState, resetError };
  }
};

vue

Erklärung

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

Registriert einen Error-Boundary-Handler, der das abgefangene Error-Objekt, die auslösende Komponenteninstanz und die Lebenszyklus-Info empfängt.

errorState.value = { message: err.message, hookLocation: info };

Speichert Fehlerdetails in einem reaktiven State, um eine lokale Ausweich-Benutzeroberfläche (Fallback UI) anzuzeigen.

return false;

Verhindert, dass der Fehler weiter in der Vue-Komponentenhierarchie nach oben propagiert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Fehler im Komponentenbaum kontrolliert abfangen mit onErrorCaptured

Verwandt