thirdPartyErrorFilterIntegration not working with webpack

[jankalfus]

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/react

SDK Version

8.15.0

Framework Version

18.3.1

Link to Sentry event

No response

SDK Setup/Reproduction Example

Sentry.init({
  debug: true,
  dsn: 'our-dsn',
  environment: process.env.NODE_ENV,
  integrations: [
    browserTracingIntegration(),
    replayIntegration(),
    feedbackIntegration,
    thirdPartyErrorFilterIntegration({
      filterKeys: ['our-app'],
      behaviour: 'drop-error-if-contains-third-party-frames',
    }),
  ],
})

Steps to Reproduce

1. install @sentry/react 8.15.0, @sentry/webpack-plugin 2.20.1
2. Set up thirdPartyErrorFilterIntegration according to the docs: https://docs.sentry.io/platforms/javascript/configuration/filtering/#using-thirdpartyerrorfilterintegration, so:

Sentry.init({
  debug: true,
  dsn: 'our-dsn',
  environment: process.env.NODE_ENV,
  integrations: [
    browserTracingIntegration(),
    replayIntegration(),
    feedbackIntegration,
    thirdPartyErrorFilterIntegration({
      filterKeys: ['our-app'],
      behaviour: 'drop-error-if-contains-third-party-frames',
    }),
  ],
})

and in webpack.config.js:

module.exports = {
  //...
  plugins: [
    //...
    sentryWebpackPlugin({
      applicationKey: 'our-app',
    }),
  ]
}

3. run webpack dev server (cross-env NODE_ENV=development node ./node_modules/webpack/bin/webpack.js serve)
4. Throw an error from the application upon clicking a button (simple throw Error("my test") in the button’s onClick event handler)

Expected Result

Since the error originates in the application code, it should get logged to Sentry.

Actual Result

The error doesn’t get logged to Sentry.

I can see the following logs in the browser console:

logger.js:83 Sentry Logger [log]: Event processor "ThirdPartyErrorsFilter" dropped event
logger.js:83 Sentry Logger [log]: Adding outcome: "event_processor:error"
logger.js:83 Sentry Logger [log]: An event processor returned `null`, will not send event.

When browsing webpack’s memory bundle, I can see the following at the top of the bundled files, so I guess the "our-app" tag seems to get added there, however Sentry still thinks the error originates from 3rd party code for some reason?

;!function() {
    try {
        var e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {}
          , n = (new Error).stack;
        n && (e._sentryDebugIds = e._sentryDebugIds || {},
        e._sentryDebugIds[n] = "13ccde7e-de46-4869-8226-5fcff381b6d8",
        e._sentryDebugIdIdentifier = "sentry-dbid-13ccde7e-de46-4869-8226-5fcff381b6d8")
    } catch (e) {}
}();
{
    var _sentryModuleMetadataGlobal = typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};

    _sentryModuleMetadataGlobal._sentryModuleMetadata = _sentryModuleMetadataGlobal._sentryModuleMetadata || {};

    _sentryModuleMetadataGlobal._sentryModuleMetadata[new Error().stack] = Object.assign({}, _sentryModuleMetadataGlobal._sentryModuleMetadata[new Error().stack], {
        "_sentryBundlerPluginAppKey:our-app": true
    });
}

var _global = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

_global.SENTRY_RELEASE = {
    id: "c3b47313407c1a6fc02ab0547364ecf384c5dfe4"
};
// other code continues

Note: I haven’t tried whether this works with the production bundle, only with the dev server.

[lforst]

Hi, thanks for writing in! Nice that you are using this feature. From what I can see you're using it absolutely correctly. There is a chance that we have a bug.

Right now it is hard to understand what might be going on. Would you mind doing the following so we can better understand the issue?

• Share a website where you have everything set up
• Flipping the behaviour to 'apply-tag-if-contains-third-party-frames' and share an event where the third_party_error tag is True?
• Share the contents of window._sentryModuleMetadata on your website
• Share the stack trace of an error that is dropped

Thanks!

[jankalfus]

Hi, thanks for looking into this :)

• Here’s a temporary environment where it’s set up: https://04343-draft.devkontentmasters.com/ The behaviour is set to 'apply-tag-if-contains-third-party-frames' there. You’ll need to create an account to use the app. You can then trigger an error by clicking the CREATE NEW button in the top right corner on the Home/Your content screen.
  
  Also, source maps are available there, should you need them.
• Here’s a link to an event with behaviour set to 'apply-tag-if-contains-third-party-frames' + third_party_code tag is True: https://kontent-ai.sentry.io/issues/5587611002/?environment=development&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=14d&stream_index=0
• I’m attaching a log from the browser console: temp.log You can see the contents of window._sentryModuleMetadata at the very end of the log. There’s also a stack trace of an error triggered by a click of a button, starting from line 493. If you need an unminified stack trace, then you can find one here at line 749 (where I triggered the error locally) localhost-1720528459825.log

Hope this helps!

[lforst]

@jankalfus Looking at the event you linked, and looking at the bundles that appear in the stack trace, it looks like you defined an applicationKey of kontent-ai in this bundle: https://04343-draft.devkontentmasters.com/build/vendors_f46dc3dc_f4e41629c9143c55c44e.js, while you have an applicationKey of our-app in this bundle: https://04343-draft.devkontentmasters.com/build/client_729a3cf3e1e3e6c03cd0.js.

You would need to configure the thirdPartyErrorFilterIntegration as follows to keep the error:

thirdPartyErrorFilterIntegration({
  filterKeys: ['our-app', 'kontent-ai'],
  behaviour: 'drop-error-if-contains-third-party-frames',
}),

Does this make sense?

[jankalfus]

@lforst Oh, that’s weird 🤔 I had the 'kontent-ai' key there before and changed it to 'our-app' later, so I’m thinking that there’s some caching issue causing the discrepancy you’re seeing, sorry. Anyway, I’ve changed the filterKeys the way you suggested, triggered a new error, and the result is the same: https://kontent-ai.sentry.io/issues/5587611002/events/e7d25d4a83f945b7bb0dad93c1ecb7ff/