Add Replay integration into Nuxt SDK

[wanderowski]

Problem Statement

In the current Nuxt SDK, the replay functionality is not present. If you put Sentry.replayIntegration into sentry.client.config.ts, it will produce a warning in the console saying: "sentry.client.config.ts:9 Replay is disabled because neither replaysSessionSampleRate nor replaysOnErrorSampleRate are set.", even though these parameters are set in the config file.

Also, Typescript warns that these parameters do not exist.

I don't know if this is a bug, so I posted it as a feature request.

Thank you for all the work you are doing!

Solution Brainstorm

According to the replay docs, we should "import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser". Probably, it should be added in the current Nuxt SDK.

[chargome]

Hi @wanderowski, could you please paste your config just for double-checking?

[wanderowski]

Hi @chargome

Yep, here it is:

import * as Sentry from '@sentry/nuxt';

const config = useRuntimeConfig();

Sentry.init({
    dsn:                     config.public.sentry.config.dsn,
    tracesSampleRate:        0.5,
    replaySessionSampleRate: 0.1,
    replayOnErrorSampleRate: 0.2,
    integrations: [
        Sentry.captureConsoleIntegration({
            levels: ['error', 'warn'],
        }),
        Sentry.globalHandlersIntegration({
            onerror:              true,
            onunhandledrejection: true,
        }),
        Sentry.replayIntegration({
            maskAllText:   true,
            maskAllInputs: true,
        }),
    ],
});

[chargome]

@wanderowski could you please remove the other integrations and try if it works then? globalHandlersIntegration should btw be enabled automatically, so you don't need to include it.

Also I assume the config you provided is sentry.client.config?

EDIT: you might not be running replay in a browser context - please double check that your setup matches https://docs.sentry.io/platforms/javascript/guides/nuxt/

[wanderowski]

@chargome Thank you for the tip, removed globalHandlersIntegration from my config. Removing other integrations did not help.

Yes, the config I provided is sentry.client.config.ts located in the root folder. I double-checked the manual and it is the same as in my project.

I guess, the problem could be in the fact that we use Nuxt layers. This config file is located in one of the projects inside a monorepo. However, the sentry module itself is installed globally for the whole workspace, not for the project. Let me check on that.

[chargome]

I'm missing a bit of nuxt context tbh but that could potentially be the issue yes. Additionally you could provide your folder/config structure and maybe add the debug: true flag to your init call – and paste the logs here.

[wanderowski]

@chargome I found a solution. Unfortunately, I misspelt the config key. It should be replaysSessionSampleRate, not replaySessionSampleRate :') Thank you for the time spent!

P.S. I'll close the issue, since it was resolved