What is the correct way to install Sentry on Nuxt? 😥

[svk-man]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

@sentry/nuxt

SDK Version

8.45.0

Framework Version

3.14.159

Link to Sentry event

No response

Reproduction Example/SDK Setup

Sentry.init({
    dsn: import.meta.env.APP_SENTRY_INIT_DSN,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration(),
      Sentry.browserProfilingIntegration(),
      Sentry.captureConsoleIntegration({
        levels: ['error', 'warn'],
      }),
      Sentry.dedupeIntegration(),
      Sentry.httpClientIntegration({
        failedRequestStatusCodes: [400, 401, 403, 404, 405, 429, 444],
      }),
    ],
    sendDefaultPii: true,
    tracesSampleRate: 1.0,
    tracePropagationTargets: ['localhost'],
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    profilesSampleRate: 1.0,
  })

Steps to Reproduce

I have followed the steps from the existing instructions:

1. https://nuxt.com/modules/sentry
2. https://docs.sentry.io/platforms/javascript/guides/nuxt/manual-setup/

Steps:

1. Install the Sentry Nuxt SDK:

# Using npm
npm install @sentry/nuxt

2. Add @sentry/nuxt/module to the modules section of nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sentry/nuxt/module'],
});

3. Add a sentry.client.config.ts file to the root of your project:

import * as Sentry from '@sentry/nuxt'
import { useRuntimeConfig } from '#imports'

Sentry.init({
  dsn: useRuntimeConfig().public.sentry.dsn,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.browserProfilingIntegration(),
    Sentry.captureConsoleIntegration({
      levels: ['error', 'warn'],
    }),
    Sentry.dedupeIntegration(),
    Sentry.httpClientIntegration({
      failedRequestStatusCodes: [400, 401, 403, 404, 405, 429, 444],
    }),
  ],
  sendDefaultPii: true,
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost'],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  profilesSampleRate: 1.0,
})

4. Add a sentry.server.config.ts file to the root of your project:

import * as Sentry from '@sentry/nuxt'

if (process.env.APP_SENTRY_INIT_DSN) {
  Sentry.init({
    dsn: import.meta.env.APP_SENTRY_INIT_DSN,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.replayIntegration(),
      Sentry.browserProfilingIntegration(),
      Sentry.captureConsoleIntegration({
        levels: ['error', 'warn'],
      }),
      Sentry.dedupeIntegration(),
      Sentry.httpClientIntegration({
        failedRequestStatusCodes: [400, 401, 403, 404, 405, 429, 444],
      }),
    ],
    sendDefaultPii: true,
    tracesSampleRate: 1.0,
    tracePropagationTargets: ['localhost'],
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    profilesSampleRate: 1.0,
  })
}

5

"overrides": {
  "@vercel/nft": "^0.27.4"
}

6. Add the command to package.json:

"start": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs",

Expected Result

I expect everything to work right out of the box.
Help me, please!

Actual Result

I get the following typing errors in the files (sentry.client.config.ts and sentry.server.config.ts):

• The ‘init’ property does not exist in the ‘typeof import(’project-name/node_modules/@sentry/nuxt/build/types/index.types‘)’ type.
• The ‘browserTracingIntegration’ property does not exist in the ‘typeof import(’project-name/node_modules/@sentry/nuxt/build/types/index.types‘)’ type.
• etc

When I go to import, I get:

[s1gr1d]

Thanks for reporting! Turns out adding an additional build config changed the build output of the types since 8.44.0.

I'm gonna fix this.