Nuxt 3 compatibility

With nuxt 3 out in beta, it would be nice if this module can be updated so it also supports v3.

It should be possible to support both by using @nuxt/kit. The version 3 has said it’s compatible with v2 modules but I’m seem to be experiencing issues. Is it might be because this module not using the lastest dependencies?

If this in fact meant to be working with v3, are there any way to ensure that fact with tests?

[jontybrook]

I have written the following Nuxt 3 plugin which seems to be working fairly well for me. Note that Sentry’s SDK doesn’t seem to play well with the native Vue error event handler when logErrors: true is set during Sentry init; however i’ve added a simple console.error in the beforeSend hook so I can still see my errors in dev.

For anyone else using Nuxt 3 that this may be useful for…

1. Add your Sentry DSN to publicRuntimeConfig.SENTRY_DSN in nuxt.config.ts, or define it manually. See other options i’ve sourced from runtime config below, too. Setting DSN is required; other options will fall back to defaults.
2. Add the following in plugins/sentry.client.ts

// plugins/sentry.client.ts

import { defineNuxtPlugin, useRuntimeConfig } from '#app'
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const { vueApp } = nuxtApp;
    console.log(`vueApp: `, vueApp)
    Sentry.init({
        app: [vueApp],
        dsn: config.SENTRY_DSN,
        integrations: [
            new Integrations.BrowserTracing({
                routingInstrumentation: Sentry.vueRouterInstrumentation(nuxtApp.$router),
                tracingOrigins: ["localhost", "yourdomain.com", /^\//],
            }),
        ],
        logErrors: false, // Note that this doesn't seem to work with nuxt 3
        tracesSampleRate: config.SENTRY_TRACES_SAMPLE_RATE || 1.0, // Sentry recommends adjusting this value in production
        debug: config.SENTRY_ENABLE_DEBUG || false, // Enable debug mode
        environment: config.ENVIRONMENT || 'dev', // Set environment
        // The following enables exeptions to be logged to console despite logErrors being set to false (preventing them from being passed to the default Vue err handler)
        beforeSend(event, hint) {
            // Check if it is an exception, and if so, log it.
            if (event.exception) {
                console.error(`[Exeption handled by Sentry]: (${hint.originalException})`, { event, hint })
            }
            // Continue sending to Sentry
            return event;
        },
    });

    vueApp.mixin(Sentry.createTracingMixins({ trackComponents: true, timeout: 2000, hooks: ['activate', 'mount', 'update'] }))
    Sentry.attachErrorHandler(vueApp, { logErrors: false, attachProps: true, trackComponents: true, timeout: 2000, hooks: ['activate', 'mount', 'update'] });

    return {
        provide: {
            sentrySetContext: (n, context) => Sentry.setContext(n, context),
            sentrySetUser: (user) => Sentry.setUser(user),
            sentrySetTag: (tagName, value) => Sentry.setTag(tagName, value),
            sentryAddBreadcrumb: (breadcrumb) => Sentry.addBreadcrumb(breadcrumb),
        }
    }
})

1. Use the provided helpers in your components etc, eg:

<script setup lang="ts">
const { $sentrySetContext, $sentrySetUser } = useNuxtApp()

const throwTestError = () => {
    throw new Error('Test Error')
}

const setContext = () => {
    $sentrySetContext("character", {
        name: "Mighty Fighter",
        age: 19,
        attack_type: "melee",
    });
}

const setUser = () => {
    $sentrySetUser({ email: '[e-mail]' });
}
</script>

[unr]

https://twitter.com/nuxt_js/status/1590312836412379137

Nuxt has been mentioned as nearly-stable, and will be released as stable in the coming weeks.

+1 For nuxt 3 Support on Sentry