app.config.errorHandler for Global Errors
Global error handler, logging to Sentry/Datadog, environment-aware error display.
app.config.errorHandler for Global Errors is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Global Error Handler
Vue exposes app.config.errorHandler, a single function that catches errors from anywhere in the app that were not handled locally. It is your last line of defense.
The Handler Signature
It receives the same three arguments as onErrorCaptured: the error, the component instance, and an info string.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Setting It Up
Configure it on the app instance in your entry file, before mounting.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Catching Unhandled Errors
It catches errors from component render, lifecycle hooks, watchers, and event handlers across the whole app - including ones that propagated past local onErrorCaptured hooks.
Reporting to Sentry in Production
In production, forward errors to a monitoring service like Sentry so you learn about failures users hit.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Detailed Logging in Development
During development, log richer detail to the console to debug fast.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Branching on Environment
A robust handler does both: report in production, verbose-log in development, in one function.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Async Errors
The global handler also catches errors thrown inside async lifecycle hooks and watchers. For raw unhandled promise rejections outside Vue, add a window listener too.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Relationship to Boundaries
Local boundaries and onErrorCaptured handle and contain errors near where they happen; the global handler is the safety net for everything that escapes. Use both together.
Do Not Swallow Silently
Avoid an empty handler that hides errors. Always at least log or report - silent failures make bugs invisible and very hard to track down.
Adding Context
Enrich reports with the current route, user id, or app version so triaging production errors is faster.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Quick Check
What does app.config.errorHandler handle?
Recap
You learned app.config.errorHandler = (err, instance, info) => {} is the global catch-all: report to Sentry in production, log in detail during development, and pair it with local boundaries for layered, resilient error handling.
Frequently asked questions
Is the “app.config.errorHandler for Global Errors” lesson free?
Yes — the full text of “app.config.errorHandler for Global Errors” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “app.config.errorHandler for Global Errors”?
Global error handler, logging to Sentry/Datadog, environment-aware error display. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “app.config.errorHandler for Global Errors” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- onErrorCaptured Lifecycle Hook
- Error Boundary Components
- app.config.errorHandler for Global Errors
- Async Error Handling in Composables