From 6f24b60930e3dbcf7c00a77c74f647ad3be725a2 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Thu, 1 Feb 2024 19:07:23 -0500 Subject: [PATCH 01/10] feat(plugins): Add Sentry Babel plugin for react component annotation --- babel.config.ts | 5 +++-- package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/babel.config.ts b/babel.config.ts index 0266dfcf4131cc..9e6697bd7bc992 100644 --- a/babel.config.ts +++ b/babel.config.ts @@ -1,6 +1,7 @@ /* eslint-env node */ import type {TransformOptions} from '@babel/core'; +import {componentNameAnnotatePlugin} from '@sentry/component-annotate-plugin'; const config: TransformOptions = { presets: [ @@ -44,14 +45,14 @@ const config: TransformOptions = { }, ], ['babel-plugin-add-react-displayname'], - ['@fullstory/babel-plugin-annotate-react'], + componentNameAnnotatePlugin, ], }, development: { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-react-jsx-source', - ['@fullstory/babel-plugin-annotate-react'], + componentNameAnnotatePlugin, ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []), ], }, diff --git a/package.json b/package.json index 6fb37a406daa6a..df3423ddb786d6 100644 --- a/package.json +++ b/package.json @@ -180,6 +180,7 @@ "devDependencies": { "@biomejs/biome": "^1.5.3", "@pmmmwh/react-refresh-webpack-plugin": "0.5.10", + "@sentry/component-annotate-plugin": "^2.11.0", "@sentry/jest-environment": "^4.0.0", "@sentry/profiling-node": "^1.3.5", "@styled/typescript-styled-plugin": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index d0027ce8b5ef85..98509bb96a37cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2876,6 +2876,11 @@ "@sentry/types" "7.99.0" "@sentry/utils" "7.99.0" +"@sentry/component-annotate-plugin@^2.11.0": + version "2.11.0" + resolved "https://registry.yarnpkg.com/@sentry/component-annotate-plugin/-/component-annotate-plugin-2.11.0.tgz#2af074b21b93414a51c284951070380d3a06e405" + integrity sha512-2Nf9e05HcvGT9b/8OFaBC90I1d3P6hOu1265T6u3WASxJNvKf3kF44kpt0nZAEVNFcgbyPiPyJ/gmOR/ZIG91A== + "@sentry/core@7.99.0", "@sentry/core@^7.99.0": version "7.99.0" resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.99.0.tgz#6881aae5ac1436637b3d88e0b12df4ab56016c5f" From 96c2c9c0236fcb88ffaab567604721bd87d25f2a Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Thu, 1 Feb 2024 19:15:13 -0500 Subject: [PATCH 02/10] remove fullstory plugin --- package.json | 1 - yarn.lock | 5 ----- 2 files changed, 6 deletions(-) diff --git a/package.json b/package.json index df3423ddb786d6..ea6db948a8f812 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "@emotion/css": "^11.10.5", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", - "@fullstory/babel-plugin-annotate-react": "^2.3.0", "@monaco-editor/react": "^4.4.5", "@popperjs/core": "^2.11.5", "@react-aria/button": "^3.9.1", diff --git a/yarn.lock b/yarn.lock index 98509bb96a37cb..59ef1a572e7d5c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1643,11 +1643,6 @@ dependencies: tslib "^2.4.0" -"@fullstory/babel-plugin-annotate-react@^2.3.0": - version "2.3.0" - resolved "https://registry.yarnpkg.com/@fullstory/babel-plugin-annotate-react/-/babel-plugin-annotate-react-2.3.0.tgz#ab4df27dbecaa3771a1b353b898ccf887876e9fb" - integrity sha512-gYLUL6Tu0exbvTIhK9nSCaztmqBlQAm07Fvtl/nKTc+lxwFkcX9vR8RrdTbyjJZKbPaA5EMlExQ6GeLCXkfm5g== - "@humanwhocodes/config-array@^0.11.11": version "0.11.11" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844" From d4d76f7acf5db3c1126ad0f5dc91aa37dc5b0d2c Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Thu, 1 Feb 2024 19:18:54 -0500 Subject: [PATCH 03/10] oops wrap it in an array --- babel.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/babel.config.ts b/babel.config.ts index 9e6697bd7bc992..627e5760b4c3e3 100644 --- a/babel.config.ts +++ b/babel.config.ts @@ -45,14 +45,14 @@ const config: TransformOptions = { }, ], ['babel-plugin-add-react-displayname'], - componentNameAnnotatePlugin, + [componentNameAnnotatePlugin], ], }, development: { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-react-jsx-source', - componentNameAnnotatePlugin, + [componentNameAnnotatePlugin], ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []), ], }, From 21ae953179d20e0c658d0f7d1006235ab906ce08 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Thu, 1 Feb 2024 19:35:00 -0500 Subject: [PATCH 04/10] try using just the string identifier for the plugin --- babel.config.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/babel.config.ts b/babel.config.ts index 627e5760b4c3e3..9f61a2d107fee2 100644 --- a/babel.config.ts +++ b/babel.config.ts @@ -1,7 +1,6 @@ /* eslint-env node */ import type {TransformOptions} from '@babel/core'; -import {componentNameAnnotatePlugin} from '@sentry/component-annotate-plugin'; const config: TransformOptions = { presets: [ @@ -45,14 +44,14 @@ const config: TransformOptions = { }, ], ['babel-plugin-add-react-displayname'], - [componentNameAnnotatePlugin], + '@sentry/component-annotate-plugin', ], }, development: { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-react-jsx-source', - [componentNameAnnotatePlugin], + '@sentry/component-annotate-plugin', ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []), ], }, From 593f098809dae6354990a6a7de8fba7b4b26b119 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Fri, 2 Feb 2024 14:21:15 -0500 Subject: [PATCH 05/10] rename component dataset attribute to sentryComponent --- static/app/utils/performanceForSentry/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/static/app/utils/performanceForSentry/index.tsx b/static/app/utils/performanceForSentry/index.tsx index d66a0e794fc846..a4935334af9c86 100644 --- a/static/app/utils/performanceForSentry/index.tsx +++ b/static/app/utils/performanceForSentry/index.tsx @@ -604,7 +604,9 @@ function getNearestElementName(node: HTMLElement | undefined | null): string | u let current: HTMLElement | null = node; while (current && current !== document.body) { const elementName = - current.dataset?.testId ?? current.dataset?.component ?? current.dataset?.element; + current.dataset?.testId ?? + current.dataset?.sentryComponent ?? + current.dataset?.element; if (elementName) { return elementName; From 192a36bbcd6ca540b0971c456137050e1d98b6e8 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Mon, 5 Feb 2024 10:27:33 -0500 Subject: [PATCH 06/10] rename the plugin --- babel.config.ts | 7 ++++--- package.json | 2 +- yarn.lock | 10 +++++----- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/babel.config.ts b/babel.config.ts index 9f61a2d107fee2..042d664a6096da 100644 --- a/babel.config.ts +++ b/babel.config.ts @@ -1,6 +1,7 @@ /* eslint-env node */ import type {TransformOptions} from '@babel/core'; +import {componentNameAnnotatePlugin} from '@sentry/babel-plugin-component-annotate'; const config: TransformOptions = { presets: [ @@ -24,7 +25,7 @@ const config: TransformOptions = { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-runtime', - '@babel/plugin-transform-class-properties', + [componentNameAnnotatePlugin], ], env: { production: { @@ -44,14 +45,14 @@ const config: TransformOptions = { }, ], ['babel-plugin-add-react-displayname'], - '@sentry/component-annotate-plugin', + ['@sentry/babel-plugin-component-annotate'], ], }, development: { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-react-jsx-source', - '@sentry/component-annotate-plugin', + ['@sentry/babel-plugin-component-annotate'], ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []), ], }, diff --git a/package.json b/package.json index ea6db948a8f812..23e921681f68d5 100644 --- a/package.json +++ b/package.json @@ -179,7 +179,7 @@ "devDependencies": { "@biomejs/biome": "^1.5.3", "@pmmmwh/react-refresh-webpack-plugin": "0.5.10", - "@sentry/component-annotate-plugin": "^2.11.0", + "@sentry/babel-plugin-component-annotate": "^2.13.0", "@sentry/jest-environment": "^4.0.0", "@sentry/profiling-node": "^1.3.5", "@styled/typescript-styled-plugin": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index 59ef1a572e7d5c..347aa3d815f86d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2858,6 +2858,11 @@ "@sentry/types" "7.99.0" "@sentry/utils" "7.99.0" +"@sentry/babel-plugin-component-annotate@^2.13.0": + version "2.13.0" + resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.13.0.tgz#fd07852f8dbbade257e46c188685cdfd2d2c4769" + integrity sha512-NOKin57L0ZePOHsnbRJpaWxdDnPS+SQUBJDyBYfcIrS74EPXFoFhFADYwGGI5hEKYL7/L0H3a4sIB5iJci3+fQ== + "@sentry/browser@7.99.0": version "7.99.0" resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.99.0.tgz#3e78beb490d141c988038ea902689a1e9171c6cf" @@ -2871,11 +2876,6 @@ "@sentry/types" "7.99.0" "@sentry/utils" "7.99.0" -"@sentry/component-annotate-plugin@^2.11.0": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@sentry/component-annotate-plugin/-/component-annotate-plugin-2.11.0.tgz#2af074b21b93414a51c284951070380d3a06e405" - integrity sha512-2Nf9e05HcvGT9b/8OFaBC90I1d3P6hOu1265T6u3WASxJNvKf3kF44kpt0nZAEVNFcgbyPiPyJ/gmOR/ZIG91A== - "@sentry/core@7.99.0", "@sentry/core@^7.99.0": version "7.99.0" resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.99.0.tgz#6881aae5ac1436637b3d88e0b12df4ab56016c5f" From 7d2f768e3cc31e7c99884630e6b3f32358aa174c Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Mon, 5 Feb 2024 12:13:27 -0500 Subject: [PATCH 07/10] put plugin-transform-class-properties back in --- babel.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/babel.config.ts b/babel.config.ts index 042d664a6096da..9b83b982ac2c26 100644 --- a/babel.config.ts +++ b/babel.config.ts @@ -25,6 +25,7 @@ const config: TransformOptions = { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-runtime', + '@babel/plugin-transform-class-properties', [componentNameAnnotatePlugin], ], env: { From 1df9d546f2401a835050431cd48cf1d27a99761b Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Mon, 5 Feb 2024 12:39:07 -0500 Subject: [PATCH 08/10] make babel plugin a dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 23e921681f68d5..80c282f49ee33a 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@sentry-internal/rrweb": "2.9.0", "@sentry-internal/rrweb-player": "2.9.0", "@sentry-internal/rrweb-snapshot": "2.9.0", + "@sentry/babel-plugin-component-annotate": "^2.13.0", "@sentry/core": "^7.99.0", "@sentry/integrations": "^7.99.0", "@sentry/node": "^7.99.0", @@ -179,7 +180,6 @@ "devDependencies": { "@biomejs/biome": "^1.5.3", "@pmmmwh/react-refresh-webpack-plugin": "0.5.10", - "@sentry/babel-plugin-component-annotate": "^2.13.0", "@sentry/jest-environment": "^4.0.0", "@sentry/profiling-node": "^1.3.5", "@styled/typescript-styled-plugin": "^1.0.0", From b9ee47e2502dc70e7ac263559e8c206dd55597fa Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Mon, 5 Feb 2024 13:52:32 -0500 Subject: [PATCH 09/10] Upgrade plugin to latest version --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 80c282f49ee33a..f1a919a3b95837 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "@sentry-internal/rrweb": "2.9.0", "@sentry-internal/rrweb-player": "2.9.0", "@sentry-internal/rrweb-snapshot": "2.9.0", - "@sentry/babel-plugin-component-annotate": "^2.13.0", + "@sentry/babel-plugin-component-annotate": "^2.14.0", "@sentry/core": "^7.99.0", "@sentry/integrations": "^7.99.0", "@sentry/node": "^7.99.0", diff --git a/yarn.lock b/yarn.lock index 347aa3d815f86d..dde2e4c5d23d17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2858,10 +2858,10 @@ "@sentry/types" "7.99.0" "@sentry/utils" "7.99.0" -"@sentry/babel-plugin-component-annotate@^2.13.0": - version "2.13.0" - resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.13.0.tgz#fd07852f8dbbade257e46c188685cdfd2d2c4769" - integrity sha512-NOKin57L0ZePOHsnbRJpaWxdDnPS+SQUBJDyBYfcIrS74EPXFoFhFADYwGGI5hEKYL7/L0H3a4sIB5iJci3+fQ== +"@sentry/babel-plugin-component-annotate@^2.14.0": + version "2.14.0" + resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.14.0.tgz#e62f448dd3c922a6d32e9f1c0a5ae85fa6ec22c2" + integrity sha512-FWU4+Lx6fgxjAkwmc3S9j1Q/6pqKZyZzfi52B+8WMNw7a5QjGXgxc5ucBazZYgrcsJKCFBp4QG3PPxNAieFimQ== "@sentry/browser@7.99.0": version "7.99.0" From 3c6d5fc20a63df69b03ba43eb77d983860537d76 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Mon, 5 Feb 2024 14:01:38 -0500 Subject: [PATCH 10/10] fix config --- babel.config.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/babel.config.ts b/babel.config.ts index 9b83b982ac2c26..b7ba2975e6f28a 100644 --- a/babel.config.ts +++ b/babel.config.ts @@ -1,7 +1,6 @@ /* eslint-env node */ import type {TransformOptions} from '@babel/core'; -import {componentNameAnnotatePlugin} from '@sentry/babel-plugin-component-annotate'; const config: TransformOptions = { presets: [ @@ -26,7 +25,6 @@ const config: TransformOptions = { '@emotion/babel-plugin', '@babel/plugin-transform-runtime', '@babel/plugin-transform-class-properties', - [componentNameAnnotatePlugin], ], env: { production: { @@ -46,14 +44,14 @@ const config: TransformOptions = { }, ], ['babel-plugin-add-react-displayname'], - ['@sentry/babel-plugin-component-annotate'], + '@sentry/babel-plugin-component-annotate', ], }, development: { plugins: [ '@emotion/babel-plugin', '@babel/plugin-transform-react-jsx-source', - ['@sentry/babel-plugin-component-annotate'], + '@sentry/babel-plugin-component-annotate', ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []), ], },