Updated imports + added global error handler & api submission.

Author: actions-user

app/_layout.tsx

@@ -3,9 +3,9 @@ import { useEffect, useState } from "react";
 import { useNavigationContainerRef } from "@react-navigation/native";
 import { useReactNavigationDevTools } from "@dev-plugins/react-navigation";
 import { SplashScreen } from "expo-router";
-import { usePushNotifications } from "../hooks/usePushNotifications";
-import { useNotificationObserver } from "../hooks/usePushNotifications";
-// import { registerForPushNotificationsAsync } from "../utils/notifications";
+import { usePushNotifications } from "@/hooks/usePushNotifications";
+import { useNotificationObserver } from "@/hooks/usePushNotifications";
+// import { registerForPushNotificationsAsync } from "@/utils/notifications";
 // import { getFirebaseApp } from "@/utils/firebase";
 import { useFonts } from "expo-font";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
@@ -16,8 +16,45 @@ import {
 } from "@react-navigation/native";
 import { Stack } from "expo-router";
 import "react-native-reanimated";
-import { useColorScheme } from "@/components/useColorScheme";
+import { useColorScheme } from "@/hooks/useColorScheme";
 import { registerBackgroundFetch } from "@/utils/tasks.utils";
+import ErrorBoundary from "@/components/ErrorBoundary";
+// FIX 2: Import the exception handlers from the library
+import {
+  setJSExceptionHandler,
+  setNativeExceptionHandler,
+} from "react-native-exception-handler";
+import { reportError } from "@/services/errorReporting.service";
+import { ErrorInfo } from "react";
+
+// --- NEW: Import our notification function ---
+import { showFatalErrorNotification } from "@/utils/notifications.utils";
+
+// --- Global Exception Handler Setup ---
+
+const jsExceptionHandler = (error: Error, isFatal: boolean) => {
+  console.log("Caught JS Exception:", error, isFatal);
+  reportError(error, { isFatal });
+
+  if (isFatal) {
+    // Pass the error to the notification function
+    showFatalErrorNotification(error);
+  }
+};
+
+const nativeExceptionHandler = (exceptionString: string) => {
+  console.log("Caught Native Exception:", exceptionString);
+  const error = new Error(`Native Exception: ${exceptionString}`);
+  reportError(error, { isFatal: true });
+
+  // Pass the newly created error to the notification function
+  showFatalErrorNotification(error);
+};
+
+setJSExceptionHandler(jsExceptionHandler, true);
+setNativeExceptionHandler(nativeExceptionHandler);
+
+// --- Component Definition ---
 
 export default function RootLayout() {
   const navigationRef = useNavigationContainerRef();
@@ -27,8 +64,8 @@ export default function RootLayout() {
   usePushNotifications();
   useNotificationObserver();
 
+  // Register background fetch task
   useEffect(() => {
-    // Register background fetch task
     registerBackgroundFetch();
   }, []);
 
@@ -41,27 +78,6 @@ export default function RootLayout() {
     ...FontAwesome.font,
   });
 
-  // useEffect(() => {
-  //   // Initialize Firebase app
-  //   try {
-  //     getFirebaseApp();
-  //     console.log("Firebase initialized in RootLayout");
-  //   } catch (error) {
-  //     console.error("Firebase initialization error:", error);
-  //   }
-
-  //   // Register for push notifications and get the push token
-  //   registerForPushNotificationsAsync().then((token) => {
-  //     if (token) {
-  //       setExpoPushToken(token); // Store the push token
-  //     }
-  //   });
-
-  //   return () => {
-  //     console.log("Cleanup RootLayout effect");
-  //   };
-  // }, []);
-
   // Handle font loading errors
   useEffect(() => {
     if (error) throw error;
@@ -84,14 +100,15 @@ export default function RootLayout() {
 
 function RootLayoutNav() {
   const colorScheme = useColorScheme();
-  // useNotificationObserver(); // Moved to RootLayout to prevent unnecessary re-renders
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
-      </Stack>
-    </ThemeProvider>
+    <ErrorBoundary>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+        </Stack>
+      </ThemeProvider>
+    </ErrorBoundary>
   );
 }