Using Sentry with Nuxt 3

At the time of writing the @nuxtjs/sentry package is not yet compatible with Nuxt 3.

Most of the instructions from the Sentry documentation for Vue 3 will apply, with some minor adjustments.

Start by installing the package dependencies:

npm install --save @sentry/vue @sentry/tracing

Add a new entry to your .env file for SENTRY_DSN that is set to your application DSN, and SENTRY_ENV set to the environment you’d like to report to Sentry.

SENTRY_ENV=testing
SENTRY_DSN=https://examplePublicKey@o0.ingest.sentry.io/0

Replace https://examplePublicKey@o0.ingest.sentry.io/0 with your application’s DSN.

Update your nuxt.config.ts file to include this new config:

export default defineNuxtConfig({
  ...
  runtimeConfig: {
    public: {
      sentry: {
        dsn: process.env.SENTRY_DSN,
        env: process.env.SENTRY_ENV,
      },
    },
  },
  ...

Then create a new plugin in your Nuxt 3 application: plugins/sentry.client.ts

iimport { defineNuxtPlugin, useRouter, useRuntimeConfig } from '#app';
import * as Sentry from '@sentry/vue';
import { BrowserTracing } from '@sentry/tracing';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  const router = useRouter();

  Sentry.init({
    app: nuxtApp.vueApp,
    dsn: config.public.sentry.dsn,
    environment: config.public.sentry.env,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      }),
    ],
    tracesSampleRate: 1.0,
  });

  return {
    provide: {
      sentry: Sentry,
    },
  };

That’s it! Your client side exceptions should now be showing up in Sentry. Hopefully the official plugin is updated soon to support Nuxt 3, but until then this should do the trick.