Unable to view Sentry Replays in Production

[AnteDelic]

Hello,

I'm experiencing issues when trying to integrate Sentry Replays with my Nuxt.js application in a production environment.

Here are the packages I use:

"@nuxtjs/sentry": "^7.3.1",
"@sentry/webpack-plugin": "^1.18.9",
"nuxt": "^2.15.8"

This is my Sentry configuration in nuxt.config.js:

sentry: {
    dsn: process.env.SENTRY_DSN,
    disabled: process.env.APP_ENV === 'local',
    clientIntegrations: {
        Replay: {},
    },
    config: {
        release: process.env.SENTRY_RELEASE || 'dev',
        ignoreErrors: [
            /Network Error/,
            /NetworkError/,
            /NavigationDuplicated/,
            /Navigation cancelled/,
            /Cannot set headers after they are sent to the client/,
            /ERR_HTTP_HEADERS_SENT/,
        ],
        beforeSend(event, hint) {
            const apiError = hint.originalException;
            // List of API error slugs/messages to avoid sending to Sentry
            const ignoreApiErrors = ['jwt_token_expired', 'auth_refresh_failed', 'Token not provided'];

            if (apiError && apiError.status && apiError.slug && apiError.message) {
                if (ignoreApiErrors.includes(apiError.slug) || ignoreApiErrors.includes(apiError.message)) {
                    return null;
                }

                /* eslint-disable no-param-reassign */
                event.message = `API error [${apiError.slug}]: ${apiError.message}`;
                event.extra.apiError = apiError;
                event.fingerprint = apiError.slug;
                event.tags = event.tags || {};
                event.tags.apiErrorSlug = apiError.slug;
                /* eslint-enable no-param-reassign */
            }

            return event;
        },
    },
    clientConfig: {
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
    },
}

When I run the app locally (with the disabled property removed and debug: true added to the config object), the replays get uploaded successfully and are visible in the Sentry dashboard. Also, this is visible in the console Sentry Logger [log]: Integration installed: Replay

However, when I deploy my application to production, replays are not displayed in Sentry.

I've checked the documentation and the existing issues here on GitHub, but couldn't find a solution.

Does anyone have an idea of what might be causing this issue? Any help or guidance would be appreciated.

Thank you.

[rchl]

Using browser devtools you can manually verify whether network requests to sentry.io are made on production. If not then it could be a module issue. If they are blocked by the browser then it could be a CSP issue (refer to documentation). If requests are successful then the issue would probably be outside of this module.

[AnteDelic]

Thanks for a quick response.

• CSP has no configuration so everything is allowed.
• I managed to trigger errors on production but I don't see any network calls to sentry.io
• On the other hand new errors keep coming in to Sentry (not mine it seems)
• During the last hour 23 errors were dropped and 46 accepted

This and the fact the Replays from local machine show and from production don't confuses me

[rchl]

You could enable debug config option in production and inspect the developer tools console logs when triggering error.

[rchl]

Closing due to lack of response