[APP-527] setup sentry (#532)

* setup sentry

* add sentry to transformIgnorePatterns to fix jest issues

* update README with sourcemap instructions

* only enable integrations on native

* fix sentry web

* remove testing code

* fix sentry authToken

* Switch over to paul's auth tokens temporarily (lol)

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/App.native.tsx

@@ -1,5 +1,7 @@
 import 'react-native-url-polyfill/auto'
 import React, {useState, useEffect} from 'react'
+import 'lib/sentry' // must be relatively on top
+import {withSentry} from 'lib/sentry'
 import {Linking} from 'react-native'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as SplashScreen from 'expo-splash-screen'
@@ -64,4 +66,4 @@ const App = observer(() => {
   )
 })
 
-export default App
+export default withSentry(App)

src/App.web.tsx

@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from 'react'
+import 'lib/sentry' // must be relatively on top
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as view from './view/index'

src/Navigation.tsx

@@ -50,6 +50,7 @@ import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
 import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
 import {AppPasswords} from 'view/screens/AppPasswords'
 import {BlockedAccounts} from 'view/screens/BlockedAccounts'
+import {getRoutingInstrumentation} from 'lib/sentry'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -262,7 +263,17 @@ const LINKING = {
 function RoutesContainer({children}: React.PropsWithChildren<{}>) {
   const theme = useColorSchemeStyle(DefaultTheme, DarkTheme)
   return (
-    <NavigationContainer ref={navigationRef} linking={LINKING} theme={theme}>
+    <NavigationContainer
+      ref={navigationRef}
+      linking={LINKING}
+      theme={theme}
+      onReady={() => {
+        // Register the navigation container with the Sentry instrumentation (only works on native)
+        if (isNative) {
+          const routingInstrumentation = getRoutingInstrumentation()
+          routingInstrumentation.registerNavigationContainer(navigationRef)
+        }
+      }}>
       {children}
     </NavigationContainer>
   )

src/lib/sentry.ts

@@ -0,0 +1,46 @@
+import {isNative, isWeb} from 'platform/detection'
+import {FC} from 'react'
+import * as Sentry from 'sentry-expo'
+
+// Sentry Initialization
+
+export const getRoutingInstrumentation = () => {
+  return new Sentry.Native.ReactNavigationInstrumentation() // initialize this in `onReady` prop of NavigationContainer
+}
+
+Sentry.init({
+  dsn: 'https://05bc3789bf994b81bd7ce20c86ccd3ae@o4505071687041024.ingest.sentry.io/4505071690514432',
+  enableInExpoDevelopment: false, // if true, Sentry will try to send events/errors in development mode.
+  debug: false, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
+  environment: __DEV__ ? 'development' : 'production', // Set the environment
+  enableAutoPerformanceTracking: true, // Enable auto performance tracking
+  tracesSampleRate: 0.5, // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. // TODO: this might be too much in production
+  integrations: isNative
+    ? [
+        new Sentry.Native.ReactNativeTracing({
+          shouldCreateSpanForRequest: url => {
+            // Do not create spans for outgoing requests to a `/logs` endpoint as it is too noisy due to expo
+            return !url.match(/\/logs$/)
+          },
+          routingInstrumentation: getRoutingInstrumentation(),
+        }),
+      ]
+    : [], // no integrations for web, yet
+})
+
+// if web, use Browser client, otherwise use Native client
+export function getSentryClient() {
+  if (isWeb) {
+    return Sentry.Browser
+  }
+  return Sentry.Native
+}
+
+// wrap root App component with Sentry for automatic touch event tracking and performance monitoring
+export function withSentry(Component: FC) {
+  if (isWeb) {
+    return Component // .wrap is not required or available for web
+  }
+  const sentryClient = getSentryClient()
+  return sentryClient.wrap(Component)
+}