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

[krystofwoldrich]

• Implemented in feat(replay): Add breadcrumbs mapping from RN to RRWeb format #3846
• Released in https://github.com/getsentry/sentry-react-native/releases/tag/5.26.0

Set annotateReactComponents: true to get the touch component stack.

// For Expo
const { getSentryExpoConfig } = require("@sentry/react-native/metro");
const config = getSentryExpoConfig(__dirname, { annotateReactComponents: true });

// For RN
const { getDefaultConfig } = require('@react-native/metro-config');
const { withSentryConfig } = require('@sentry/react-native/metro');
module.exports = withSentryConfig(getDefaultConfig(__dirname), { annotateReactComponents: true });