All Errors Being Marked as Third Party in NextJS with thirdPartyErrorFilteringIntegration enabled

[kerenkhatiwada]

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

Framework Version

No response

Link to Sentry event

No response

Reproduction Example/SDK Setup

No response

Steps to Reproduce

After configuring the thirdPartyErrorFilterIntegration to apply a tag to issues if they contain third-party stack frames, issues are incorrectly tagged as being from a third party.

1. Add applicationKey to next.config.js and add the thirdPartyErrorFilterIntegration to Sentry.init() next.config.js

export default withSentryConfig(nextConfig, {
 
  applicationKey: "SentryKeyWithoutThirdParty",

});

Sentry.client.config.js

Sentry.init({
 
  integrations: [

    Sentry.thirdPartyErrorFilterIntegration({
      filterKeys: ["SentryKeyWithoutThirdParty"],
      behaviour: "apply-tag-if-contains-third-party-frames",

    }),
  ],

});

2. build and run the Next.js app
3. observe issues, always have the third_party_code tag set as true

https://org2-w7.sentry.io/issues/5615320176/events/33b552bfbbd8422db76734d93203f883/ https://org2-w7.sentry.io/settings/projects/nextjs14/source-maps/artifact-bundles/ff407422-2b74-5662-84b7-a70ebdde9fd3/?query=306f2601-113c-4fb2-9666-d8fe6b89d8e3 same result with behaviour: "apply-tag-if-exclusively-contains-third-party-frames"

Additional info: window._sentryModuleMetadata is undefined:

When behaviour is set to behaviour: "drop-error-if-contains-third-party-frames" events are dropped:

Expected Result

third_party_code tag is set to False or not at all for errors occurring in my app

Actual Result

third_party_code tag is set as True for errors occurring in my app

[lforst]

Hi, withSentryConfig doesn't have a applicationKey option yet. You need to set it as follows: https://github.com/getsentry/sentry-docs/blob/20f3e453407d74335b90bfdccd7a845ef8c69a4f/apps/changelog/next.config.mjs#L53-L56 (this is how we do it in our own changelog)

export default withSentryConfig(nextConfig, {
  unstable_sentryWebpackPluginOptions: {
    applicationKey: 'sentry-changelog',
  },
});

[Jac0xb]

Please add this

[lforst]

@Jac0xb PRs are welcome.

[GrizliK1988]

Hi!

This feature looks interesting and I'd like to use it for a NextJS app at work (browser extensions noise can be really bad some times).

Do you have any suggestions how to make unstable_sentryWebpackPluginOptions kinda stable? Can it be moved to SentryBuildOptions?

[s1gr1d]

Hello, this is prefixed with unstable_ as the @sentry/nextjs package is using @sentry/webpack-plugin under the hood and the options that are passed in unstable_sentryWebpackPluginOptions are 1:1 passed to the Sentry webpack plugin. You can see all available options here: https://www.npmjs.com/package/@sentry/webpack-plugin

However (as already mentioned), this could be moved into the SentryBuildOptions. You would have to pass the option here:

https://github.com/getsentry/sentry-javascript/blob/13c6462a71542ead05d30f8558868f8d71bacef1/packages/nextjs/src/config/webpack.ts#L373-L375

[lforst]

My 2 cents: You can assume the option is stable. We will likely not change it anytime soon. And if we change it, a) your typescript will likely complain if you have a next.config.ts b) nothing will break.

I don't like promoting it yet to stable because the whole integration is still a bit weird and could be improved.

[s1gr1d]

Will close the issue as it's already possible to pass the application key.

This just seems to be a documentation problem, so this snippet is added to the docs for all Meta-Framework SDKs which already include the bundler plugin: https://github.com/getsentry/sentry-docs/pull/12940

[Raphaww]

I am getting an error on build time:

./sentry.edge.config.ts
Attempted import error: 'thirdPartyErrorFilterIntegration' is not exported from '@sentry/nextjs' (imported as 'Sentry').

This is my sentry.edge.config file:

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

Sentry.init({
   integrations: [
      Sentry.thirdPartyErrorFilterIntegration({
         filterKeys: ["sentry-revenatium"],
         behaviour: "drop-error-if-contains-third-party-frames",
      }),
   ],
});

Does that mean that I should import thirdPartyErrorFilterIntegration from @sentry/browser?

By the way, the documentation says that those changes go to the sentry.client.config but the docs for manual setup does not say anything about that file being created

[lforst]

@Raphaww please open a new issue. The thing you're facing is unrelated to OP's.

Secondly, that integration should likely go into your client config and not edge config - it's a browser integration. I don't think the integration makes sense in the edge config as you most likely don't have extensions and similar in the edge runtime of nextjs.