Missing debug_id for stacktrace frame happened in event handler (onClick)

[valeryq]

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.5.0

Framework Version

14.1.4

Link to Sentry event

https://bellum.sentry.io/issues/5418884569/events/8bf530e7974b4c3c8e501cf0e2577ba9/

SDK Setup

import * as Sentry from '@sentry/nextjs';

import Environments from '@/constants/environments';

Sentry.init({
  dsn: Environments.SENTRY.DSN,
  enabled: Environments.SENTRY.ENABLED,
  environment: Environments.ENV,
  release: Environments.VERSION,
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  tracesSampleRate: 1,
});

// Integrations lazy loading
(async () => {
  const { replayIntegration } = await import('@sentry/nextjs');

  Sentry.addIntegration(replayIntegration({
    blockAllMedia: true,
    maskAllText: false,
  }));
})();

Steps to Reproduce

Just have next component is enough:

const SentryClient = () => {
  const handleClick = () => {
    const t: Array<{ test: string }> = [];

    // t[2] elements doesn't exists, here will be error
    console.log('error here', t[2].test);
  };

  return (
      <button onClick={handleClick}>
        Throw an error
      </Button>
  );
};

Expected Result

debug_id is added to event handlers too to have correct unminified stacktrace

Actual Result

[AbhiPrasad]

@valeryq Are you using pages or app router? From looking at the frame it seems to be app router, but want to confirm. How is the SentryClient component being imported/used?

Could you try adding widenClientFileUpload to your sentry config and seeing if that improves this? https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#widen-the-upload-scope

export default withSentryConfig(nextConfig, {
  widenClientFileUpload: true,
});

[valeryq]

@AbhiPrasad thanks for the quick response. Yes, you are right, it is an app router.
Regarding how is SentryClient being imported and used, I have the next route structure: app/[locale]/(general)/sentry/client/page.tsx where is defined a client component I sent above.

I've already used widenClientFileUpload, unfortunately, it didn't help me.
Here is my Sentry configuration in next.config.mjs:

withSentryConfig(nextConfig, {
  authToken: process.env.SENTRY_AUTH_TOKEN,
  disableLogger: true,
  hideSourceMaps: true,
  org: '------', // I replaced this on purpose for comment (here is correct value in code)
  project: '------',  // I replaced this on purpose for comment (here is correct value in code)
  release: {
    name: process.env.IMAGE_TAG,
  },
  silent: !process.env.SENTRY_AUTH_TOKEN,
  sourcemaps: {
    disable: !process.env.SENTRY_AUTH_TOKEN,
  },
  telemetry: false,
  widenClientFileUpload: true,
});

[AbhiPrasad]

The linked event is local environment - are you uploading sourcemaps locally? Does this happen for production builds.

[valeryq]

@AbhiPrasad yes, everything is loaded. Artifact bundles are exist in Source Maps tab, moreover debug_id is attached to events if something went wrong directly in render function (not in event handlers). So, if I have the next code, I will receive the correct stacktrace frame with the correct debug_id.

const SentryClient = () => {
  const handleClick = () => {
    // nothing here
  };
  
  const t: Array<{ test: string }> = [];

    // t[2] elements doesn't exists, here will be error
    console.log('error here', t[2].test);

  return (
      <button onClick={handleClick}>
        Throw an error
      </Button>
  );
};

P.S. Everything I showed here is after next build command, so, I literally have a production build, then started it with next start.