Link Components Stack to Source Code (touch breadcrumbs, jsx errors)

[krystofwoldrich]

Description

Currently, we send components stack as reported by React:

    in div (created by HomeScreen)
    in ErrorBoundary (created by HomeScreen)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by HomeScreen)
    in HomeScreen (created by SceneView)
    in StaticContainer

We could explore @babel/plugin-transform-react-jsx-source to include components source code in the components stack.

How does the plugin work: https://babeljs.io/docs/babel-plugin-transform-react-jsx-source

Example with the sources:

[krystofwoldrich]

Sentry Component Annotate Plugin

https://www.npmjs.com/package/@sentry/babel-plugin-component-annotate

Adds the source file name, we could utilize this in RN as well.

<div
  data-sentry-component="MyAwesomeComponent"
  data-sentry-source-file="myAwesomeComponent.jsx"
>
  This is a really cool and awesome component!
</div>

https://docs.sentry.io/platforms/javascript/guides/react/features/component-names/#how-it-works