javascript / expert
Snippet
Globale Fehlerbehandlung und Klassifizierung in App-Konfigurationen
Dieses Beispiel veranschaulicht, wie benutzerdefinierte Klassenvererbung in Kombination mit Vues anwendungsweitem errorHandler-Hook eine zentralisierte Fehlerklassifizierung ermöglicht. Die Unterscheidung benutzerdefinierter ApplicationError-Ausnahmen von unbehandelten JavaScript-Abstürzen vereinfacht Logging und Fehlerbehebung.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { createApp, ComponentPublicInstance } from 'vue';import App from './App.vue';class ApplicationError extends Error {constructor(message: string, public code: string) {super(message);this.name = 'ApplicationError';}}const app = createApp(App);app.config.errorHandler = (err: unknown,instance: ComponentPublicInstance | null,info: string) => {if (err instanceof ApplicationError) {console.warn(`Domain Error [${err.code}]: ${err.message} in hook (${info})`);} else if (err instanceof Error) {console.error(`Unhandled Runtime Exception: ${err.stack} at lifecycle (${info})`);} else {console.error('Unknown throw caught:', err, info);}};
vue
Erklärung
1
class ApplicationError extends Error {
Erweitert die JS-Standard-Error-Klasse zur Definition benutzerdefinierter Fehlertaxonomien mit Diagnosecodes.
2
app.config.errorHandler = (err, instance, info) => {
Klinkt sich in Vues globalen Error-Dispatcher ein, um unbehandelte Lifecycle-Ausnahmen anwendungsweit zu erfassen.
3
if (err instanceof ApplicationError) {
Verwendet Type-Guards im Steuerfluss, um domänenspezifische Fehler von generischen JavaScript-Fehlern zu unterscheiden.
4
console.warn(`Domain Error [${err.code}]: ${err.message} in hook (${info})`);
Behandelt kategorisierte Domänenfehler ordnungsgemäß mit spezialisierten Protokollierungsstrategien.
5
console.error(`Unhandled Runtime Exception: ${err.stack} at lifecycle (${info})`);
Extrahiert detaillierte Aufrufstapel-Spuren und Kontext von Vue-Lifecycle-Hooks für unerwartete Fehler.