javascript / intermediate
Snippet
Fehlererfassung mit onErrorCaptured
Der Lifecycle-Hook onErrorCaptured fungiert als lokale Fehlergrenze. Er fängt Fehler ab, die von einer untergeordneten Komponente stammen, sodass Sie eine Fallback-UI anzeigen oder Fehler protokollieren können, ohne dass die gesamte Anwendung abstürzt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup>import { onErrorCaptured, ref } from 'vue';const error = ref(null);onErrorCaptured((err, instance, info) => {error.value = err.message;console.error('Captured in component:', info);return false; // Prevents the error from propagating further});</script><template><div v-if="error" class="error-banner">Something went wrong: {{ error }}</div><ChildComponent v-else /></template>
vue
Erklärung
1
onErrorCaptured((err, instance, info) => { ... })
Hook, der den Fehler, die Komponenteninstanz und eine Info-Zeichenfolge darüber erhält, wo er aufgetreten ist.
2
return false;
Die Rückgabe von false verhindert, dass der Fehler an den globalen Error-Handler weitergegeben wird.