Reputation: 19
i've created a porfolio website using nextjs by watching a tutorial of JSMastery. We've configured sentry in our app so users can report bugs. However, it works entirely fine on local and gets deployed on vercel as well. But as soon as I open the live url and the app starts to load suddenly an error appears and the app is crashed. The error says sentry is not defined.
Error that appears on the screen: Application error: a client-side exception has occurred (see the browser console for more information).
and here's what appears on the console:
137-b94d377c6996f85c.js:446 TypeError: Cannot read properties of undefined (reading 'sentry')
at 396-c590d500d7afd897.js:1:5927
at Array.reduce (<anonymous>)
at X (396-c590d500d7afd897.js:1:5912)
at n (396-c590d500d7afd897.js:1:15030)
at 396-c590d500d7afd897.js:1:151080
at oM (396-c590d500d7afd897.js:1:154196)
at oT (396-c590d500d7afd897.js:1:150126)
at 396-c590d500d7afd897.js:1:149932
at o_ (396-c590d500d7afd897.js:1:149940)
at og (396-c590d500d7afd897.js:1:146805)
at ov (396-c590d500d7afd897.js:1:145377)
at P (396-c590d500d7afd897.js:1:177411)
Upvotes: 0
Views: 228
Reputation: 1242
I had the same issue and fixed it by turning off react component annotations.
export default withSentryConfig(nextConfig, {
...
reactComponentAnnotation: {
enabled: false, // This is set to true by Sentry wizard
},
...
});
You can recreate the bug (and fix) locally by building locally (next build) and previewing the build (next start).
Upvotes: 1
Reputation: 62
Can you ensure that you've set up the NextJS SDK same as the Sentry docs? with client and server config files. Are you mapping the Sentry DSN to an env variable? if yes, in vercel you need to ensure to use NEXT_PUBLIC_SENTRY_DSN, with the correct prefix to allow the variable in the browser
Upvotes: 1