Merge remote-tracking branch 'origin/main' into develop

Author: JClackett

apps/app/app.config.ts

@@ -1,7 +1,7 @@
 import { ConfigContext, ExpoConfig } from "expo/config"
 
-const VERSION = "1.0.9"
-const BUILD = 28
+const VERSION = "1.0.10"
+const BUILD = 29
 
 const IS_DEV = process.env.APP_VARIANT === "development"
 
@@ -66,16 +66,21 @@ const defineConfig = (_ctx: ConfigContext): ExpoConfig => ({
     },
   },
   plugins: [
+    "sentry-expo",
     "./expo-plugins/with-modify-gradle.js",
-    [
-      "expo-build-properties",
+    ["expo-build-properties", { android: { kotlinVersion: "1.7.22" } }],
+  ],
+  hooks: {
+    postPublish: [
       {
-        android: {
-          kotlinVersion: "1.7.22", // <-- add a version here for resolution, version can be newer depending on the Expo SDK version used in the project
+        file: "sentry-expo/upload-sourcemaps",
+        config: {
+          organization: "noquarter",
+          project: "element-app",
         },
       },
     ],
-  ],
+  },
 })
 
 export default defineConfig

apps/app/package.json

@@ -26,6 +26,7 @@
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-picker/picker": "2.4.10",
+    "@sentry/react-native": "5.10.0",
     "@tanstack/react-query": "4.36.1",
     "@trpc/client": "10.45.0",
     "@trpc/react-query": "10.45.0",
@@ -53,6 +54,7 @@
     "match-sorter": "6.3.3",
     "nativewind": "2.0.11",
     "polished": "4.2.2",
+    "posthog-react-native": "^2.10.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
@@ -66,6 +68,7 @@
     "react-native-svg": "13.9.0",
     "react-native-toast-message": "2.2.0",
     "reanimated-color-picker": "2.4.2",
+    "sentry-expo": "~7.1.0",
     "superjson": "1.13.3",
     "uuid": "3.4.0",
     "zustand": "4.4.7"

apps/app/src/app/_layout.tsx

@@ -8,15 +8,24 @@ import dayjs from "dayjs"
 import { SplashScreen, Stack } from "expo-router"
 import { StatusBar } from "expo-status-bar"
 import { useColorScheme as useNWColorScheme } from "nativewind"
+import { PostHogProvider, usePostHog } from "posthog-react-native"
+import * as Sentry from "sentry-expo"
 
 import { Toast } from "../components/Toast"
+import { IS_PRODUCTION } from "../lib/config"
 import { useCheckExpoUpdates } from "../lib/hooks/useCheckExpoUpdates"
 import { useFeatures } from "../lib/hooks/useFeatures"
 import { useMe } from "../lib/hooks/useMe"
 import { useNotificationObserver } from "../lib/hooks/useNotificationObserver"
 import { useBackgroundColor } from "../lib/tailwind"
 import { api, TRPCProvider } from "../lib/utils/api"
 
+Sentry.init({
+  dsn: "https://2e39a63a183c7a7fab0f691b638da957@o204549.ingest.sentry.io/4506592060309504",
+  enableInExpoDevelopment: false,
+  debug: true,
+})
+
 SplashScreen.preventAutoHideAsync()
 
 // This is the main layout of the app
@@ -45,25 +54,32 @@ export default function RootLayout() {
   if (!fontsLoaded) return null
 
   return (
-    <ActionSheetProvider>
-      <TRPCProvider>
-        <PrefetchTabs>
-          <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
-            <SafeAreaProvider>
-              <View className="flex-1 bg-white dark:bg-black">
-                <Stack initialRouteName="(home)" screenOptions={{ headerShown: false, contentStyle: { backgroundColor } }}>
-                  <Stack.Screen name="(home)" />
-                  <Stack.Screen name="(auth)" options={{ presentation: "modal" }} />
-                  <Stack.Screen name="onboarding" options={{ presentation: "modal" }} />
-                </Stack>
-              </View>
-              <Toast />
-              <StatusBar />
-            </SafeAreaProvider>
-          </GestureHandlerRootView>
-        </PrefetchTabs>
-      </TRPCProvider>
-    </ActionSheetProvider>
+    <TRPCProvider>
+      <PostHogProvider
+        autocapture
+        apiKey="phc_2W9bqjQCsJjOLxyO5wcxb4m5aQrNRjUWmKA9mvu9lcF"
+        options={{ host: "https://eu.posthog.com", enable: IS_PRODUCTION }}
+      >
+        <ActionSheetProvider>
+          <PrefetchTabs>
+            <IdentifyUser />
+            <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
+              <SafeAreaProvider>
+                <View className="flex-1 bg-white dark:bg-black">
+                  <Stack initialRouteName="(home)" screenOptions={{ headerShown: false, contentStyle: { backgroundColor } }}>
+                    <Stack.Screen name="(home)" />
+                    <Stack.Screen name="(auth)" options={{ presentation: "modal" }} />
+                    <Stack.Screen name="onboarding" options={{ presentation: "modal" }} />
+                  </Stack>
+                </View>
+                <Toast />
+                <StatusBar />
+              </SafeAreaProvider>
+            </GestureHandlerRootView>
+          </PrefetchTabs>
+        </ActionSheetProvider>
+      </PostHogProvider>
+    </TRPCProvider>
   )
 }
 
@@ -87,3 +103,14 @@ function PrefetchTabs(props: { children: React.ReactNode }) {
   if (!isDoneChecking) return null
   return <>{props.children}</>
 }
+
+function IdentifyUser() {
+  const { me, isLoading } = useMe()
+  const posthog = usePostHog()
+  React.useEffect(() => {
+    if (isLoading || !me) return
+    if (posthog) posthog.identify(me.id, { email: me.email, name: me.firstName + " " + me.lastName })
+    Sentry.React.setUser({ id: me.id, email: me.email })
+  }, [me, isLoading, posthog])
+  return null
+}

apps/app/src/lib/hooks/useCheckExpoUpdates.tsx

@@ -1,8 +1,8 @@
 import * as React from "react"
 import { AppState, type AppStateStatus } from "react-native"
 import * as Updates from "expo-updates"
+import * as Sentry from "sentry-expo"
 
-// import * as Sentry from "sentry-expo"
 import { IS_DEV } from "../config"
 
 export function useCheckExpoUpdates() {
@@ -22,7 +22,7 @@ export function useCheckExpoUpdates() {
       }
     } catch (error) {
       console.log("expo update timeout reached")
-      // Sentry.Native.captureException(error)
+      Sentry.Native.captureException(error)
     } finally {
       return setIsDoneChecking(true)
     }