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

[valeryq]

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

[AbhiPrasad]

moreover debug_id is attached to events if something went wrong directly in render function (not in event handlers)

I wonder if the frames here matter 🤔 - any ideas @lforst?

[lforst]

This is very odd. @valeryq would you mind sharing a minimal reproduction example?

[valeryq]

@lforst Hi. Sorry for the delay. I've prepared a repro example for your guys. Also, I've found that the problem happening only in Route Groups (f.e. (general)). I tried to reflect different scenarios in a code, to show how events reflected in a Sentry.

Scenarios:

1. "debug_id" is present in the frame, error happened without Route Group in the event handler, and everything is ok. URL: https://sentry-debug-id-test.vercel.app Route: app/page.tsx Button : Click to throw an Error in app/page.tsx Sentry Event: https://bellum.sentry.io/issues/5427896180/events/d4a44c8ea90c468ca29382b5d7a06ca7/

2. "debug_id" is missing in the frame, an error happened in the Route Group in the event handler, and there is a problem. URL: https://sentry-debug-id-test.vercel.app/event-handler Route: app/(general)/event-handler/page.tsx Button : Click to throw an Error in app/(general)/event-handler/page.tsx Sentry Event: https://bellum.sentry.io/issues/5427897219/events/8eaf8c6502b14a92b567c213bfaf1971/

3. "debug_id" is present in the frame, an error happened in the Route Group in the event handler, and there is a problem. URL: https://sentry-debug-id-test.vercel.app/render Route: app/(general)/render/page.tsx Sentry Event 1: https://bellum.sentry.io/issues/5427897943/events/7fe1128aae8744bf955a0f57948adbc6/ Sentry Event 2: https://bellum.sentry.io/issues/5427898021/events/4e745e244c80408caad0428f9fb5593f/

Repository: https://github.com/valeryq/sentry_debug_id_test Reproduction example: https://sentry-debug-id-test.vercel.app

--

I would be really thankful for your help sooner than later, appreciate your help. Thank you!

[dohooo]

@lforst Hi. Sorry for the delay. I've prepared a repro example for your guys. Also, I've found that the problem happening only in Route Groups (f.e. (general)). I tried to reflect different scenarios in a code, to show how events reflected in a Sentry.

Scenarios:

1. "debug_id" is present in the frame, error happened without Route Group in the event handler, and everything is ok. URL: https://sentry-debug-id-test.vercel.app Route: app/page.tsx Button : Click to throw an Error in app/page.tsx Sentry Event: https://bellum.sentry.io/issues/5427896180/events/d4a44c8ea90c468ca29382b5d7a06ca7/
2. "debug_id" is missing in the frame, an error happened in the Route Group in the event handler, and there is a problem. URL: https://sentry-debug-id-test.vercel.app/event-handler Route: app/(general)/event-handler/page.tsx Button : Click to throw an Error in app/(general)/event-handler/page.tsx Sentry Event: https://bellum.sentry.io/issues/5427897219/events/8eaf8c6502b14a92b567c213bfaf1971/
3. "debug_id" is present in the frame, an error happened in the Route Group in the event handler, and there is a problem. URL: https://sentry-debug-id-test.vercel.app/render Route: app/(general)/render/page.tsx Sentry Event 1: https://bellum.sentry.io/issues/5427897943/events/7fe1128aae8744bf955a0f57948adbc6/ Sentry Event 2: https://bellum.sentry.io/issues/5427898021/events/4e745e244c80408caad0428f9fb5593f/

Repository: https://github.com/valeryq/sentry_debug_id_test Reproduction example: https://sentry-debug-id-test.vercel.app

--

I would be really thankful for your help sooner than later, appreciate your help. Thank you!

Cool! I have the same problem, and I found if the error is captured from the group route, it won't be source-mapped.

[lforst]

@valeryq Ahh this is a great catch. We probably have a bug in our stacktrace parsing logic. Thanks for raising! We'll fix it!

[dohooo]

@valeryq Ahh this is a great catch. We probably have a bug in our stacktrace parsing logic. Thanks for raising! We'll fix it!

Could you give me some guidance about this bug? Maybe I can try to contribute. Btw If this repo could integrate Dosu Bot, it would be really easy to guide the person who wants to contribute. Here are some example about this bot, it's really popular for now. Here are some examples in LangChain repo: https://github.com/langchain-ai/langchain/issues/19338 https://github.com/langchain-ai/langchain/issues/18893

[lforst]

@dohooo If you feel like contributing, we probably need to change one or all of the regexes here: https://github.com/getsentry/sentry-javascript/blob/48b0a3591dde8c68275cb8e27ebfcd019d80b4e9/packages/browser/src/stack-parsers.ts#L1

Note: They are ungodly 😂

The bot looks cool. We'll check it out!

[dohooo]

Note: They are ungodly 😂

@lforst Now I understand what that means... I think my PR could solve this problem. #12321

https://github.com/getsentry/sentry-javascript/assets/32405058/df73b404-0911-4f8b-bc5c-6bb2fff8e3d6

[valeryq]

I can confirm that everything works as expected after https://github.com/getsentry/sentry-javascript/pull/12373 fix. @lforst thank you a lot!

[lforst]

@valeryq thanks for helping us find this bug!