Nuxt 3 compatibility

[nandi95]

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?

[rchl]

Thanks for reporting. This is discussed in https://github.com/nuxt/framework/discussions/751#discussioncomment-1468163 a bit. I would still like some answers from the team and better documentation since it's not clear how things should look going forward.

And related to that, I'm not in a rush to fix it since Nuxt 3 appears to need quite a bit of work before it stabilizes.

Open to any suggestions and help though.

[nandi95]

Missed that! Still this issue could be useful so others can find this too and for tracking support down the line.

[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),
        }
    }
})

3. 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: 'some@email.com' });
}
</script>

[devlsh]

With Nuxt 3 RC1 being released in the coming days, has there been any movement on this?

[rchl]

Not really. If anyone knows how everything can be made to work in Nuxt 3 then feel free to contribute.

The biggest problem might be with getting it to work on the server-side (in server middleware specifically) as Nuxt 3 doesn't want modules to run at runtime and I haven't seen an equivalent to current solution for Nuxt 3.

[daniluk4000]

@rchl http://v3.nuxtjs.org/api/advanced/kit

As far as I can understand, you can call addPlugin, addServerMiddleware, and Webpack/Vite methods in module, and those settings will be applied when project start.

Is this something that will allow module to run on runtime and allow migration to Nuxt 3?

[rchl]

One thing that would need to be figured out is publishing of releases which relies on a webpack plugin provided by Sentry right now. It won't work with Vite.

As for using addServerMiddleware, that would have to be tested but it would be a bit awkward as we'd need to generate the file with the user options included and then add it using addServerMiddleware. Typical thing for plugins but feels a bit weird for server middleware maybe...

[daniluk4000]

It won't work with Vite

Damn. That would be hard then.

[darthf1]

I found https://github.com/ikenfin/vite-plugin-sentry, but its unofficial. I'm not using that plugin myself so I don't know if it would fit here.

[asonnleitner]

One thing that would need to be figured out is publishing of releases which relies on a webpack plugin provided by Sentry right now. It won't work with Vite.

As for using addServerMiddleware, that would have to be tested but it would be a bit awkward as we'd need to generate the file with the user options included and then add it using addServerMiddleware. Typical thing for plugins but feels a bit weird for server middleware maybe...

About that, I am looking into making a unplugin for sentry which would support, webpack, vite, rollup and esbuild. unplugin-sentry and also have made a Dev repo where I might work on the sentry module. nuxt-sentry

[rchl]

@asonnleitner appreciate the work and hope that we could use and/or merge those changes at some point.

Though it's still not fully clear to me how the situation looks like right now when it comes to module supporting both Nuxt 2 and Nuxt 3.

While @nuxt/bridge is supposedly bridging that gap and allowing for exactly that, it itself introduces breaking changes to Nuxt 2, as far as my experience goes. And since Nuxt 2 has and will have a big market share for a while longer, it would be non-ideal to either:

• have to maintain two separate versions of the module
• migrate to Nuxt 3 and not care about Nuxt 2 anymore

[klausXR]

How is this going?

Trying to migrate to nuxt-edge and this plugin doesns't seem to work. Should we ask for help or something, because I'm not sure how you can migrate any meaningful app without error reporting.

Especially at a time where you are expecting the error rate to skyrocket due to breaking changes of packages

[klausXR]

@danielroe can we get some insights here on the problems that are troubling the maintainers of this library?

We really need to get this module working, Sentry is the premier package for error reporting and is probably used across most of Vue/Nuxt projects.

I'm not sure any people working on production-ready apps would be willing to migrate if they don't have error reporting abilities.

[asonnleitner]

@asonnleitner appreciate the work and hope that we could use and/or merge those changes at some point.

Though it's still not fully clear to me how the situation looks like right now when it comes to module supporting both Nuxt 2 and Nuxt 3.

While @nuxt/bridge is supposedly bridging that gap and allowing for exactly that, it itself introduces breaking changes to Nuxt 2, as far as my experience goes. And since Nuxt 2 has and will have a big market share for a while longer, it would be non-ideal to either:

• have to maintain two separate versions of the module

• migrate to Nuxt 3 and not care about Nuxt 2 anymore

@rchl I think to make the plugin compatible with all nuxt2/bridge and 3 should not be an issue, but I am currently a bit tight with time so will take a while until I'll have a look at it in-depth.