fix(react): prevent duplicate spans in strict mode

[AbhiPrasad]

Note: do not merge before #2661 gets merged.

Motivation

Currently if a user profiles a React component our Profiler component, and happens to be running in Strict Mode (https://reactjs.org/docs/strict-mode.html), each component creates two spans. It is important to note that Strict Mode runs in development mode only, so these issues are only in a development bundle environment.

This occurs because in Strict Mode, certain functions are called multiple times:

In our case, it was calling the constructor twice (or useState twice in the hook), which was causing two spans to be created.

In a fresh install of create-react-app, Strict Mode is enabled by default. Therefore for many customers trying out AM for the first time, or playing around with @sentry/react, they will often encounter this problem.

This PR aims to fix this.

Implementation

The way I get around this is by introducing a cancelActivity function to the tracing integration (
9b36c14). By providing an activity ID, we can then prevent certain spans showing up in a transaction.

We can then track all activities generated by every profiled component, and if we recognize some as redundant, cancel the unnecessary activities. I have tried to leave detailed comments around this process, so read through that for more context on how this works.

Future

After this gets merged in, the React library is feature complete (for the time being).

[billyvg]

Have we thought about keeping the spans and labeling them as due to StrictMode? It's ugly, but this Strict Mode behavior isn't obvious to users, and might be helpful to point that outside instead of hiding.

[dashed]

@billyvg my suggestion to @AbhiPrasad was to set the op name for the extra React span to be react.strict or react.strict_mode. I think this should be sufficient.

[AbhiPrasad]

Closing as the profiler logic is being reworked, so this PR no longer applies.