Catching errors with app.config.errorHandler in Vue

An app-level error handler gives you one place to receive errors thrown by components anywhere in the app.

How it works

Set the handler on app.config. app.config.errorHandler is a function that receives the error. This one pushes err.message into a ref that the page renders as a list. [1]
Configure before mounting. The handler is assigned before app.mount(root). The Broken child throws during setup on the first render, and its error appears in the list. [1]
Errors from event handlers. The red button's onClick throws a new error each time. It lands in the same list next to the setup error. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

import { createApp, ref, h } from "vue";

const root = document.getElementById("root");
root.style.cssText = "height:100%;display:grid;place-items:center;background:#111;font-family:system-ui,sans-serif";

const card = "background:#fff;color:#1f2937;padding:20px 24px;border-radius:14px;width:360px;box-shadow:0 10px 30px rgba(0,0,0,.5)";
const errors = ref([]);

// a child component that fails while it is being set up
const Broken = {
  setup() {
    throw new Error("Broken component: setup() failed");
  },
};

const app = createApp({
  setup() {
    return () =>
      h("div", { style: card }, [
        h("h2", { style: "margin:0 0 12px;font-size:18px;color:#35495e" }, "app.config.errorHandler"),
        h(Broken),
        h("button", {
          style: "padding:8px 14px;border:0;border-radius:8px;background:#ef4444;color:#fff;font-weight:600;cursor:pointer",
          onClick: () => {
            throw new Error(`Click handler failed at ${new Date().toLocaleTimeString()}`);
          },
        }, "Throw from a click handler"),
        h("p", { style: "margin:14px 0 6px;font-weight:600" }, `Caught errors (${errors.value.length}):`),
        h("ol", { style: "margin:0;padding-left:20px;font:13px ui-monospace,monospace;color:#b91c1c" },
          errors.value.map((msg, i) => h("li", { key: i }, msg))
        ),
      ]);
  },
});

// set before mount(), so errors thrown while mounting are caught too
app.config.errorHandler = (err) => {
  errors.value.push(err.message);
};

app.mount(root);

Ctrl/⌘ + Enter runs

Press the red button a few times: each thrown error is added to the list. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with vue 3.5.43. Needs WebGL.

More Vue examples

A reactive counter with createApp and ref in Vue Options API in Vue: data, methods and mounted Render functions with h() in Vue Multiple Vue apps on one page

Sources

Docs: Creating a Vue Application {#creating-a-vue-application}

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with Vue? Ask AgentGid →