Use createReporter in React plugin to collect errors

[eloytoro]

Motivation

Follow up to #3254

The ErrorBoundary component will capture whatever error occurs inside of it and send it to datadog, when this happens it renders the fallback component supplied to it. This works similar to a try/catch, where errors that occur within a component tree will not cause the entire application to crash and instead show a fallback.

As of today there’s a big problem with how ErrorBoundary reports these errors to datadog and how that plays into the Error Tracking product.

The original thrown error is not the one being reported, instead a different error is with a different stack trace (the one obtained from react’s error info) and a different error name (or @error.type in datadog). This messes with Error Tracking’s grouping.

This is the anatomy of a react error sent to Datadog today:

It would make more sense to report the original error so it has the original stack and name, drop the cause since it wouldn’t be needed anymore and instead place the component’s stack as the “Handled by” stack.

Changes

By passing the info.componentStack to the SDK through createReporter we can make it so the "Handled by" stack trace shows the component stack

const reporter = rumPublicApi.createReporter('@datadog/browser-rum-react', {
  handlingStack: info.componentStack ?? undefined,
})
reporter.addError(error, { framework: 'react' })

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[eloytoro]

Closed in favour of #3285