Internal Sentry error after ViteJS build with Replays in a React environment using @sentry/react@7.75.0 or higher

[gerardparareda]

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/react

SDK Version

7.107.0 (although every lower version until 7.74.1 fails)

Framework Version

React 17.0.2

Link to Sentry event

No response

SDK Setup

Sentry.init({
        dsn: mydsn,
        envionrment: "production",
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
        integrations: [
            Sentry.breadcrumbsIntegration({
                console: false
            }),
            Sentry.replayIntegration({
                blockAllMedia: false,
                 maskAllText: false
             })
        ],
    });

Steps to Reproduce

1. Install @sentry/react@7.75.0 or higher

2. Enable Replay Sessions
   For the latest versions:

Sentry.init({
        dsn: mydsn,
        envionrment: "production",
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
        integrations: [
            Sentry.breadcrumbsIntegration({
                console: false
            }),
            Sentry.replayIntegration({
                blockAllMedia: false,
                 maskAllText: false
             })
        ],
    });

or for earlier versions like 7.75.0

Sentry.init({
        dsn: mydsn,
        envionrment: "production",
        replaysSessionSampleRate: 0.1,
        replaysOnErrorSampleRate: 1.0,
        integrations: [
            new Sentry.Integrations.Breadcrumbs({
                console: false
            }),
            new Sentry.Replay({
                 blockAllMedia: false,
                 maskAllText: false
            })
        ],
    });

2. Make a build

npx vite build

3. Preview the view

npx vite preview

4. Open the launcher and look at the error in the console

Expected Result

My website should render as always.
In the self hosted sentry I should get replays after usage of the website

Actual Result

My website crashes when loading with the following error in the console:
Uncaught ReferenceError: Cannot access 'L' before initialization

where L is GLOBAL_OBJ in http://localhost:4173/node_modules/@sentry-internal/tracing/esm/browser/types.js (from the Sources tab of the browser)

import { GLOBAL_OBJ } from '@sentry/utils';

const WINDOW = GLOBAL_OBJ ;

export { WINDOW };
//# sourceMappingURL=types.js.map

When using @sentry/react@7.74.1 or lower, my app doesn't crash and replays appear as they should in my self hosted Sentry.

[lforst]

Hi, can you please upgrade all of your Sentry dependencies to the latest versions (if you have any) and report back whether the issue persists? If it's still happening please provide a small reproduction repository so that we can effectively debug this. Thank you!

[gerardparareda]

Sorry, what do you mean upgrading all the Sentry dependencies? I deleted the node_modules folder and the package-lock.json, and after setting "@sentry/react": "^7.107.0" and "@sentry/vite-plugin": "^2.16.0" (for the SourceMaps) and installing everything again, I still get the same error.

I will try to create a reproduction repository.