Expose `ignoreComponents` as an Option

[angel3cu]

@sentry/babel-plugin-component-annotate seems to have an undocumented option to ignore specific files and/or components. This is coming from the original plugin that is is based on. The option is called ignoreComponents and can be seen documented in the original FullStory plugin here.

In some cases, adding properties to a component at build time interacts with other libraries, causing them to fail. One such scenario is Mapbox, where Sentry adds data-sentry-component and data-sentry-source-file into the properties of the Source component. Mapbox validates all the properties of its React components; when it encounters the properties injected by Sentry, it fails. Even worse, since in most scenarios Sentry is only used in production, this failure won't be visible until it is too late.

The root cause of the failure here is the reactComponentAnnotation feature. It currently has a simple enabled option to turn it on and off. Given how useful the feature is for debugging issues, we would like to keep it on and only exclude the components that fail. If we could expose the underlying ignoreComponents in the Vite plugin, then that goal would be achieved.

e.g.

export default defineConfig({
  plugins: [
    ...
    sentryVitePlugin({
      ...,
      reactComponentAnnotation: {
        enabled: true,
        ignoreComponents: [
      },
    }),
  ],

[lforst]

@0Calories do we wanna expose this option? Can we find a simpler interface than type IgnoredComponent = [file: string, component: string, element: string]?

[angel3cu]

Hello Sentry team! I was wondering if you have any updates on this issue? Thank you in advance. 🙂

[chargome]

Hey @angel3cu, this feature is currently in our backlog – I'll bring it up again this week as I think this generally makes sense.

[angel3cu]

Hey @angel3cu, this feature is currently in our backlog – I'll bring it up again this week as I think this generally makes sense.

Thank you @chargome! I really appreciate this. 🙂