sentry-javascript icon indicating copy to clipboard operation
sentry-javascript copied to clipboard

NextJS generateBuildId option not applied when Sentry is added to project

Open rodolfoBee opened this issue 1 year ago • 1 comments

Is there an existing issue for this?

  • [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
  • [x] I have reviewed the documentation https://docs.sentry.io/
  • [x] 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.33.0

Framework Version

Next.js: ^14.0.4

Link to Sentry event

No response

Reproduction Example/SDK Setup

Next.config.js example:

/** @type {import('next').NextConfig} */
const nextConfig = {
  env,
  assetPrefix: isDev ? undefined : localEnv.PUBLIC_URL + baseUrl,
  generateBuildId: async () => {
     return process.env.CI_COMMIT_SHORT_SHA ?? null
  },
  crossOrigin: "anonymous",
  rewrites: async () => {
    return [
      // for k8s readiness probe
      {
      source: "/hello",
      destination: "/api/hello",
      },
      // for Prometheus Logging
      {
      source: "/metrics",
      destination: "/api/metrics",
      },
      {
      source: "/api/v1/:path*",
      destination: "http://...", // Masked for security reasons
      },
    ]
  },
  redirects: async () => {
  // for old browser fallback redirect
    return [
      {
      source: "/:path((?!old-browser-fallback.html).*)",
      permanent: false,
      has: [
      {
      type: "header",
      key: "User-Agent",
      value: "(.*Trident.*)",
      },
      ],
      destination: "/old-browser-fallback.html",
      },
    ]
  },
  output: "standalone",
  distDir: "build",
  i18n: {
  locales: ["default", "ko", "en", "ja", "jp"],
  defaultLocale: "default",
  localeDetection: false,
  },
  trailingSlash: true,
  compiler: {
     emotion: true,
  },
  images: {
    remotePatterns: [
      {
      protocol: "https",
      hostname: "...", // Masked for security reasons
      pathname: "/images/**",
      },
    ],
  },
 webpack: (config) => {
  const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"))
  
  config.module.rules.push(
  // Reapply the existing rule, but only for svg imports ending in ?url
  {
  ...fileLoaderRule,
  test: /\.svg$/i,
  resourceQuery: /url/, // *.svg?url
  },
  // Convert all other *.svg imports to React components
  {
  test: /\.svg$/i,
  issuer: fileLoaderRule.issuer,
  resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
  use: ["@svgr/webpack"],
  }
  )
  
  // Modify the file loader rule to ignore *.svg, since we have it handled now.
  fileLoaderRule.exclude = /\.svg$/i
  
  return config
  },
}

module.exports = withSentryConfig(withBundleAnalyzer(nextConfig), {
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options
  
  org: process.env.NEXT_PUBLIC_SENTRY_ORG,
  project: process.env.NEXT_PUBLIC_SENTRY_PROJECT,
  
  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,
  
  // 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,
  
  // Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
  enabled: true,
  },
  
  // 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",
  
  // Hides source maps from generated client bundles
  hideSourceMaps: true,
  
  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,
  
  authToken: process.env.SENTRY_AUTH_TOKEN,
  release: {
    create: true,
    finalize: true,
    name: process.env.RELEASE_VERSION,
    setCommits: {
    ignoreMissing: true,
    auto: true,
  },
  },
})

Steps to Reproduce

When building the application for different platforms without the withSentryConfig, the resulting files' hash reflects the generateBuildID set in the next config options.

However, when adding Sentry and withSentryConfig, the hashes are no longer the same on different builds.

Expected Result

Different builds to have the same hash determined by the generateBuildID option:

- amd64 output logs
+ First Load JS shared by all 407 kB
├ chunks/framework-e7594c6edddb13df.js 45.2 kB
├ chunks/main-51034d304a9d5d27.js 43.7 kB
├ chunks/pages/_app-451abad8de42175b.js 315 kB
├ chunks/webpack-7bc12fe684855cd9.js 1.95 kB
└ css/232f3b92a2886585.css 1.49 kB
arm64 output logs
+ First Load JS shared by all 407 kB
├ chunks/framework-e7594c6edddb13df.js 45.2 kB
├ chunks/main-51034d304a9d5d27.js 43.7 kB
├ chunks/pages/_app-451abad8de42175b.js 315 kB
├ chunks/webpack-7bc12fe684855cd9.js 1.95 kB
└ css/232f3b92a2886585.css 1.49 kB

Actual Result

Different hashes:

amd64 output logs
+ First Load JS shared by all 484 kB
├ chunks/framework-22843801eeddc8d4.js 45.3 kB
├ chunks/main-2934badaedd887d6.js 43.8 kB
├ chunks/pages/_app-c2aabc539f7291b6.js 391 kB <--
├ chunks/webpack-dd7495768c40548a.js 2.08 kB <--
└ css/356b0903ab48b078.css 1.49 kB
arm64 output logs
+ First Load JS shared by all 484 kB
├ chunks/framework-22843801eeddc8d4.js 45.3 kB
├ chunks/main-2934badaedd887d6.js 43.8 kB
├ chunks/pages/_app-0b06c2663882bc14.js 391 kB <--
├ chunks/webpack-b77ae631eb868914.js 2.08 kB <--
└ css/356b0903ab48b078.css 1.49 kB

rodolfoBee avatar Oct 14 '24 12:10 rodolfoBee

Thanks for reporting. It would be interesting to see in what way the files' contents are different. Generally, the hashes are content-addressable so there must be something different. We need to figure out what exactly is different so that we can make that part of the output deterministic.

lforst avatar Oct 14 '24 12:10 lforst

I can also reproduce this. I'm seeing different _sentryDebugIds and _sentryDebugIdIdentifier. This could be related to why I'm seeing this issue. Not seeing this in all chunks like OP, but only in some.

Image

kevva avatar Nov 20 '24 23:11 kevva

As preparation for turbopack we are no longer picking up the Next.js build ID for releases. Please upgrade to v9 to see this change in action.

@kevva are there other changes besides this snippet? This snippet should change based on the file hashes so it should be deterministic.

Closing because the original issue should implicitly be resolved.

lforst avatar Mar 03 '25 15:03 lforst