⚗️✨ [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

• [x] Local
• [x] Staging
• [x] 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[bot]]

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

[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 :warning:

Additional details and impacted files

```diff @@ 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 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[dd-devflow[bot]]

:warning:

Action not found: staging

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

[BenoitZugmeyer]

/to-staging

[dd-devflow[bot]]

:steam_locomotive: 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[bot]]

:steam_locomotive: 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 :fox_face: