feat: Add Sentry Babel Transformer #3916

krystofwoldrich · 2024-06-26T15:47:51Z

📢 Type of change

New feature

📜 Description

This PR adds @sentry/babel-plugin-component-annotate to @sentry/react-native/metro.

Similar to the rest of our JS Bundlers Plugins feat(core): Include component name annotation plugin with all bundler plugins except esbuild sentry-javascript-bundler-plugins#469

Example use RN 0.72 and newer:

// For Expo
const { getSentryExpoConfig } = require("@sentry/react-native/metro");
const config = getSentryExpoConfig(__dirname, { annotateReactComponents: true });

// For RN
const m = mergeConfig(getDefaultConfig(__dirname), config);

module.exports = withSentryConfig(m, {
  annotateReactComponents: true, // default false
});

For RN 0.65 to 0.71 (these version did not have default config in metro.config.js but applied it later, that changed in 0.72):

const config  = {
  transformer: {
	babelTransformerPath: require.resolve('metro-babel-transformer'),
	// this must be adjust to appropriate babel transformer for given RN version
  },
};

💡 Motivation and Context

closes: Automatically add @sentry/babel-plugin-component-annotate using withSentry #3913

💚 How did you test it?

sample apps, e2e tests, unit tests

📝 Checklist

I reviewed submitted code
I added tests to verify changes
No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
All tests passing
No breaking changes

🔮 Next steps

Add docs

github-actions · 2024-06-26T15:48:18Z

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Generated by 🚫 dangerJS against 6463a17

github-actions · 2024-06-26T16:20:51Z

iOS (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1215.96 ms	1219.10 ms	3.14 ms
Size	2.36 MiB	3.05 MiB	702.87 KiB

Baseline results on branch: feat/replay

Startup times

Revision	Plain	With Sentry	Diff
`063bfce`+dirty	1224.27 ms	1219.66 ms	-4.61 ms
`41db11d`+dirty	1207.36 ms	1210.32 ms	2.96 ms
`376301c`+dirty	1215.73 ms	1219.80 ms	4.06 ms

App size

Revision	Plain	With Sentry	Diff
`063bfce`+dirty	2.36 MiB	3.05 MiB	702.78 KiB
`41db11d`+dirty	2.36 MiB	3.04 MiB	698.69 KiB
`376301c`+dirty	2.36 MiB	3.05 MiB	702.83 KiB

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

Revision	Plain	With Sentry	Diff
`fd77856`+dirty	1230.60 ms	1222.46 ms	-8.15 ms
`3ae09f5`+dirty	1219.96 ms	1217.64 ms	-2.32 ms

App size

Revision	Plain	With Sentry	Diff
`fd77856`+dirty	2.36 MiB	3.05 MiB	702.80 KiB
`3ae09f5`+dirty	2.36 MiB	3.05 MiB	702.85 KiB

github-actions · 2024-06-26T16:23:18Z

iOS (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1241.69 ms	1245.53 ms	3.84 ms
Size	2.92 MiB	3.61 MiB	710.19 KiB

Baseline results on branch: feat/replay

Startup times

Revision	Plain	With Sentry	Diff
`063bfce`+dirty	1225.38 ms	1218.06 ms	-7.31 ms
`41db11d`+dirty	1208.60 ms	1210.47 ms	1.87 ms
`376301c`+dirty	1224.74 ms	1227.00 ms	2.26 ms

App size

Revision	Plain	With Sentry	Diff
`063bfce`+dirty	2.92 MiB	3.61 MiB	710.22 KiB
`41db11d`+dirty	2.92 MiB	3.61 MiB	705.84 KiB
`376301c`+dirty	2.92 MiB	3.61 MiB	709.95 KiB

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

Revision	Plain	With Sentry	Diff
`fd77856`+dirty	1245.06 ms	1254.37 ms	9.30 ms
`3ae09f5`+dirty	1228.45 ms	1236.63 ms	8.18 ms

App size

Revision	Plain	With Sentry	Diff
`fd77856`+dirty	2.92 MiB	3.61 MiB	710.01 KiB
`3ae09f5`+dirty	2.92 MiB	3.61 MiB	709.96 KiB

github-actions · 2024-06-27T16:44:40Z

Android (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	371.65 ms	408.49 ms	36.84 ms
Size	7.15 MiB	8.31 MiB	1.17 MiB

Baseline results on branch: feat/replay

Startup times

Revision	Plain	With Sentry	Diff
`41db11d`+dirty	374.57 ms	415.25 ms	40.68 ms
`376301c`+dirty	353.80 ms	388.54 ms	34.74 ms

App size

Revision	Plain	With Sentry	Diff
`41db11d`+dirty	7.15 MiB	8.31 MiB	1.16 MiB
`376301c`+dirty	7.15 MiB	8.31 MiB	1.17 MiB

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

Revision	Plain	With Sentry	Diff
`fd77856`+dirty	333.29 ms	360.62 ms	27.33 ms

App size

Revision	Plain	With Sentry	Diff
`fd77856`+dirty	7.15 MiB	8.31 MiB	1.17 MiB

github-actions · 2024-06-28T11:02:14Z

Android (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	417.02 ms	451.45 ms	34.43 ms
Size	17.73 MiB	20.04 MiB	2.30 MiB

Baseline results on branch: feat/replay

Startup times

Revision	Plain	With Sentry	Diff
`063bfce`	469.96 ms	516.38 ms	46.42 ms
`41db11d`	429.33 ms	451.24 ms	21.91 ms
`376301c`	445.52 ms	474.70 ms	29.18 ms

App size

Revision	Plain	With Sentry	Diff
`063bfce`	17.73 MiB	20.04 MiB	2.30 MiB
`41db11d`	17.73 MiB	20.04 MiB	2.30 MiB
`376301c`	17.73 MiB	20.04 MiB	2.30 MiB

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

Revision	Plain	With Sentry	Diff
`fd77856`	445.88 ms	456.24 ms	10.36 ms
`3ae09f5`	437.38 ms	465.81 ms	28.43 ms

App size

Revision	Plain	With Sentry	Diff
`fd77856`	17.73 MiB	20.04 MiB	2.30 MiB
`3ae09f5`	17.73 MiB	20.04 MiB	2.30 MiB

vaind

This goes well beyond my understanding of the ecosystem but the I approve of the idea, because it's exactly what I wanted to do at first, I just didn't know how.

CHANGELOG.md

lforst

Take with a grain of salt because I am no expert but nothing in this PR looks completely off to me.

src/js/tools/sentryBabelTransformer.ts

lforst · 2024-07-03T08:34:17Z

src/js/tools/metroconfig.ts

+ */
+export function withSentryBabelTransformer(config: MetroConfig): MetroConfig {
+  const defaultBabelTransformerPath = config.transformer && config.transformer.babelTransformerPath;
+  logger.debug('Default Babel transformer path from `config.transformer`:', defaultBabelTransformerPath);


The Sentry SDK logger is mostly intended to be used when the SDK is initialized. For build tooling we usually don't rely on it. I would do a good ol' console.log instead.

src/js/tools/metroconfig.ts

src/js/tools/sentryBabelTransformerUtils.ts

…babel-transaformer

lucas-zimerman

Looks good to me from my part, LGTM!

0Calories · 2024-07-09T19:31:01Z

Thanks for expanding support to react native! This looks great

* feat(replay): Add Mobile Replay Alpha (#3714) * feat(sample): add running indicator (animation overlay) (#3903) * feat(replay): Add breadcrumbs mapping from RN to RRWeb format (#3846) * feat(replay): Add network breadcrumbs (#3912) * fix(replay): Add tests for touch events (#3924) * feat(replay): Filter Sentry event breadcrumbs (#3925) * fix(changelog): Add latest native SDKs details * release: 5.25.0-alpha.2 * misc(samples): Add console anything examples for replay testing (#3928) * feat: Add Sentry Babel Transformer (#3916) * fix(replay): Add app lifecycle breadcrumbs conversion tests (#3932) * chore(deps): bump sentry-android to 7.12.0-alpha.3 * chore(deps): bump sentry-android to 7.12.0-alpha.4 * fix(replay): Mask SVGs from `react-native-svg` when `maskAllVectors=true` (#3930) * fix(replay): Add missing properties to android nav breadcrumbs (#3942) * release: 5.26.0-alpha.3 * misc(replay): Add Mobile Replay Public Beta changelog (#3943) --------- Co-authored-by: Ivan Dlugos <[email protected]> Co-authored-by: Ivan Dlugos <[email protected]> Co-authored-by: getsentry-bot <[email protected]> Co-authored-by: getsentry-bot <[email protected]> Co-authored-by: Roman Zavarnitsyn <[email protected]> Co-authored-by: Bruno Garcia <[email protected]>

krystofwoldrich changed the title ~~Kw/add-sentry-babel-transaformer~~ feat: Add Sentry Babel Transformer Jun 26, 2024

Base automatically changed from kw/add-replay-network-breadcrumb to feat/replay June 27, 2024 14:45

krystofwoldrich marked this pull request as ready for review June 28, 2024 19:04

krystofwoldrich requested a review from lucas-zimerman as a code owner June 28, 2024 19:05

krystofwoldrich requested a review from vaind June 28, 2024 19:05

krystofwoldrich closed this Jun 28, 2024

krystofwoldrich reopened this Jun 28, 2024

krystofwoldrich marked this pull request as draft June 28, 2024 19:10

krystofwoldrich marked this pull request as ready for review June 28, 2024 19:10

vaind reviewed Jun 28, 2024

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

CHANGELOG.md Show resolved Hide resolved

krystofwoldrich added 12 commits July 1, 2024 10:57

wip: Add Sentry Babel Transformer

3ac1315

add annotate react as opt in feature

d558312

fix lint

670bfc6

revert: touch events changes

ea413b7

Add expo support for react annotate

50005b3

remove babel config, add tests

b030816

add more tests

0a9d0e1

fix lint

4ac1605

add changelog

f5d0d6e

add react annotate to e2e tests

35a0038

add reason why annotate plugin can't be used in the warning

4174f98

update debug logs

d31895e

krystofwoldrich force-pushed the kw/add-sentry-babel-transaformer branch from 3c0b4ba to d31895e Compare July 1, 2024 08:58

krystofwoldrich requested review from 0Calories and lforst July 1, 2024 09:09

krystofwoldrich requested review from mydea and AbhiPrasad July 2, 2024 08:03

lforst approved these changes Jul 3, 2024

View reviewed changes

krystofwoldrich added 2 commits July 3, 2024 15:04

Merge remote-tracking branch 'origin/feat/replay' into kw/add-sentry-…

6a83025

…babel-transaformer

fix fs review comments

c0fbda2

lucas-zimerman approved these changes Jul 3, 2024

View reviewed changes

krystofwoldrich and others added 2 commits July 3, 2024 17:25

fix tests

49e403a

Merge branch 'feat/replay' into kw/add-sentry-babel-transaformer

6463a17

krystofwoldrich merged commit 6067ecc into feat/replay Jul 3, 2024
41 of 42 checks passed

krystofwoldrich deleted the kw/add-sentry-babel-transaformer branch July 3, 2024 15:49

This was referenced Jul 8, 2024

Add React Native Components Capturing guide getsentry/sentry-docs#10606

Merged

Update CHANGELOG.md #3935

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add Sentry Babel Transformer #3916

feat: Add Sentry Babel Transformer #3916

krystofwoldrich commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 26, 2024 •

edited

Loading

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

github-actions bot commented Jun 26, 2024 •

edited

Loading

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

github-actions bot commented Jun 27, 2024 •

edited

Loading

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

github-actions bot commented Jun 28, 2024 •

edited

Loading

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

vaind left a comment

lforst left a comment

lforst Jul 3, 2024

lucas-zimerman left a comment

0Calories commented Jul 9, 2024

feat: Add Sentry Babel Transformer #3916

feat: Add Sentry Babel Transformer #3916

Conversation

krystofwoldrich commented Jun 26, 2024 • edited Loading

📢 Type of change

📜 Description

💡 Motivation and Context

💚 How did you test it?

📝 Checklist

🔮 Next steps

github-actions bot commented Jun 26, 2024 • edited Loading

github-actions bot commented Jun 26, 2024 • edited Loading

iOS (legacy) Performance metrics 🚀

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

github-actions bot commented Jun 26, 2024 • edited Loading

iOS (new) Performance metrics 🚀

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

github-actions bot commented Jun 27, 2024 • edited Loading

Android (new) Performance metrics 🚀

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

github-actions bot commented Jun 28, 2024 • edited Loading

Android (legacy) Performance metrics 🚀

Baseline results on branch: feat/replay

Startup times

App size

Previous results on branch: kw/add-sentry-babel-transaformer

Startup times

App size

vaind left a comment

Choose a reason for hiding this comment

lforst left a comment

Choose a reason for hiding this comment

lforst Jul 3, 2024

Choose a reason for hiding this comment

lucas-zimerman left a comment

Choose a reason for hiding this comment

0Calories commented Jul 9, 2024

krystofwoldrich commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 26, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading

github-actions bot commented Jun 28, 2024 •

edited

Loading