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. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “app.config.errorHandler for Global Errors” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “app.config.errorHandler for Global Errors”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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