javascript / expert
Snippet
Funktionale Error-Boundary Komponente
Unter Nutzung der funktionalen Fähigkeiten von Vue und des onErrorCaptured-Hooks schafft dieses Muster einen lokalen Fehler-Perimeter, der verhindert, dass Laufzeitfehler den gesamten Komponentenbaum zum Absturz bringen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { ref, onErrorCaptured, h } from 'vue';export const ErrorBoundary = {setup(_, { slots }) {const error = ref(null);onErrorCaptured((err) => {error.value = err;return false; // Prevent error from propagating further});return () => error.value? h('div', { class: 'error-ui' }, error.value.toString()): slots.default?.();}};
vue
Erklärung
1
onErrorCaptured((err) => {
Ein Lifecycle-Hook, der Fehler abfängt, die von untergeordneten Komponenten aufsteigen.
2
return false;
Die Rückgabe von false verhindert, dass der Fehler an den globalen Handler oder Eltern-Boundaries weitergereicht wird.
3
return () => error.value ? ...
Eine Render-Funktion, die bedingt eine Fehler-UI oder den Inhalt des Standard-Slots anzeigt.