⚗️✨ [RUM-4469] introduce an experimental React integration

[BenoitZugmeyer]

Motivation

Easily instrument a React application with the RUM SDK.

Changes

This PR introduce a new @datadog/browser-rum-react package, with error tracking and react-router integration capabilities. More to come in the future.

Please review commit by commit.

Testing

• Local
• Staging
• Unit
• End to end: We probably need e2e tests, I will see what I can do in a separate PR

---

I have gone over the contributing documentation.

[cit-pr-commenter]

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫	𝚫%	Status
Rum	160.40 KiB	160.40 KiB	0 B	0.00%	✅
Logs	58.02 KiB	58.02 KiB	0 B	0.00%	✅
Rum Slim	108.92 KiB	108.92 KiB	0 B	0.00%	✅
Worker	25.21 KiB	25.21 KiB	0 B	0.00%	✅

🚀 CPU Performance

Action Name	Base Average Cpu Time (ms)	Local Average Cpu Time (ms)	𝚫
addglobalcontext	0.001	0.002	0.000
addaction	0.031	0.046	0.015
adderror	0.032	0.039	0.007
addtiming	0.001	0.001	0.000
startview	0.898	0.937	0.039
startstopsessionreplayrecording	0.860	0.863	0.002
logmessage	0.019	0.024	0.005

🧠 Memory Performance

Action Name	Base Consumption Memory (bytes)	Local Consumption Memory (bytes)	𝚫 (bytes)
addglobalcontext	19.53 KiB	20.77 KiB	1.24 KiB
addaction	72.93 KiB	70.73 KiB	-2257 B
adderror	86.17 KiB	87.38 KiB	1.21 KiB
addtiming	19.72 KiB	19.82 KiB	110 B
startview	314.43 KiB	320.52 KiB	6.09 KiB
startstopsessionreplayrecording	15.25 KiB	15.19 KiB	-67 B
logmessage	71.76 KiB	71.07 KiB	-708 B

🔗 RealWorld

[amortemousque]

👏 praise: ‏Very nice way to test React components!

[Miz85]

LGTM! I tested it on a custom test app that I created for the occasion and everything seems to work as expected!

[Miz85]

I just realised that in my test app I'm getting a type error:

error TS2345: Argument of type 'import("/Users/nazim.saouli/test-react-app/node_modules/@remix-run/router/dist/router").Router' is not assignable to parameter of type 'import("/Users/nazim.saouli/go/src/github.com/DataDog/browser-sdk/node_modules/@remix-run/router/dist/router").Router'.
  Types of property '_internalActiveDeferreds' are incompatible.
    Type 'Map<string, import("/Users/nazim.saouli/test-react-app/node_modules/@remix-run/router/dist/utils").DeferredData>' is not assignable to type 'Map<string, import("/Users/nazim.saouli/go/src/github.com/DataDog/browser-sdk/node_modules/@remix-run/router/dist/utils").DeferredData>'.
      Type 'import("/Users/nazim.saouli/test-react-app/node_modules/@remix-run/router/dist/utils").DeferredData' is not assignable to type 'import("/Users/nazim.saouli/go/src/github.com/DataDog/browser-sdk/node_modules/@remix-run/router/dist/utils").DeferredData'.
        Types have separate declarations of a private property 'pendingKeysSet'.

13 registerRouter(router);
                  ~~~~~~

EDIT:
I'm still looking around to try and see if it's on me or if that's something that needs to be fixed in the react sdk itself.
I was testing using npm link. When I switched to using npm pack and then npm install from the tarball it generated the type error is gone.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 98.21429% with 2 lines in your changes missing coverage. Please review.

Project coverage is 93.20%. Comparing base (fab7ead) to head (b228575).
Report is 2 commits behind head on main.

Files	Patch %	Lines
...rum-react/src/domain/reactRouterV6/createRouter.ts	86.66%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2824      +/-   ##
==========================================
+ Coverage   93.10%   93.20%   +0.09%     
==========================================
  Files         248      258      +10     
  Lines        7242     7353     +111     
  Branches     1624     1645      +21     
==========================================
+ Hits         6743     6853     +110     
- Misses        499      500       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[dd-devflow]

⚠️

Action not found: staging

If you need support, contact us on Slack #devflow!

[BenoitZugmeyer]

/to-staging

[dd-devflow]

🚂 Branch Integration: starting soon, median merge time is 0s

Commit b228575b7c will soon be integrated into staging-26.

Use /to-staging -c to cancel this operation!

[dd-devflow]

🚂 Branch Integration: This commit was successfully integrated

Commit b228575b7c has been merged into staging-26 in merge commit d7bd0cffcd.

Check out the triggered pipeline on Gitlab 🦊