Add: remaining Logging w/ error handling & alerting

App.tsx

@@ -1,25 +1,35 @@
 import "react-native-gesture-handler";
+import analytics from "@react-native-firebase/analytics";
+import crashlytics from "@react-native-firebase/crashlytics";
 import eventsReducer from "./store/reducers/events";
 import useCachedResources from "./hooks/useCachedResources";
 import useColorScheme from "./hooks/useColorScheme";
 import React from "react";
 import Navigation from "./navigation";
 import ReduxThunk from "redux-thunk";
 import { applyMiddleware, createStore, combineReducers } from "redux";
-import { init } from "./helpers/db";
+import { init } from "./helpers/sqlite_db";
 import { StatusBar } from "expo-status-bar";
 import { Provider as PaperProvider } from "react-native-paper";
 import { Provider as StoreProvider } from "react-redux";
 
 init()
   .then(() => {
-    console.log("Initialized database was successful.");
+    analytics().logEvent("custom_log", {
+      description: "--- Analytics: App -> init -> then",
+    });
   })
-  .catch((error) => {
+  .catch((error: unknown) => {
     if (error instanceof Error) {
-      console.log("Initializing database has failed.");
-      console.error(error);
+      analytics().logEvent("custom_log", {
+        description: "--- Analytics: App -> init -> catch, error: " + error,
+      });
+      crashlytics().recordError(error);
     }
+  }).finally(() => {
+    analytics().logEvent("custom_log", {
+      description: "--- Analytics: App -> init -> finally",
+    });
   });
 
 const rootReducer = combineReducers({

common/isInternetConnectionAvailable.ts

@@ -1,10 +1,14 @@
+import analytics from "@react-native-firebase/analytics";
 import NetInfo, { NetInfoState } from "@react-native-community/netinfo";
 
 let stateIsConnected: boolean | null = null;
 export const isInternetConnectionAvailable: () => Promise<boolean | null> = async () => {
   NetInfo.addEventListener((state: NetInfoState) => {
     stateIsConnected = state.isConnected;
   });
+  analytics().logEvent("custom_log", {
+    description: "--- Analytics: common -> isInternetConnectionAvailable -> stateIsConnected: " + stateIsConnected,
+  });
   return stateIsConnected;
 }
 

common/writeItemToStorage.ts

@@ -1,3 +1,5 @@
+import analytics from "@react-native-firebase/analytics";
+import crashlytics from "@react-native-firebase/crashlytics";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { Alert } from "react-native";
 import { Event } from "../interfaces/event";
@@ -7,16 +9,32 @@ export const writeItemToStorage: (eventsToAsyncStorage: Event[]) => Promise<void
 
   try {
     await AsyncStorage.setItem("EVENTS_ASYNC_STORAGE", eventsInJSONString);
+
+    analytics().logEvent("custom_log", {
+      description: "--- Analytics: common -> writeItemToStorage -> try, eventsInJSONString: " + eventsInJSONString,
+    });
   } catch (error: unknown) {
     if (error instanceof Error) {
-      console.error('useAsyncStorage getItem error:', error);
+      Alert.alert(
+        "Error ❌",
+        "Problem with saving events on a local device to avoid a big load during next application launch.",
+        [{ text: "Okay" }]
+      );
+
+      analytics().logEvent("custom_log", {
+        description: "--- Analytics: common -> writeItemToStorage -> catch, error: " + error,
+      });
+      crashlytics().recordError(error);
     }
   } finally {
     Alert.alert(
-      "Events loaded ✅",
+      "Events locally saved ✅",
       "Once a week, TamoTam will make such a big load of external events.",
       [{ text: "Okay" }]
     );
+    analytics().logEvent("custom_log", {
+      description: "--- Analytics: common -> writeItemToStorage -> finally",
+    });
   }
 };
 

components/SelectImage.tsx

@@ -1,4 +1,5 @@
 import * as ImagePicker from "expo-image-picker";
+import analytics from "@react-native-firebase/analytics";
 import useColorScheme from "../hooks/useColorScheme";
 import Colors from "../constants/Colors";
 import React, { useEffect, useState } from "react";
@@ -18,6 +19,13 @@ const SelectImage = (props: {
       if (Platform.OS !== "web") {
         const { status } =
           await ImagePicker.requestMediaLibraryPermissionsAsync();
+
+        analytics().logEvent("custom_log", {
+          description: "--- Analytics: components -> SelectImage -> useEffect[], status: " + status,
+        });
+        analytics().logEvent("custom_log", {
+          description: "--- Analytics: components -> SelectImage -> useEffect[], Platform.OS: " + Platform.OS,
+        });
         if (status !== "granted") {
           Alert.alert(
             "⚠️ Insufficient permissions! ⚠️",
@@ -44,6 +52,9 @@ const SelectImage = (props: {
       setPickedImage(image.uri);
       props.onImageTaken(image.uri);
     }
+    analytics().logEvent("custom_log", {
+      description: "--- Analytics: components -> SelectImage -> selectImageHandler, image: " + image,
+    });
   };
 
   return (

components/Themed.tsx

@@ -1,3 +1,4 @@
+import analytics from "@react-native-firebase/analytics";
 import useColorScheme from "../hooks/useColorScheme";
 import Colors from "../constants/Colors";
 import React from "react";
@@ -7,9 +8,12 @@ export function useThemeColor(
   props: { light?: string; dark?: string },
   colorName: keyof typeof Colors.light & keyof typeof Colors.dark
 ) {
-  const theme = useColorScheme();
+  const theme: "light" | "dark" = useColorScheme();
   const colorFromProps: string | undefined = props[theme];
 
+  analytics().logEvent("custom_log", {
+    description: "--- Analytics: components -> Themed -> useThemeColor, theme: " + theme,
+  });
   if (colorFromProps) {
     return colorFromProps;
   } else {
@@ -28,17 +32,23 @@ export type ViewProps = ThemeProps & DefaultView["props"];
 // TODO: For now it's not being used, check out how text could be changed not manually, but instead using this function.
 export function Text(props: TextProps) {
   const { darkColor, lightColor, style, ...otherProps } = props;
-  const color = useThemeColor({ dark: darkColor, light: lightColor }, "text");
+  const color: string = useThemeColor({ dark: darkColor, light: lightColor }, "text");
 
+  analytics().logEvent("custom_log", {
+    description: "--- Analytics: components -> Themed -> Text, color: " + color,
+  });
   return <DefaultText style={[{ color }, style]} {...otherProps} />;
 }
 
 export function View(props: ViewProps) {
   const { darkColor, lightColor, style, ...otherProps } = props;
-  const backgroundColor = useThemeColor(
+  const backgroundColor: string = useThemeColor(
     { dark: darkColor, light: lightColor },
     "background"
   );
 
+  analytics().logEvent("custom_log", {
+    description: "--- Analytics: components -> Themed -> View, backgroundColor: " + backgroundColor,
+  });
   return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
 }