feat(component-annotate): Introduce new plugin to annotate frontend components at build-time

.craft.yml

@@ -9,6 +9,7 @@ requireNames:
   - /^sentry-rollup-plugin-.*\.tgz$/
   - /^sentry-vite-plugin-.*\.tgz$/
   - /^sentry-webpack-plugin-.*\.tgz$/
+  - /^sentry-component-annotate-plugin-.*\.tgz$/
 targets:
   - name: github
     includeNames: /^sentry-.*.tgz$/

packages/component-annotate-plugin/.babelrc.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/typescript"]
+}

packages/component-annotate-plugin/.eslintrc.js

@@ -0,0 +1,20 @@
+const jestPackageJson = require("jest/package.json");
+
+/** @type {import('eslint').ESLint.Options} */
+module.exports = {
+  root: true,
+  extends: ["@sentry-internal/eslint-config/jest", "@sentry-internal/eslint-config/base"],
+  ignorePatterns: [".eslintrc.js", "dist", "jest.config.js", "rollup.config.js"],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./src/tsconfig.json", "./test/tsconfig.json"],
+  },
+  env: {
+    node: true,
+  },
+  settings: {
+    jest: {
+      version: jestPackageJson.version,
+    },
+  },
+};

packages/component-annotate-plugin/.gitignore

@@ -0,0 +1,3 @@
+dist
+README.md
+.DS_Store

packages/component-annotate-plugin/LICENSE

@@ -0,0 +1,29 @@
+# MIT License
+
+Copyright (c) 2024, Sentry
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+- Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+- Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+- Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/component-annotate-plugin/README_TEMPLATE.md

@@ -0,0 +1,82 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Component Annotate Plugin
+
+[![npm version](https://img.shields.io/npm/v/@sentry/component-annotate-plugin.svg)](https://www.npmjs.com/package/@sentry/component-annotate-plugin)
+[![npm dm](https://img.shields.io/npm/dm/@sentry/component-annotate-plugin.svg)](https://www.npmjs.com/package/@sentry/component-annotate-plugin)
+[![npm dt](https://img.shields.io/npm/dt/@sentry/component-annotate-plugin.svg)](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.
+Currently, this plugin only works with React, and will exclusively parse `.jsx` and `.tsx` files.
+
+### Note
+
+This plugin comes included in Sentry's bundler plugins, alongside many other features to improve your Sentry workflow.
+This plugin may be downloaded individually, but it is recommended that you install the bundler plugins for your respective bundler, and enable this feature through the config object.
+
+Check out the supported bundler plugin packages for installation instructions:
+
+- [Rollup](https://www.npmjs.com/package/@sentry/rollup-plugin)
+- [Vite](https://www.npmjs.com/package/@sentry/vite-plugin)
+- [Webpack](https://www.npmjs.com/package/@sentry/webpack-plugin)
+
+## Installation
+
+Using npm:
+
+```bash
+npm install @sentry/component-annotate-plugin --save-dev
+```
+
+Using yarn:
+
+```bash
+yarn add @sentry/component-annotate-plugin --dev
+```
+
+Using pnpm:
+
+```bash
+pnpm install @sentry/component-annotate-plugin --dev
+```
+
+## Example
+
+```js
+// babel.config.js
+
+{
+  // ... other config above ...
+
+  plugins: [
+    ['@sentry/component-annotate-plugin']
+  ],
+}
+```
+
+Or alternatively, configure the plugin by directly importing it:
+
+```js
+// babel.config.js
+
+import {componentNameAnnotatePlugin} from '@sentry/component-annotate-plugin';
+
+{
+  // ... other config above ...
+
+  plugins: [
+    [componentNameAnnotatePlugin]
+  ],
+}
+```
+
+## More information
+
+- [Sentry Documentation](https://docs.sentry.io/quickstart/)
+- [Sentry Discord](https://discord.gg/Ww9hbqr)
+- [Sentry Stackoverflow](http://stackoverflow.com/questions/tagged/sentry)

packages/component-annotate-plugin/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.(t|j)sx?$": ["@swc/jest"],
+  },
+};

packages/component-annotate-plugin/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@sentry/component-annotate-plugin",
+  "version": "1.0.0",
+  "description": "A Babel plugin that annotates frontend components with additional data to enrich the experience in Sentry",
+  "repository": "git://github.com/getsentry/sentry-javascript-bundler-plugins.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/component-annotate-plugin",
+  "author": "Sentry",
+  "license": "MIT",
+  "keywords": [
+    "Sentry",
+    "React",
+    "bundler",
+    "plugin",
+    "babel",
+    "component",
+    "annotate"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "rimraf ./out && run-p build:rollup build:types",
+    "build:watch": "run-p build:rollup:watch build:types:watch",
+    "build:rollup": "rollup --config rollup.config.js",
+    "build:rollup:watch": "rollup --config rollup.config.js --watch --no-watch.clearScreen",
+    "build:types": "tsc --project types.tsconfig.json",
+    "build:types:watch": "tsc --project types.tsconfig.json --watch --preserveWatchOutput",
+    "build:npm": "npm pack",
+    "check:types": "run-p check:types:src check:types:test",
+    "check:types:src": "tsc --project ./src/tsconfig.json --noEmit",
+    "check:types:test": "tsc --project ./test/tsconfig.json --noEmit",
+    "clean": "run-s clean:build",
+    "clean:all": "run-p clean clean:deps",
+    "clean:build": "rimraf ./dist *.tgz",
+    "clean:deps": "rimraf node_modules",
+    "test": "jest",
+    "lint": "eslint ./src ./test",
+    "prepack": "ts-node ./src/prepack.ts"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "7.18.5",
+    "@babel/preset-env": "7.18.2",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "7.17.12",
+    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "@sentry-internal/eslint-config": "2.10.3",
+    "@sentry-internal/sentry-bundler-plugin-tsconfig": "2.10.3",
+    "@swc/core": "^1.2.205",
+    "@swc/jest": "^0.2.21",
+    "@types/jest": "^28.1.3",
+    "@types/node": "^18.6.3",
+    "@types/uuid": "^9.0.1",
+    "eslint": "^8.18.0",
+    "jest": "^28.1.1",
+    "rimraf": "^3.0.2",
+    "rollup": "2.75.7",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "engines": {
+    "node": ">= 14"
+  }
+}

packages/component-annotate-plugin/rollup.config.js

@@ -0,0 +1,42 @@
+import resolve from "@rollup/plugin-node-resolve";
+import babel from "@rollup/plugin-babel";
+import packageJson from "./package.json";
+import modulePackage from "module";
+
+const input = ["src/index.ts"];
+
+const extensions = [".ts"];
+
+export default {
+  input,
+  external: [...Object.keys(packageJson.dependencies), ...modulePackage.builtinModules],
+  onwarn: (warning) => {
+    throw new Error(warning.message); // Warnings are usually high-consequence for us so let's throw to catch them
+  },
+  plugins: [
+    resolve({
+      extensions,
+      rootDir: "./src",
+      preferBuiltins: true,
+    }),
+    babel({
+      extensions,
+      babelHelpers: "bundled",
+      include: ["src/**/*"],
+    }),
+  ],
+  output: [
+    {
+      file: packageJson.module,
+      format: "esm",
+      exports: "named",
+      sourcemap: true,
+    },
+    {
+      file: packageJson.main,
+      format: "cjs",
+      exports: "named",
+      sourcemap: true,
+    },
+  ],
+};