API error logging

apps/api/src/index.ts

@@ -43,6 +43,9 @@ app.use(
   createExpressMiddleware({
     router: trpcRouter,
     createContext: ({ req }) => ({ req }),
+    onError: ({ error, path }) => {
+      console.error(`❌ [TRPC Error on ${path}]`, error)
+    },
   })
 )
 

apps/mobile/src/app/_layout.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect } from 'react'
+import { ActivityIndicator, StyleSheet } from 'react-native'
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Stack, useRouter, useSegments } from 'expo-router'
 import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import type { TRPCClientError } from '@trpc/client'
 
+import { ScreenWrapper } from '../components/ScreenWrapper'
+
 import { AlertProvider } from '../contexts/AlertContext'
 import { AuthProvider, useAuth } from '../contexts/AuthContext'
 import { ToastProvider, useToast } from '../contexts/ToastContext'
@@ -38,7 +41,7 @@ export default function RootLayout() {
 }
 
 function App() {
-  const { token, isLoading, isAuthenticated, logout } = useAuth()
+  const { token, isLoading: isAuthLoading, isAuthenticated, logout } = useAuth()
   const { showToast } = useToast()
   const segments = useSegments()
   const router = useRouter()
@@ -93,7 +96,7 @@ function App() {
   const trpcClientState = React.useMemo(() => createTrpcClient(token), [token])
 
   useEffect(() => {
-    if (isLoading) return
+    if (isAuthLoading) return
 
     const authGroup = ['login', 'create-account', 'forgot-password', 'reset-password']
 
@@ -104,7 +107,17 @@ function App() {
     } else if (isAuthenticated && inAuthGroup) {
       router.replace('/(tabs)')
     }
-  }, [isAuthenticated, isLoading, segments])
+  }, [isAuthenticated, isAuthLoading, segments])
+
+  // Show loading indicator while auth is loading, to prevent hitting the API until token is available.
+  if (isAuthLoading) {
+    return (
+      <ScreenWrapper contentContainerStyle={styles.loadingContainer}>
+        <StatusBar style='auto' />
+        <ActivityIndicator size='large' color={palette.brandPrimary} />
+      </ScreenWrapper>
+    )
+  }
 
   return (
     <trpc.Provider client={trpcClientState} queryClient={queryClient}>
@@ -185,3 +198,10 @@ function RootRouter() {
     </Stack>
   )
 }
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})