feat(react-component-annotate): Allow skipping annotations on specified components #617

0Calories · 2024-10-08T21:37:28Z

Note: The large number of deleted lines is due to a lot of old tests no longer being relevant since the component ignore config system is being overhauled

Some third party libraries involve components that have compatibility issues with the react-component-annotate plugin, and results in errors when the data-sentry properties are added as props. This PR introduces a bit of a bandaid fix by introducing an option to allow users to configure the names of components that should not have any annotations applied.

When using the standalone Babel plugin, you can configure this option like so:

// babel.config.js

{
  // ... other config above ...

  plugins: [
    // Put this plugin before any other plugins you have that transform JSX code
    // The options are set by providing an object as the second element in the array, but not required
    ['@sentry/babel-plugin-component-annotate', {ignoreComponents: ['Foo', 'Bar']}]
  ],
}

When using the Sentry bundler plugins, you can configure this option like so:

sentryVitePlugin({
    // ... other options
    reactComponentAnnotation: {enabled: true, ignoreComponents: ['Foo', 'Bar']},
}),

TODO in future: Allow providing a source file location, since it is possible for multiple components to have the same name, but you may not want to skip annotation on all of these.

…act annotation

…onents

lforst · 2024-12-19T08:51:27Z

@0Calories can we expedite this PR?

0Calories · 2024-12-19T19:23:42Z

@lforst I'll try to finish it on friday, I believe it just needs tests

Also:

allow providing a source file location, since it is possible for multiple components to have the same name, but you may not want to skip annotation on all of these.

This unfortunately will have to be done in a followup PR. For now, I want to at least expose the option to skip specific components by names as that will at least provide an option for users who are struggling with incompatible components

nathan-gage · 2024-12-20T21:37:11Z

will it be possible to resolve #611 with this PR -- i.e., not trying to name <React.Fragment/>s used in headless?

0Calories · 2025-01-06T19:50:24Z

Hi @nathan-gage, unfortunately I don't think this would be able to help with that Headless UI issue. It's possible that you could include React.Fragment as a component name to be skipped, but I can't confirm whether that would work or not

0Calories · 2025-01-07T01:32:16Z

@lforst This is good to go for a review now!

lforst

In lgtm, I think I would call it ignoredComponents though. Maybe a test or two would also be dope.

lforst · 2025-01-08T11:55:30Z

packages/bundler-plugin-core/src/types.ts

+    // TODO: Support this option in the future
+    /**
+     * A list of strings representing local paths to files to ignore. The plugin will not apply `data-sentry` annotations on components in these files
+     */
+    // ignoreFiles?: string[];


I would just remove this comment and create an issue instead.

lforst · 2025-01-08T11:55:47Z

packages/dev-utils/src/generate-documentation-table.ts

+      // TODO: Support this option in the future
+      // {
+      //   name: "ignoreFiles",
+      //   type: "string[]",
+      //   fullDescription:
+      //     "A list of strings representing local paths to files to ignore. The plugin will not perform any annotations on components in these files.",
+      //   supportedBundlers: ["webpack", "vite", "rollup"],
+      // },


Same as above

lforst · 2025-01-08T11:58:24Z

packages/babel-plugin-component-annotate/README.md

@@ -47,6 +47,14 @@ Using pnpm:
 pnpm add @sentry/babel-plugin-component-annotate --save-dev
 ```

+## Options
+
+### `ignoreComponents`


Super nit but I think my logic is sound: I think I would probably call it ignore*d*Components. ignoreComponents sounds like imperative and that it would accept a boolean rather than a list of components.

0Calories · 2025-01-08T16:08:59Z

Thanks for the review @lforst! Agreed on the naming of ignoredComponents. There's also a test I added but it's buried in the diffs because of all the obsolete tests I deleted

@conor-ob

| datasource | package | from | to | | ---------- | ------------------- | ------ | ------ | | npm | @sentry/vite-plugin | 2.22.7 | 2.23.0 | ## [v2.23.0](https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/HEAD/CHANGELOG.md#2230) - chore(deps): bump nanoid from 3.3.6 to 3.3.8 ([#641](getsentry/sentry-javascript-bundler-plugins#641)) - feat(core): Detect Railway release name ([#639](getsentry/sentry-javascript-bundler-plugins#639)) - feat(core): Write module injections to `globalThis` ([#636](getsentry/sentry-javascript-bundler-plugins#636)) - feat(react-component-annotate): Allow skipping annotations on specified components ([#617](getsentry/sentry-javascript-bundler-plugins#617)) - ref(core): Rename release management plugin name ([#647](getsentry/sentry-javascript-bundler-plugins#647)) Work in this release contributed by [@conor-ob](https://github.com/conor-ob). Thank you for your contribution!

@conor-ob

| datasource | package | from | to | | ---------- | ------------------- | ------ | ------ | | npm | @sentry/vite-plugin | 2.22.7 | 2.23.0 | ## [v2.23.0](https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/HEAD/CHANGELOG.md#2230) - chore(deps): bump nanoid from 3.3.6 to 3.3.8 ([#641](getsentry/sentry-javascript-bundler-plugins#641)) - feat(core): Detect Railway release name ([#639](getsentry/sentry-javascript-bundler-plugins#639)) - feat(core): Write module injections to `globalThis` ([#636](getsentry/sentry-javascript-bundler-plugins#636)) - feat(react-component-annotate): Allow skipping annotations on specified components ([#617](getsentry/sentry-javascript-bundler-plugins#617)) - ref(core): Rename release management plugin name ([#647](getsentry/sentry-javascript-bundler-plugins#647)) Work in this release contributed by [@conor-ob](https://github.com/conor-ob). Thank you for your contribution!

0Calories added 4 commits July 10, 2024 13:03

Create options for skipping annotations on components

06b41bd

skip annotation on files that are in ignoredFiles

911cd63

wire up options to allow bundler plugins to skip certain files for re…

213cb8c

…act annotation

remove support for ignoreFiles for now but add support for ignoreComp…

5374baa

…onents

0Calories self-assigned this Oct 8, 2024

update documentation

3a65227

0Calories mentioned this pull request Oct 8, 2024

reactComponentAnnotation creates Bad Requests (400) when fetching from external data source such as Algolia getsentry/sentry-javascript#12720

Open

3 tasks

0Calories mentioned this pull request Dec 11, 2024

Expose ignoreComponents as an Option #622

Closed

s1gr1d requested review from lforst and Lms24 December 19, 2024 08:38

0Calories added 6 commits January 6, 2025 14:51

fix a test and remove some unnecessary tests

90fbd8a

remove more redundant tests

8636c67

remove remaining redundant tests

0e8c329

resolve merge conflict

2ac8f9e

fix grammar in comments and docs

1859fb8

fix lint

8c5de5e

0Calories marked this pull request as ready for review January 7, 2025 01:31

lforst self-assigned this Jan 7, 2025

lforst approved these changes Jan 8, 2025

View reviewed changes

lforst removed their assignment Jan 8, 2025

0Calories added 2 commits January 8, 2025 11:11

renamed ignoreComponents to ignoredComponents

15444f5

remove todo comments

e9042a5

0Calories mentioned this pull request Jan 8, 2025

Allow ignoring entire files for component annotations #648

Open

0Calories merged commit e1975d4 into main Jan 8, 2025
18 checks passed

0Calories deleted the ash/feat/annotate-plugin-ignore-options branch January 8, 2025 16:22

Lms24 mentioned this pull request Jan 13, 2025

fix(webpack): Ensure process exits when done #653

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-component-annotate): Allow skipping annotations on specified components #617

feat(react-component-annotate): Allow skipping annotations on specified components #617

0Calories commented Oct 8, 2024 •

edited

Loading

lforst commented Dec 19, 2024

0Calories commented Dec 19, 2024

nathan-gage commented Dec 20, 2024 •

edited

Loading

0Calories commented Jan 6, 2025

0Calories commented Jan 7, 2025

lforst left a comment

lforst Jan 8, 2025

lforst Jan 8, 2025

lforst Jan 8, 2025

0Calories commented Jan 8, 2025

feat(react-component-annotate): Allow skipping annotations on specified components #617

feat(react-component-annotate): Allow skipping annotations on specified components #617

Conversation

0Calories commented Oct 8, 2024 • edited Loading

lforst commented Dec 19, 2024

0Calories commented Dec 19, 2024

nathan-gage commented Dec 20, 2024 • edited Loading

0Calories commented Jan 6, 2025

0Calories commented Jan 7, 2025

lforst left a comment

Choose a reason for hiding this comment

lforst Jan 8, 2025

Choose a reason for hiding this comment

lforst Jan 8, 2025

Choose a reason for hiding this comment

lforst Jan 8, 2025

Choose a reason for hiding this comment

0Calories commented Jan 8, 2025

0Calories commented Oct 8, 2024 •

edited

Loading

nathan-gage commented Dec 20, 2024 •

edited

Loading