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

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

@@ -0,0 +1,3 @@
+{
+  "presets": ["@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/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,
+    },
+  ],
+};

packages/component-annotate-plugin/src/constants.ts

@@ -0,0 +1,121 @@
+export const KNOWN_INCOMPATIBLE_PLUGINS = [
+  // This module might be causing an issue preventing clicks. For safety, we won't run on this module.
+  "react-native-testfairy",
+  // This module checks for unexpected property keys and throws an exception.
+  "@react-navigation",
+];
+
+export const DEFAULT_IGNORED_ELEMENTS = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "keygen",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "menu",
+  "menuitem",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr",
+];