feat(component-annotate): Introduce new plugin to annotate frontend components at build-time #468
Conversation
Arrange in calling order, for easier reading
- more explicit `ExcludedComponent` type - correct `JSXOpeningElement` node type - extract helper to fetch the component name - remove unnecessary checks
- remove redundant name finding logic - add explicit return type
- add types - add explicit type checking logic
- cleaner iteration pattern - remove unneeded `as`
…eact-annotate-component-names-plugin-typescript
- fix incorrect logic that was based on the path - add some clarifying comments
- more robust logic for checking for arrays - more robust null checks for missing child nodes - improve old-school iteration patterns
- use correctly type-incorrect property - add stricter types
Add more robust checking logic
Again, `Array.isArray` doesn't do the right thing here.
Nice try, but the null check needs to be lower
|
Still some tweaks I need to do on this PR, but I've opened it for review for the time being |
There was a problem hiding this comment.
Let's make this a README with some explanations about how it works?
There was a problem hiding this comment.
Yep, writing that right now!
| import { transform } from "@babel/core"; | ||
| import { componentNameAnnotatePlugin as plugin } from "../src/index"; | ||
|
|
||
| const BananasPizzaAppStandardInput = `import React, { Component } from 'react'; |
There was a problem hiding this comment.
can we make these separate JS files we import and assert on?
You should be able to use fs.readFileSync or similar.
There was a problem hiding this comment.
I'm going to put this in the backlog for now, eventually when we extend this plugin with more functionality, I want to overhaul the test suite. I'm not entirely satisfied with the vendored tests (coverage is good but tests could be cleaner), but I want to focus on shipping this first
| interface AnnotationOpts { | ||
| native?: boolean; | ||
| "annotate-fragments"?: boolean; | ||
| ignoreComponents?: IgnoredComponent[]; |
There was a problem hiding this comment.
Will we expose any of these to users?
If so we should add doc strings and rename annotate-fragments to annotateFragments
There was a problem hiding this comment.
Not exposing this for the time being
Co-authored-by: Abhijeet Prasad <aprasad@sentry.io>
| [](https://www.npmjs.com/package/@component-annotate-plugin) | ||
|
|
||
| A Babel plugin that automatically annotates your output DOM with their respective frontend component names. | ||
| This will unlock the capability to search for Replays in Sentry by component name, as well as see component names in breadcrumbs and performance monitoring. |
There was a problem hiding this comment.
Let's add minimum SDK version needed, and rename this file to be README.md
Also can we add a note that this is in a beta state? See https://github.com/getsentry/sentry-javascript/blob/develop/packages/bun/README.md for an example of a quick beta note.
| @@ -0,0 +1,81 @@ | |||
| { | |||
| "name": "@sentry/component-annotate-plugin", | |||
| "version": "1.0.0", | |||
There was a problem hiding this comment.
This needs to align with the other version of the other packages in this repo.
|
Addressed your comments @AbhiPrasad |
…#64439) Replaces the Fullstory Babel annotate plugin with our own version. See getsentry/sentry-javascript-bundler-plugins#468 for more details This plugin essentially does the same thing, but will annotate the DOM with `data-sentry-component` annotations instead, which is what our SDK looks for when sending component name data to Sentry. This will allow us to start dogfooding new features like span grouping by component names, breadcrumbs, and component names in Replays! Check out the [NPM Page](https://www.npmjs.com/package/@sentry/component-annotate-plugin) for more details on the plugin
Originally from this PR, splitting it into incremental smaller PRs and also making some adjustments RE: Abhi's suggestions:
#464
This PR in particular adds a new package to the bundler plugins; a Babel plugin that will annotate frontend components at build-time with additional data. A lot of the source code is vendored from FullStory's React annotate plugin, but has been modified and converted to TypeScript. For now, the plugin only works on React, but we can extend it to other frontend frameworks / libraries in the future.
Example of an automatically annotated component in Sentry's frontend:
This will allow the browser SDK to pick off component names and send them to Sentry, allowing for some very useful features: