feat: [IOPLT-305] Add Sentry Tool for Crash reporting

.env.local

@@ -33,6 +33,9 @@ ZENDESK_PRIVACY_URL='https://www.pagopa.it/it/privacy-policy-assistenza/'
 # Mixpanel 
 MIXPANEL_URL='https://api-eu.mixpanel.com'
 MIXPANEL_TOKEN='0cb505dace6f4b3ceb9e17c7fcd7c66f'
+# Sentry
+# This can be public as per docs https://docs.sentry.io/concepts/key-terms/dsn-explainer/#dsn-utilization
+SENTRY_DSN='https://43b87dcfc91f9cfdfaf71b254eb8f58e@o4507197393469440.ingest.de.sentry.io/4507221483585616'
 # Test overlay caption, if the string is nonempty will be displayed in the TestOverlay
 # TEST_OVERLAY_CAPTION='Functionality name here!'
 # enable playgrounds inside developer section

.env.production

@@ -33,6 +33,9 @@ ZENDESK_PRIVACY_URL='https://www.pagopa.it/it/privacy-policy-assistenza/'
 # Mixpanel 
 MIXPANEL_URL='https://api-eu.mixpanel.com'
 MIXPANEL_TOKEN='0cb505dace6f4b3ceb9e17c7fcd7c66f'
+# Sentry
+# This can be public as per docs https://docs.sentry.io/concepts/key-terms/dsn-explainer/#dsn-utilization
+SENTRY_DSN='https://43b87dcfc91f9cfdfaf71b254eb8f58e@o4507197393469440.ingest.de.sentry.io/4507221483585616'
 # Test overlay caption, if the string is nonempty will be displayed in the TestOverlay
 # TEST_OVERLAY_CAPTION='Functionality name here!'
 # enable playgrounds inside developer section

.github/workflows/release.yml

@@ -40,6 +40,7 @@ jobs:
           ENCODED_IOAPP_GOOGLE_SERVICES_JSON_FILE: ${{secrets.ENCODED_IOAPP_GOOGLE_SERVICES_JSON_FILE}}
           ENCODED_IOAPP_JSON_KEY_FILE: ${{secrets.ENCODED_IOAPP_JSON_KEY_FILE}}
           ENCODED_IO_APP_RELEASE_KEYSTORE: ${{secrets.ENCODED_IO_APP_RELEASE_KEYSTORE}}
+          ENCODED_IO_APP_SENTRY_PROPERTIES: ${{secrets.ENCODED_IO_APP_SENTRY_PROPERTIES}}
           IO_APP_RELEASE_STORE_FILE : ${{secrets.IO_APP_RELEASE_STORE_FILE}}
           IO_APP_RELEASE_STORE_PASSWORD: ${{secrets.IO_APP_RELEASE_STORE_PASSWORD}}
           IO_APP_RELEASE_KEY_ALIAS: ${{secrets.IO_APP_RELEASE_KEY_ALIAS}}
@@ -67,6 +68,7 @@ jobs:
         env:
           APP_STORE_API_KEY_ID: ${{secrets.APP_STORE_API_KEY_ID}}
           APP_STORE_API_PRIVATE_KEY: ${{secrets.APP_STORE_API_PRIVATE_KEY}}
+          ENCODED_IO_APP_SENTRY_PROPERTIES: ${{secrets.ENCODED_IO_APP_SENTRY_PROPERTIES}}
       - id: add-ssh-deploy-key
         run: |
           echo -e "Host github.com

.gitignore

@@ -104,4 +104,7 @@ android/app/google-services.json
 GeneratedDotEnv.m
 
 # XState Typegen
-**/*.typegen.*
+**/*.typegen.*
+
+# Sentry prop file
+sentry.properties

android/app/build.gradle

@@ -119,6 +119,7 @@ def reactNativeArchitectures() {
     return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
 }
 
+apply from: new File(["node", "--print", "require.resolve('@sentry/react-native/package.json')"].execute().text.trim(), "../sentry.gradle")
 android {
     ndkVersion rootProject.ext.ndkVersion
     compileSdkVersion rootProject.ext.compileSdkVersion

index.js

@@ -1,3 +1,4 @@
+/* eslint-disable functional/immutable-data */
 /**
  * Main app entrypoint
  */
@@ -38,6 +39,7 @@ const errorHandler = (e, isFatal) => {
         `
     );
   } else {
+    // eslint-disable-next-line no-console
     console.log(e); // So that we can see it in the ADB logs in case of Android if needed
   }
 };

ios/ItaliaApp.xcodeproj/project.pbxproj

@@ -308,6 +308,7 @@
 				7A034949213D55CA0064B689 /* Work around InputMask.xcodeproj embedding an extra set of Swift libraries */,
 				520BD832C8035EF5E68D9913 /* [CP] Embed Pods Frameworks */,
 				963519164D766C5238AA1B42 /* [CP] Copy Pods Resources */,
+				749771495C064EBF91231ED5 /* Upload Debug Symbols to Sentry */,
 			);
 			buildRules = (
 			);
@@ -501,17 +502,33 @@
 				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Alamofire/Alamofire.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/Sentry/Sentry.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Alamofire.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Sentry.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
+		749771495C064EBF91231ED5 /* Upload Debug Symbols to Sentry */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Upload Debug Symbols to Sentry";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "/bin/sh ../node_modules/@sentry/react-native/scripts/sentry-xcode-debug-files.sh";
+		};
 		7A034949213D55CA0064B689 /* Work around InputMask.xcodeproj embedding an extra set of Swift libraries */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -553,11 +570,13 @@
 				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/Alamofire/Alamofire.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/Sentry/Sentry.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Alamofire.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Sentry.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

ios/Podfile.lock

@@ -551,10 +551,16 @@ PODS:
     - Yoga
   - RNScreens (2.18.1):
     - React-Core
+  - RNSentry (5.22.2):
+    - hermes-engine
+    - React-Core
+    - React-hermes
+    - Sentry/HybridSDK (= 8.25.0)
   - RNShare (7.3.9):
     - React-Core
   - RNSVG (15.1.0):
     - React-Core
+  - Sentry/HybridSDK (8.25.0)
   - SocketRocket (0.6.1)
   - vision-camera-code-scanner (0.2.0):
     - GoogleMLKit/BarcodeScanning
@@ -695,6 +701,7 @@ DEPENDENCIES:
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNShare (from `../node_modules/react-native-share`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - vision-camera-code-scanner (from `../node_modules/vision-camera-code-scanner`)
@@ -731,6 +738,7 @@ SPEC REPOS:
     - nanopb
     - OpenSSL-Universal
     - PromisesObjC
+    - Sentry
     - SocketRocket
     - YogaKit
     - ZendeskAnswerBotProvidersSDK
@@ -903,6 +911,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSentry:
+    :path: "../node_modules/@sentry/react-native"
   RNShare:
     :path: "../node_modules/react-native-share"
   RNSVG:
@@ -1021,8 +1031,10 @@ SPEC CHECKSUMS:
   RNReactNativeHapticFeedback: 6d24decfa94e037c2ecc312407d2a057b7933f10
   RNReanimated: 60e291d42c77752a0f6d6f358387bdf225a87c6e
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNSentry: f6a5aee809d646763640130714d1fdfe69aac36b
   RNShare: 807d6f8231b8ebcf6dd839294b877342eb93d4e5
   RNSVG: 50cf2c7018e57cf5d3522d98d0a3a4dd6bf9d093
+  Sentry: cd86fc55628f5b7c572cabe66cc8f95a9d2f165a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   vision-camera-code-scanner: dda884a7f3ec8243a2a6d6489b91860648371bca
   VisionCamera: e9a95af10e00aaebe99d648ff4519fd336e16ffe

jest-e2e.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: "react-native",
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

jest.config.no.timezone.js

@@ -4,7 +4,7 @@ module.exports = {
     "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
   },
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native|@pagopa/io-app-design-system|@sentry/react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"

locales/en/index.yml

@@ -315,6 +315,7 @@ profile:
     forgetCurrentSession: Forget current session
     clearAsyncStorage: Clear AsyncStorage
     dumpAsyncStorage: Dump AsyncStorage content to console
+    sentryTestEvent: Send Exception to Sentry
     contextualHelpTitle: What you can do in your Profile
     contextualHelpContent: !include profile/profile_account_main.md
     developerModeOn: Developer mode enabled

locales/it/index.yml

@@ -315,6 +315,7 @@ profile:
     forgetCurrentSession: Dimentica sessione corrente
     clearAsyncStorage: Cancella contenuto di AsyncStorage
     dumpAsyncStorage: Scarica contenuto di AsyncStorage
+    sentryTestEvent: Invia Exception a Sentry
     contextualHelpTitle: Cosa puoi fare nel tuo Profilo
     contextualHelpContent: !include profile/profile_account_main.md
     developerModeOn: Modalità sviluppatore attivata

metro.config.js

@@ -1,4 +1,9 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable functional/immutable-data */
 const { getDefaultConfig } = require("metro-config");
+const {
+  createSentryMetroSerializer
+} = require("@sentry/react-native/dist/js/tools/sentryMetroSerializer");
 
 module.exports = (async () => {
   const {
@@ -8,6 +13,9 @@ module.exports = (async () => {
     ? process.env.RN_SRC_EXT.split(",").concat(sourceExts)
     : sourceExts;
   return {
+    serializer: {
+      customSerializer: createSentryMetroSerializer()
+    },
     transformer: {
       babelTransformerPath: require.resolve("react-native-svg-transformer"),
       experimentalImportSupport: false,

package.json

@@ -123,6 +123,7 @@
     "@react-navigation/native": "6.1.9",
     "@react-navigation/stack": "6.3.20",
     "@redux-saga/testing-utils": "^1.1.3",
+    "@sentry/react-native": "^5.22.2",
     "@shopify/flash-list": "~1.4.3",
     "@xstate/react": "^3.0.1",
     "@xstate5/react": "npm:@xstate/react@4",

scripts/android-release.sh

@@ -7,4 +7,7 @@ echo $ENCODED_IOAPP_GOOGLE_SERVICES_JSON_FILE | base64 --decode > $1/google-serv
 echo $ENCODED_IOAPP_JSON_KEY_FILE | base64 --decode > /tmp/json-key.json
 
 # Recreate keystore from ENV variable
-echo $ENCODED_IO_APP_RELEASE_KEYSTORE | base64 --decode > /tmp/ioapp-release.keystore
+echo $ENCODED_IO_APP_RELEASE_KEYSTORE | base64 --decode > /tmp/ioapp-release.keystore
+
+# Recreate sentry.properties from ENV variable
+echo $ENCODED_IO_APP_SENTRY_PROPERTIES | base64 --decode > ./android/sentry.properties

scripts/ios-release-build.sh

@@ -1,6 +1,8 @@
 #!/bin/bash
 
 cp .env.production .env
+# Recreate sentry.properties from ENV variable
+echo $ENCODED_IO_APP_SENTRY_PROPERTIES | base64 --decode > ./ios/sentry.properties
 yarn postinstall
 yarn cie-ios:ci
 touch ./ios/fastlane/AuthKey_$APP_STORE_API_KEY_ID.p8

ts/App.tsx

@@ -10,9 +10,38 @@ import { MenuProvider } from "react-native-popup-menu";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
+import * as Sentry from "@sentry/react-native";
+import { ErrorEvent, TransactionEvent } from "@sentry/types";
 import RootContainer from "./RootContainer";
 import { persistor, store } from "./boot/configureStoreAndPersistor";
 import { LightModalProvider } from "./components/ui/LightModal";
+import { sentryDsn } from "./config";
+import { isLocalEnv } from "./utils/environment";
+
+const removeUserFromEvent = (event: ErrorEvent | TransactionEvent) => {
+  // console.log(JSON.stringify(event));
+  // Modify or drop the event here
+  if (event.user) {
+    // Don't send user's email address
+    return { ...event, user: undefined };
+  }
+  return event;
+};
+
+Sentry.setUser(null);
+
+Sentry.init({
+  dsn: sentryDsn,
+  beforeSend(event) {
+    return removeUserFromEvent(event);
+  },
+  // eslint-disable-next-line sonarjs/no-identical-functions
+  beforeSendTransaction(event) {
+    return removeUserFromEvent(event);
+  },
+  enabled: !isLocalEnv,
+  sampleRate: 0.3
+});
 
 // Infer the `RootState` and `AppDispatch` types from the store itself export
 export type RootState = ReturnType<typeof store.getState>;

ts/config.ts

@@ -45,6 +45,10 @@ const DEFAULT_PAGE_SIZE = 12;
 
 // Default mixpanel EU url
 const DEFAULT_MIXPANEL_URL = "https://api-eu.mixpanel.com";
+// Default sentry dsn url
+// This can be public as per docs https://docs.sentry.io/concepts/key-terms/dsn-explainer/#dsn-utilization
+const DEFAULT_SENTRY_DSN =
+  "https://43b87dcfc91f9cfdfaf71b254eb8f58e@o4507197393469440.ingest.de.sentry.io/4507221483585616";
 
 export const environment: string = Config.ENVIRONMENT;
 export const apiUrlPrefix: string = Config.API_URL_PREFIX;
@@ -56,6 +60,11 @@ export const mixpanelUrl = pipe(
   E.getOrElse(() => DEFAULT_MIXPANEL_URL)
 );
 export const mixpanelToken: string = Config.MIXPANEL_TOKEN;
+export const sentryDsn: string = pipe(
+  Config.SENTRY_DSN,
+  NonEmptyString.decode,
+  E.getOrElse(() => DEFAULT_SENTRY_DSN)
+);
 export const isDebugBiometricIdentificationEnabled =
   Config.DEBUG_BIOMETRIC_IDENTIFICATION === "YES";
 

ts/screens/profile/DeveloperModeSection.tsx

@@ -13,6 +13,7 @@ import {
   useIOTheme,
   useIOThemeContext
 } from "@pagopa/io-app-design-system";
+import * as Sentry from "@sentry/react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as React from "react";
 import { ComponentProps } from "react";
@@ -104,6 +105,10 @@ const DeveloperActionsSection = () => {
     );
   };
 
+  const sendSentryTestEvent = () => {
+    Sentry.captureException(new Error("Random test Error"));
+  };
+
   const dumpAsyncStorage = () => {
     /* eslint-disable no-console */
     console.log("[DUMP START]");
@@ -146,6 +151,12 @@ const DeveloperActionsSection = () => {
       color: "primary",
       label: I18n.t("profile.main.dumpAsyncStorage"),
       onPress: dumpAsyncStorage
+    },
+    {
+      condition: true,
+      color: "primary",
+      label: I18n.t("profile.main.sentryTestEvent"),
+      onPress: sendSentryTestEvent
     }
   ];