Plan for Nuxt 3 version

[rchl]

The module's code was refactored in #456 and now largely follows a structure of a Nuxt 3 module (using defineModule and all) but note that it's not using @nuxt/kit but instead a "homemade" shim that has similar (same?) methods. This should make it easy to transition to the real @nuxt/kit for Nuxt 3.

The plan is for the Nuxt 3 version to live on its own branch and have higher major version (we can skip 2 versions or so to give some space for the Nuxt 2 version to introduce breaking changes). Attempts at making a version compatible with both Nuxt 2 and Nuxt 3 were futile so this is how it has to be. Alternatively, a monorepo with both versions sounds like a viable alternative but those would have to not share dependencies so not sure if that would work (I'm not too familiar with the current monorepo solutions).

When implementing the new version, those are some challenges that I foresee:

• Supporting Nitro and making Sentry available on the server side (in non-webpack/non-vite context). Current version exposes sentry on process.sentry which is a bit of a hack to make Sentry available globally and to avoid reinitializing it on every server side page load. This is to also to allow use of Sentry even outside of specific server routes. If there are better ways to do it in Nuxt 3 then we can try that, even if it would be a breaking change. Important: ensure that Sentry is initialized early in a global server context. It would likely not be enough to do from a middleware and require some request to run first.
• Supporting publishing releases in Vite environment. Currently we are using the official webpack plugin to handle that. We would also need to support Vite. Looks like there is official support ready for Vite now in https://github.com/getsentry/sentry-javascript-bundler-plugins
• Supporting tracing functionality. Part of the functionality uses connect/express middleware to instrument tracing of routes. Make sure that still works.
• Adding the Vue composition APIs. Currently lacking.
• Sentry express/connect middleware handlers (https://docs.sentry.io/platforms/node/guides/express/) have a bunch of logic for detecting transactions, session tracking and more. Not sure if h3 is compatible with those. If not then maybe those have to be adapted for Nuxt 3 version.

I'm open for contributors to tackle this. Since I'm not using Nuxt 3 at the moment, I don't have that much incentive or time to work on it myself.

[proalaa]

any updates here guys

[darthf1]

The below is what I currently have. It uses @sentry/vite-plugin, which should tick the second box. The below is most definitely not on par wit the current Nuxt 2 module, and the code is absolutely not battle tested. But maybe it can be used as a starting point.

~/nuxt.config.ts:

import { sentryVitePlugin } from '@sentry/vite-plugin'
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  ssr: false, // I have SSR false

  runtimeConfig: {
    public: {
      ENV: process.env.NODE_ENV ?? 'production',
      SENTRY_ENABLED: process.env.NUXT_PUBLIC_SENTRY_ENABLED,
      SENTRY_DSN: process.env.NUXT_PUBLIC_SENTRY_DSN,
      SENTRY_ENVIRONMENT: process.env.NUXT_PUBLIC_.SENTRY_ENVIRONMENT,
      SENTRY_RELEASE: process.env.NUXT_PUBLIC_SENTRY_RELEASE,
      SENTRY_TRACE_PROPAGATION_TARGET: process.env.NUXT_PUBLIC_SENTRY_TRACE_PROPAGATION_TARGET,
    },
  },

  sourcemap: {
    server: true,
    client: true,
  },

  vite: {
    build: {
      sourcemap: true,
    },
    plugins: [
      sentryVitePlugin({
          authToken: process.env.NUXT_PUBLIC_SENTRY_AUTH_TOKEN,
          debug: true,
          org: process.env.NUXT_PUBLIC_SENTRY_ORG,
          project: process.env.NUXT_PUBLIC_SENTRY_PROJECT,
          release: {
            name: process.env.NUXT_PUBLIC_SENTRY_RELEASE,
          },
          sourcemaps: {
            assets: ['./.nuxt/dist/client/**'],
          },
          telemetry: false,
        }),
    ],
  },
})

~/plugins/sentry.client.ts:

import {
  HttpClient as HttpClientIntegration,
  ReportingObserver as ReportingObserverIntegration,
} from '@sentry/integrations'
import type { Breadcrumb, CaptureContext, Primitive, User } from '@sentry/types'
import * as Sentry from '@sentry/vue'
import { withScope } from '@sentry/vue'
import type { Router } from 'vue-router'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin({
  parallel: true,
  setup: (nuxtApp) => {
    if (
      typeof window === 'undefined' ||
      !['true', true].includes(nuxtApp.$config.public.SENTRY_ENABLED)
    ) {
      return {
        provide: {
          sentrySetContext: (
            _name: string,
            _context: {
              [key: string]: any
            } | null,
          ) => {},
          sentrySetUser: (_user: User | null) => {},
          sentrySetTag: (_key: string, _value: Primitive) => {},
          sentryAddBreadcrumb: (_breadcrumb: Breadcrumb) => {},
          sentryCaptureException: (_exception: any, _captureContext?: CaptureContext) => {},
        },
      }
    }

    Sentry.init({
      app: nuxtApp.vueApp,
      autoSessionTracking: true,
      dsn: nuxtApp.$config.public.SENTRY_DSN,
      release: nuxtApp.$config.public.SENTRY_RELEASE,
      environment: nuxtApp.$config.public.SENTRY_ENVIRONMENT,
      integrations: [
        new Sentry.BrowserTracing({
          routingInstrumentation: Sentry.vueRouterInstrumentation(nuxtApp.$router as Router, {
            routeLabel: 'path',
          }),
        }),
        new Sentry.Replay({
          networkDetailAllowUrls: [`https//${nuxtApp.$config.public.HOST_NAME}`],
        }),
        new HttpClientIntegration(),
        new ReportingObserverIntegration(),
      ],
      tracePropagationTargets: [nuxtApp.$config.public.SENTRY_TRACE_PROPAGATION_TARGET],
      trackComponents: true,
      hooks: ['activate', 'create', 'destroy', 'mount', 'update'],
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
      // We recommend adjusting this value in production
      tracesSampleRate: 0.2,

      // Capture Replay for 10% of all sessions,
      // plus for 100% of sessions with an error
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1,
    })

    nuxtApp.vueApp.config.errorHandler = (err, context) => {
      withScope((scope) => {
        scope.setExtra('context', context)
        Sentry.captureException(err)
      })
    }

    nuxtApp.hook('app:error', (err) => {
      Sentry.captureException(err)
    })

    return {
      provide: {
        sentrySetContext: Sentry.setContext,
        sentrySetUser: Sentry.setUser,
        sentrySetTag: Sentry.setTag,
        sentryAddBreadcrumb: Sentry.addBreadcrumb,
        sentryCaptureException: Sentry.captureException,
      },
    }
  },
})

[kostia7alania]

any news?

[hvegav]

sourcemap are not working with the abobe configuration

[AnthonyRuelle]

Hi, No progress on the subject? we're going to production soon, it's boring :(

[rnenjoy]

Any progress?

[anthony-bernardo]

I don't understand well

Is the @darthf1 code workings or it's your current not working code ?

[shvchuk]

@anthony-bernardo
I my case @darthf1 code with some project specific changes is working well.

Unfortunately sourcemaps do not work, but thats maybe my buggy code or some other issue I can't solve.

[nandi95]

Bugsnag has a module for nuxt. That could be used as a starting point for sentry perhaps?
https://github.com/JulianMar/nuxt-bugsnag/blob/main/src/module.ts

[perzeuss]

Maybe a maintainer could establish a branch specifically for v3 support and a feature branch where we start working on first features for nuxt3 support. Even when not all features of the current module are covered, one could do a pre-release, so we all can start using it. After that, we can improve the solution.

At the moment, everyone would have to copy over a workaround and maybe some of them improve the current workaround but do not come back and contribute an improvement.