Could not determine source map path in next.js and vercel #15320
Description
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.54.0
Framework Version
Next 15.1.6
Link to Sentry event
Reproduction Example/SDK Setup
//next.config.js
const path = require('path');
const withMDX = require('@next/mdx')();
const { withSentryConfig } = require('@sentry/nextjs');
/** @type {import('next').NextConfig} */
const nextConfig = {
// Configure `pageExtensions` to include MDX files
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
productionBrowserSourceMaps: true,
experimental: {
typedRoutes: true,
scrollRestoration: true,
staleTimes: {
dynamic: 20 * 60,
static: 60 * 60,
},
},
reactStrictMode: false,
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
prependData: "@use 'src/styles' as *;",
},
webpack: (config) => {
//SVGR config
config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
icon: true,
},
},
],
});
return config;
},
// environment variables specified in this way will always be included in the JavaScript bundle.
env: {
NEXT_PUBLIC_WEBSITE_URL:
process.env.NEXT_PUBLIC_WEBSITE_URL ||
'https://' + process.env.NEXT_PUBLIC_VERCEL_URL,
},
};
module.exports = withSentryConfig(withMDX(nextConfig), {
// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// Upload a larger set of source maps for prettier stack traces (increases build time)
widenClientFileUpload: true,
// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
// This can increase your server load as well as your hosting bill.
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
// side errors will fail.
// tunnelRoute: "/monitoring",
// Automatically tree-shake Sentry logger statements to reduce bundle size
disableLogger: true,
sourcemaps: {
deleteSourcemapsAfterUpload: true,
},
// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
// See the following for more information:
// https://docs.sentry.io/product/crons/
// https://vercel.com/docs/cron-jobs
automaticVercelMonitors: true,
debug: true,
});
//sentry.client.config.ts
// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from '@sentry/nextjs';
Sentry.init({
ignoreErrors: [
'DataCloneError', // Ignore DataCloneError for broadcast plugin on Safari
'ResizeObserver loop limit exceeded', // Ignore ResizeObserver loop limit exceeded for virtualization
],
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false,
replaysOnErrorSampleRate: 1.0,
// This sets the sample rate to be 10%. You may want this to be 100% while
// in development and sample at a lower rate in production
replaysSessionSampleRate: 0.1,
maxValueLength: 10000,
// You can remove this option if you're not planning to use the Sentry Session Replay feature:
integrations: [
Sentry.replayIntegration({
// Additional Replay configuration goes in here, for example:
maskAllText: true,
blockAllMedia: true,
}),
],
});
//sentry.edge.config.ts
// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from '@sentry/nextjs';
Sentry.init({
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false,
});
//sentry.server.config.ts
// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from '@sentry/nextjs';
Sentry.init({
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false,
// Uncomment the line below to enable Spotlight (https://spotlightjs.com)
// spotlight: process.env.NODE_ENV === 'development',
});Steps to Reproduce
We are using Next.js and deploying on Vercel. Sentry is integrated using the official plugin on Vercel. During the build phase, source map detection works well for [@sentry/nextjs - Node.js] and [@sentry/nextjs - Edge], but it throws this error for [@sentry/nextjs - Client]:
[@sentry/nextjs - Client] Debug: Could not determine source map path for bundle: /vercel/path0/webapp/.next/static/chunks/app/(sidebarLayout)/xoul/[slug]/edit/layout-221ceca740c8b3e2.js - Did you turn on source map generation in your bundler?
I also explicitly enabled productionBrowserSourceMaps in next.config.js, but it seems Sentry still can't detect the source maps. Additionally, I checked the .next folder in the local build, and Next.js generates source maps for all files. I'm not sure why Sentry can't detect them.
Also I get this error for all (node.js/edge/client) source maps:
[@sentry/nextjs - Node.js] Debug: Could not determine debug ID from bundle. This can happen if you did not clean your output folder before installing the Sentry plugin. File will not be source mapped: /vercel/path0/webapp/.next/server/server-reference-manifest.js
Expected Result
All source maps should be detected correctly.
Actual Result
Source maps don't work as expected, and we always get an incomplete error trace in Sentry reports.
