diff --git a/CHANGELOG.md b/CHANGELOG.md index a2c7d99cc5..7e7280c61c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Features - Add User Interaction Tracing for Touch events ([#2835](https://github.com/getsentry/sentry-react-native/pull/2835)) +- Add Gesture Tracing for React Native Gesture Handler API v2 ([#2865](https://github.com/getsentry/sentry-react-native/pull/2865)) ### Fixes diff --git a/sample-new-architecture/src/App.tsx b/sample-new-architecture/src/App.tsx index 4eae3b5ba1..f450accd5c 100644 --- a/sample-new-architecture/src/App.tsx +++ b/sample-new-architecture/src/App.tsx @@ -16,6 +16,9 @@ import PerformanceTimingScreen from './Screens/PerformanceTimingScreen'; import ReduxScreen from './Screens/ReduxScreen'; import { Provider } from 'react-redux'; import { store } from './reduxApp'; +import { GestureHandlerRootView } from 'react-native-gesture-handler'; +import GesturesTracingScreen from './Screens/GesturesTracingScreen'; +import { StyleSheet } from 'react-native'; const reactNavigationInstrumentation = new Sentry.ReactNavigationInstrumentation({ @@ -76,27 +79,39 @@ const App = () => { const navigation = React.useRef>(null); return ( - - { - reactNavigationInstrumentation.registerNavigationContainer( - navigation, - ); - }}> - - - - - - - - - + + + { + reactNavigationInstrumentation.registerNavigationContainer( + navigation, + ); + }}> + + + + + + + + + + + ); }; +const styles = StyleSheet.create({ + wrapper: { + flex: 1, + }, +}); + export default Sentry.wrap(App); diff --git a/sample-new-architecture/src/Screens/GesturesTracingScreen.tsx b/sample-new-architecture/src/Screens/GesturesTracingScreen.tsx new file mode 100644 index 0000000000..650a029d7a --- /dev/null +++ b/sample-new-architecture/src/Screens/GesturesTracingScreen.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { Gesture, GestureDetector } from 'react-native-gesture-handler'; +import { getCurrentHub, Scope, sentryTraceGesture } from '@sentry/react-native'; + +const GesturesTracingScreen = () => { + const gesture = Gesture.Pinch().onBegin(() => { + startExampleSpan(); + }); + + return ( + + + Do pinch gesture + + + ); +}; + +const startExampleSpan = () => { + getCurrentHub().withScope((scope: Scope) => { + const child = scope.getTransaction()?.startChild({ op: 'example' }); + setTimeout(() => { + child?.finish(); + }, 1000); + }); +}; + +const styles = StyleSheet.create({ + screen: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default GesturesTracingScreen; diff --git a/sample-new-architecture/src/Screens/HomeScreen.tsx b/sample-new-architecture/src/Screens/HomeScreen.tsx index 4f370947e8..b23cbfb401 100644 --- a/sample-new-architecture/src/Screens/HomeScreen.tsx +++ b/sample-new-architecture/src/Screens/HomeScreen.tsx @@ -168,6 +168,12 @@ const HomeScreen = (props: Props) => { props.navigation.navigate('ManualTracker'); }} /> +