← All platforms

Vue error tracking

Your components, your templates, your occasional surprise. The Sentry Vue SDK sends error reports to Telebugs on your server. 

~/hoofnotes  npm install @sentry/vue --save
added 12 packages in 2s
~/hoofnotes  nvim src/main.ts
import { createApp } from "vue";
import * as Sentry from "@sentry/vue";
import App from "./App.vue";
const app = createApp(App);
Sentry.init({
app,
// Copy the complete Telebugs DSN, key and path included.
dsn: "YOUR_TELEBUGS_DSN",
});
app.mount("#app");
// Remove this test once it appears in Telebugs.
Sentry.captureException(new Error("Hello from Hoof Notes"));
~/hoofnotes  npm run dev -- --open
> [email protected] dev
> vite --open

  VITE  ready in 182 ms

  ➜  Local:   http://localhost:5173/
  ➜  press h + enter to show help

Hang on, I already use Sentry

Keep @sentry/vue. Change its DSN to Telebugs and keep your existing error reporting. No Sentry account needed.

Will it catch errors in my components?

Yes. The SDK connects to Vue’s error handler. It also reports uncaught browser errors and unhandled promise rejections.

What about my .vue files?

With matching source maps, Telebugs can show the original component code in the backtrace. You don’t have to make sense of the compiled bundle.

And if I use Nuxt?

We support Nuxt, too. Its Sentry integration covers both the browser and the server side of your Vue app.