javascript / expert
Snippet
Global Vue Error Handler Pattern with Circuit Breaker Resiliency
An expert error handling pattern for app.config.errorHandler. Implementing a Circuit Breaker prevents cascading failure loops or log-flooding when a deeply nested Vue component repeatedly crashes.
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
export function createResilientErrorHandler(threshold = 3, resetTimeoutMs = 10000) {let failureCount = 0;let circuitOpen = false;return (err, instance, info) => {if (circuitOpen) {console.warn('Circuit breaker open. Suppressing downstream telemetry.');return;}failureCount++;console.error(`[Vue Error Boundary] Source: ${info}`, err);if (failureCount >= threshold) {circuitOpen = true;setTimeout(() => {failureCount = 0;circuitOpen = false;}, resetTimeoutMs);}};}
vue
Breakdown
1
return (err, instance, info) => {
Implements the standardized Vue global error boundary handler function signature.
2
if (circuitOpen) {
Bypasses log execution when the failure count breaches the defined resilience threshold.
3
setTimeout(() => { failureCount = 0; circuitOpen = false; }, resetTimeoutMs);
Schedules an automatic reset after a cooldown period to restore standard error tracking.