feat: [IOPLT-306] Setup the Sentry performance monitoring and navigat…

…ion tracing (#6114) ## Short description This PR aims to setup sentry performance monitoring on the app ## List of changes proposed in this pull request - Changes on Sentry initialization ## How to test Check navigation events are properly sent to sentry --------- Co-authored-by: Andrea <[email protected]>
pagopa · Oct 5, 2024 · 57ec77b · 57ec77b
1 parent 10a5a92
commit 57ec77b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/index.js b/index.js
@@ -18,7 +18,7 @@ import {
   setNativeExceptionHandler
 } from "react-native-exception-handler";
 
-import { App } from "./ts/App";
+import App from "./ts/App";
 import { mixpanel } from "./ts/mixpanel";
 import { name as appName } from "./app.json";
 

diff --git a/ts/App.tsx b/ts/App.tsx
@@ -17,6 +17,10 @@ import { LightModalProvider } from "./components/ui/LightModal";
 import { sentryDsn } from "./config";
 import { isDevEnv } from "./utils/environment";
 
+export const routingInstrumentation = Sentry.reactNavigationIntegration({
+  enableTimeToInitialDisplay: true
+});
+
 const removeUserFromEvent = (event: ErrorEvent | TransactionEvent) => {
   // console.log(JSON.stringify(event));
   // Modify or drop the event here
@@ -37,7 +41,12 @@ Sentry.init({
   beforeSendTransaction(event) {
     return removeUserFromEvent(event);
   },
+  integrations: integrations => [
+    ...integrations,
+    new Sentry.ReactNativeTracing({ routingInstrumentation })
+  ],
   enabled: !isDevEnv,
+  tracesSampleRate: 0.3,
   sampleRate: 0.3
 });
 
@@ -49,7 +58,7 @@ export type AppDispatch = typeof store.dispatch;
  * Main component of the application
  * @constructor
  */
-export const App = (): JSX.Element => (
+const App = (): JSX.Element => (
   <GestureHandlerRootView style={{ flex: 1 }}>
     <SafeAreaProvider>
       <IODSExperimentalContextProvider>
@@ -59,7 +68,9 @@ export const App = (): JSX.Element => (
               <PersistGate loading={undefined} persistor={persistor}>
                 <BottomSheetModalProvider>
                   <LightModalProvider>
-                    <RootContainer />
+                    <RootContainer
+                      routingInstumentation={routingInstrumentation}
+                    />
                   </LightModalProvider>
                 </BottomSheetModalProvider>
               </PersistGate>
@@ -70,3 +81,9 @@ export const App = (): JSX.Element => (
     </SafeAreaProvider>
   </GestureHandlerRootView>
 );
+
+/**
+ * We wrap the main app component with the sentry utility function to handle
+ * the Performance monitoring
+ */
+export default Sentry.wrap(App);
diff --git a/ts/RootContainer.tsx b/ts/RootContainer.tsx
@@ -8,6 +8,7 @@ import {
   Platform,
   StatusBar
 } from "react-native";
+import { ReactNavigationInstrumentation } from "@sentry/react-native";
 import SplashScreen from "react-native-splash-screen";
 import { connect } from "react-redux";
 import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification";
@@ -29,7 +30,10 @@ import {
 import { GlobalState } from "./store/reducers/types";
 import customVariables from "./theme/variables";
 
-type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps;
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    routingInstumentation: ReactNavigationInstrumentation;
+  };
 
 /**
  * The main container of the application with:
@@ -99,7 +103,9 @@ class RootContainer extends React.PureComponent<Props> {
         />
         {Platform.OS === "android" && <FlagSecureComponent />}
 
-        <IONavigationContainer />
+        <IONavigationContainer
+          routingInstrumentation={this.props.routingInstumentation}
+        />
 
         {/* When debug mode is enabled, the following information
         is displayed:

diff --git a/ts/navigation/AppStackNavigator.tsx b/ts/navigation/AppStackNavigator.tsx
@@ -7,6 +7,7 @@ import {
 } from "@react-navigation/native";
 import React, { useRef } from "react";
 import { View } from "react-native";
+import { ReactNavigationInstrumentation } from "@sentry/react-native";
 import { useStoredExperimentalDesign } from "../common/context/DSExperimentalContext";
 import LoadingSpinnerOverlay from "../components/LoadingSpinnerOverlay";
 import { cgnLinkingOptions } from "../features/bonus/cgn/navigation/navigator";
@@ -79,7 +80,11 @@ export const AppStackNavigator = (): React.ReactElement => {
   return <AuthenticatedStackNavigator />;
 };
 
-const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
+type InnerNavigationContainerProps = React.PropsWithChildren<{
+  routingInstrumentation?: ReactNavigationInstrumentation;
+}>;
+
+const InnerNavigationContainer = (props: InnerNavigationContainerProps) => {
   const routeNameRef = useRef<string>();
   const dispatch = useIODispatch();
   const store = useIOStore();
@@ -164,6 +169,11 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
       linking={linking}
       fallback={<LoadingSpinnerOverlay isLoading={true} />}
       onReady={() => {
+        if (props.routingInstrumentation) {
+          props.routingInstrumentation.registerNavigationContainer(
+            navigationRef
+          );
+        }
         NavigationService.setNavigationReady();
         routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
       }}
@@ -189,8 +199,12 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
  * Wraps the NavigationContainer with the AppStackNavigator (Root navigator of the app)
  * @constructor
  */
-export const IONavigationContainer = () => (
-  <InnerNavigationContainer>
+export const IONavigationContainer = ({
+  routingInstrumentation
+}: {
+  routingInstrumentation: ReactNavigationInstrumentation;
+}) => (
+  <InnerNavigationContainer routingInstrumentation={routingInstrumentation}>
     <AppStackNavigator />
   </InnerNavigationContainer>
 );