Sentry not found on nextjs

[vespa7]

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?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.53.0

Framework Version

14.2.21

Link to Sentry event

https://everest-194.sentry.io/issues/28603450/events/4b675f23fd164b2bb5ac69ac711013f1/

Reproduction Example/SDK Setup

TypeError: Cannot read properties of undefined (reading 'sentry')

next.config.js

    /** @type {import('next').NextConfig} */
const nextConfig = {
        reactStrictMode: true,
        experimental: {
            typedRoutes: true,
            serverComponentsExternalPackages: ['sequelize', 'convict']
        },
        webpack: (config) => {
            // eslint-disable-next-line no-param-reassign
            config.resolve.alias.canvas = false;

            return config;
        }
    };

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withSentryConfig } = require('@sentry/nextjs');

module.exports = withSentryConfig(nextConfig, {
    org: 'everest-194',
    project: 'everest',
    silent: !process.env.CI,
    widenClientFileUpload: true,
    reactComponentAnnotation: {
        enabled: true
    },
    authToken: process.env.SENTRY_AUTH_TOKEN,
    tunnelRoute: undefined, // usually /monitoring tried if it fixed the error
    hideSourceMaps: true,
    sourcemaps: {
        disable: true
    },
    disableLogger: true,
    // next three usually not included, just tried if they fixed the error
    autoInstrumentAppDirectory: false,
    autoInstrumentServerFunctions:false,
    autoInstrumentMiddleware: false,
    automaticVercelMonitors: false
});

instrumentation.ts

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

export async function register() {
    if (process.env.NEXT_RUNTIME === 'nodejs') {
        await import('../sentry.server.config');
    }

    if (process.env.NEXT_RUNTIME === 'edge') {
        await import('../sentry.edge.config');
    }
}

export const onRequestError = Sentry.captureRequestError;

sentry.(sever|edge).ts

import * as Sentry from "@sentry/nextjs";

Sentry.init({
    dsn: "https://f51e82984682dfd3b57cdea384474f53@o4508749268779008.ingest.de.sentry.io/4508750933393488",
    tracesSampleRate: 1,
    debug: true
});

sentry.client.config.ts

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

Sentry.init({
    dsn: 'https://f51e82984682dfd3b57cdea384474f53@o4508749268779008.ingest.de.sentry.io/4508750933393488',
    integrations: [Sentry.replayIntegration()],
    tracesSampleRate: 1,
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    debug: true
});

middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isProtectedRoute = createRouteMatcher([
    '/((?!sign-in|sign-up|monitoring|instrumentation|_vercel).*)'
]);

export default clerkMiddleware((auth, req) => {
    if (isProtectedRoute(req)) auth().protect();
});

export const config = {
    matcher: ['/((?!.*\\..*|_next|_vercel|sentry|monitoring|instrumentation).*)', '/(api|trpc)(.*)']
};

Steps to Reproduce

next build && next start and every client-side page fails (only on build mode, dev mode works okay)

Expected Result

sentry is found

Actual Result

TypeError: Cannot read properties of undefined (reading 'sentry')

[vespa7]

@Ceres6

[chargome]

@vespa7 thanks for reaching out!

So there's nothing that immediately calls my attention on why this would fail. Could you set disableLogger: false in your next config and see if you get any logs on the client?

Best case would you be able to condense this issue to a reproducible example that we could clone and inspect?

[Ceres6]

Hi @chargome! I'm working with @vespa7. Here is the repro. Sorry for the weird library needed to reproduce react-three/fiber I'll keep trying to reproduce without it but none of our failing pages are very simple so it is being difficult to get a good repro. My first thought was that it had an error when crossing Suspense boundaries, but I haven't been able to isolate it. Hopefully the provided one is enough 🙏🏻

[Ceres6]

Just to see if I was lucky I searched for issues with react-three/fiber and came across this so I think we can close this one

[chargome]

@Ceres6 ah yeah, good find!

Let's close this in favour of getsentry/sentry-javascript-bundler-plugins#530 and continue there. Thanks for making the effort of a repro though!

[Ceres6]

Sure - no problem! Happy to help with the fix if wanted