Snippet

Capturing and Classifying Unhandled Component Exceptions via onErrorCaptured

The `onErrorCaptured` lifecycle hook intercepts uncaught errors bubbling up from descendant components. By inspecting the error object with JavaScript's `instanceof Error` check and categorizing based on its message, components can build fine-grained internal error boundaries. Returning `false` prevents the error from propagating further up to global error handlers.

snippet.js

javascript

import { ref, onErrorCaptured } from 'vue';
 
export function useErrorCatcher() {
  const activeError = ref(null);
  const errorSeverity = ref('none');
 
  onErrorCaptured((err, targetInstance, info) => {
    const message = err instanceof Error ? err.message : String(err);
    const isNetwork = message.toLowerCase().includes('network') || message.toLowerCase().includes('fetch');
 
    activeError.value = { message, lifecycleHook: info };
    errorSeverity.value = isNetwork ? 'warning' : 'critical';
 
    return false;
  });
 
  return { activeError, errorSeverity };
}

vue

Breakdown

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

Registers a hook that triggers whenever any child component throws an unhandled error.

const message = err instanceof Error ? err.message : String(err);

Safely extracts the message whether the thrown item is a standard Error instance or primitive value.

return false;

Prevents the error from propagating upward to parent components or window.onerror.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Capturing and Classifying Unhandled Component Exceptions via onErrorCaptured

Related