search

getsentry / sentry-react-native

Official Sentry SDK for React Native
https://sentry.io
MIT License
1.57k stars 334 forks source link

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

Open krystofwoldrich opened 1 year ago

krystofwoldrich commented 1 year ago

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:

Screenshot 2023-09-18 at 19 14 58
krystofwoldrich commented 3 months ago

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