Next.js部署Vercel后出现Sentry is not defined客户端崩溃问题求助

问题详情 #

跟着JSMastery教程用Next.js搭建作品集网站，配置Sentry用于用户端Bug上报。本地运行正常，部署到Vercel也成功，但打开线上URL时应用直接崩溃，抛出sentry is not defined错误。

页面提示：

Application error: a client-side exception has occurred (see the browser console for more information)

控制台报错信息：

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)

解决方法 #

• 检查Vercel环境变量：登录Vercel控制台，进入项目的「Settings」→「Environment Variables」，确认NEXT_PUBLIC_SENTRY_DSN等Sentry相关变量已添加，且勾选了Production环境。本地环境变量不会自动同步到Vercel，必须手动配置。
• 验证Sentry初始化逻辑：确保Sentry.init()在_app.js/_app.tsx或layout.js/layout.tsx中正确执行，客户端组件能正常加载Sentry模块。避免在客户端组件中未初始化就直接调用Sentry方法。
• 核对依赖版本兼容性：检查package.json中@sentry/nextjs和next的版本，确保两者兼容。必要时更新依赖后重新部署。
• 清理缓存重新部署：在Vercel的「Deployments」页面，找到最新部署记录，点击「Redeploy」并勾选「Clear build cache」，避免旧缓存代码导致的异常。

内容的提问来源于stack exchange，提问作者Syed Anas Ahmed