getsentry / sentry-javascript

Official Sentry SDKs for JavaScript
https://sentry.io
MIT License
7.92k stars 1.56k forks source link

Strange sourcemaps names in upload + no traces on client side #13947

Open ReDev1L opened 3 days ago

ReDev1L commented 3 days ago

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.33.1

Framework Version

Next.js 15.0.0-canary.179

Link to Sentry event

https://sentry.io/issues/5906193606/?project=4507742455398400

Reproduction Example/SDK Setup

build.log

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({
  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,

  dsn: "",
  enabled: process.env.NODE_ENV === "production",
  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
  integrations: [
    Sentry.replayIntegration({
      blockAllMedia: true,
      // Additional Replay configuration goes in here, for example:
      maskAllText: true,
    }),
    Sentry.browserTracingIntegration(),
    Sentry.browserProfilingIntegration(),
    Sentry.httpClientIntegration(),
  ],
  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,

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 0.25,
})

Steps to Reproduce

Ran the npx @sentry/wizard@latest -i nextjs with the recommended configuration for each step next.config.mjs

import withBundleAnalyzer from "@next/bundle-analyzer"
import {withSentryConfig} from "@sentry/nextjs"
import createJiti from "jiti"
import {fileURLToPath} from "node:url"

const jiti = createJiti(fileURLToPath(import.meta.url))
const withVercelToolbar = (
  await import("@vercel/toolbar/plugins/next")
).default()
jiti("./lib/env")

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    ppr: "incremental",
    // reactCompiler: true,
    staleTimes: {
      dynamic: 30,
    },
    serverActions: {
      bodySizeLimit: "512mb",
    },
  },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  skipTrailingSlashRedirect: true,

}

const bundleAnalyzerConfig = {
  enabled: process.env.ANALYZE === "true",
}

const sentryConfig = {
  automaticVercelMonitors: true,
  disableLogger: true,
  hideSourceMaps: true,
  org: "",
  project: "",
  reactComponentAnnotation: {
    enabled: true,
  },
  silent: !process.env.CI,
  tunnelRoute: "/monitoring",
  widenClientFileUpload: true,
}

const headers = async () => [
  {
    headers: [
      {
        key: "Document-Policy",
        value: "js-profiling",
      },
    ],
    source: "/:path*",
  },
]

const composedConfig = withBundleAnalyzer(bundleAnalyzerConfig)(
  withSentryConfig(withVercelToolbar(nextConfig), {
    ...sentryConfig,
    telemetry: false,
    headers,
  }),
)
export default composedConfig

Expected Result

traces plz!

Actual Result

no traces! Image

Lms24 commented 2 days ago

Hi @ReDev1L thanks for writing in! I tried reproducing this with a new NextJS canary app on the same version, following your code snippets. The only difference is that I couldn't get jiti to work (neither do I know why it's needed). Unfortunately, I can't reproduce the issue and I'm a bit confused by the issue description.

For us to debug this further, please: