perf(analytics): adding events to report on caught errors

919

src/components/sandbox/Sandbox.js

@@ -59,6 +59,7 @@ import {
 } from './utils/onboarding';
 import Welcome from './Welcome';
 import MainLoader from './Welcome/MainLoader';
+import { recordHandledError } from '@/utils/analytics';
 
 export const Sandbox = ({ onboarding = false }) => {
   const near = useVmStore((store) => store.near);
@@ -319,7 +320,8 @@ export const Sandbox = ({ onboarding = false }) => {
       });
       changeCode(path, formattedCode);
     } catch (e) {
-      console.log(e);
+      console.error(e);
+      recordHandledError({ scope: 'sandbox reformatting', message: e.message || e });
     }
   };
 
@@ -492,6 +494,7 @@ export const Sandbox = ({ onboarding = false }) => {
     } catch (e) {
       setParsedWidgetProps({});
       setPropsError(e.message);
+      recordHandledError({ scope: 'setting component props within the sandbox editor', message: e.message || e });
     }
   }, [widgetProps]);
 

src/components/sandbox/TabProps/index.js

@@ -2,6 +2,7 @@ import Editor from '@monaco-editor/react';
 import React, { useCallback } from 'react';
 
 import { Tab } from '../utils/const';
+import { recordHandledError } from '@/utils/analytics';
 
 const TabProps = ({ tab, widgetProps, setWidgetProps, propsError }) => {
   const reformatProps = useCallback(
@@ -11,6 +12,7 @@ const TabProps = ({ tab, widgetProps, setWidgetProps, propsError }) => {
         setWidgetProps(formattedProps);
       } catch (e) {
         console.log(e);
+        recordHandledError({ scope: 'sandbox reformatProps', message: e.message || e });
       }
     },
     [setWidgetProps],

src/components/vm/VmInitializer.tsx

@@ -36,7 +36,7 @@ import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
 import { useIdosStore } from '@/stores/idosStore';
 import { useVmStore } from '@/stores/vm';
-import { recordWalletConnect, reset as resetAnalytics } from '@/utils/analytics';
+import { recordHandledError, recordWalletConnect, reset as resetAnalytics } from '@/utils/analytics';
 import {
   commitModalBypassAuthorIds,
   commitModalBypassSources,
@@ -173,6 +173,7 @@ export default function VmInitializer() {
       } catch (err) {
         const errMsg = err instanceof Error ? err.message : 'Something went wrong';
         alert(errMsg);
+        recordHandledError({ scope: 'requestSignMessage', message: errMsg });
       }
     },
     [near],

src/hooks/useBosLoaderInitializer.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { useBosLoaderStore } from '@/stores/bos-loader';
 
 import { useFlags } from './useFlags';
+import { recordHandledError } from '@/utils/analytics';
 
 export function useBosLoaderInitializer() {
   const [flags] = useFlags();
@@ -37,9 +38,9 @@ export function useBosLoaderInitializer() {
           hasResolved: true,
           redirectMap: data.components,
         });
-      } catch (e) {
+      } catch (e: any) {
         console.error(e);
-
+        recordHandledError({ scope: 'requestSignMessage', message: e.message || e });
         setStore({
           failedToLoad: true,
           hasResolved: true,

src/hooks/useIdOS.ts

@@ -2,6 +2,7 @@ import { idOS } from '@idos-network/idos-sdk';
 import { useCallback, useEffect } from 'react';
 
 import { useIdosStore } from '@/stores/idosStore';
+import { recordHandledError } from '@/utils/analytics';
 
 export function useIdOS() {
   const setIdosStore = useIdosStore((state) => state.set);
@@ -15,7 +16,9 @@ export function useIdOS() {
       })) as any;
       setIdosStore({ idOS: idos });
     } catch (error: any) {
-      console.error('Failed to initialize IDOS: ', error);
+      const scope = 'Failed to initialize IDOS:';
+      console.error(scope, error);
+      recordHandledError({ scope, message: error.message || error });
     }
   }, [setIdosStore]);
 

src/pages/settings.tsx

@@ -13,6 +13,7 @@ import { useDefaultLayout } from '@/hooks/useLayout';
 import { useAuthStore } from '@/stores/auth';
 import { useIdosStore } from '@/stores/idosStore';
 import type { NextPageWithLayout } from '@/utils/types';
+import { recordHandledError } from '@/utils/analytics';
 
 const SettingsPage: NextPageWithLayout = () => {
   const components = useBosComponents();
@@ -49,8 +50,10 @@ const SettingsPage: NextPageWithLayout = () => {
         });
       }
     } catch (error: any) {
-      console.error('Failed to init wallet + idOS: ', error);
+      const scope = 'Failed to init wallet + idOS: ';
+      console.error(scope, error);
       const errorMessage = error.message ? error.message : 'unknown';
+      recordHandledError({ scope, message: errorMessage || error });
       setError({
         type: 'ERROR',
         title: 'Falilure during idOS initialization:',

src/pages/signup.tsx

@@ -13,6 +13,7 @@ import { network } from '@/utils/config';
 import type { NextPageWithLayout } from '@/utils/types';
 
 import { accountAddressPatternNoSubaccount, emailPattern, getEmailId, isValidEmail } from '../utils/form-validation';
+import { recordHandledError } from '@/utils/analytics';
 
 const ErrorText = styled.p`
   color: hsla(8, 100%, 33%, 1);
@@ -76,8 +77,12 @@ const SignUpPage: NextPageWithLayout = () => {
       if (data?.result?.code_hash) {
         return setIsAccountAvailable(false);
       }
-    } catch (error) {
+    } catch (error: any) {
       console.log(error);
+      recordHandledError({
+        scope: 'sign-up: account availability check',
+        message: error.message || error,
+      });
       setIsAccountAvailable(false);
     }
   }, []);

src/utils/analytics.ts

@@ -162,6 +162,10 @@ export function recordEventWithProps(eventLabel: string, properties: Record<stri
   }
 }
 
+export function recordHandledError(props: Record<string, string>) {
+  recordEventWithProps('error-handled', props);
+}
+
 export function recordEvent(eventLabel: string) {
   if (!rudderAnalytics) return;
   try {

src/utils/notifications.ts

@@ -16,23 +16,28 @@ import {
   setProcessSuccess,
 } from './notificationsLocalStorage';
 import type { NotificationSubscriptionData } from './types';
+import { recordHandledError } from './analytics';
 
 // min version for iOS to support notifications
 export const recommendedIosVersionForNotifications = 16.4;
 
 const handleRequestPermission = () => {
   try {
     return Notification.requestPermission();
-  } catch (error) {
-    console.error('Error while requesting permission.', error);
+  } catch (error: any) {
+    const scope = 'Error while requesting Notification permission.';
+    console.error(scope, error);
+    recordHandledError({ scope, message: error.message || error });
   }
 };
 
 const registerServiceWorker = () => {
   try {
     return navigator.serviceWorker.register('/service-worker.js');
-  } catch (error) {
-    console.error('Error while registering service-worker.', error);
+  } catch (e: any) {
+    const scope = 'Error while registering service-worker.js';
+    console.error(scope, e);
+    recordHandledError({ scope, message: e.message || e });
   }
 };
 
@@ -50,8 +55,9 @@ const handlePushManagerSubscribe = async () => {
       userVisibleOnly: true,
       applicationServerKey: notificationApplicationServerKey,
     });
-  } catch (e) {
-    console.error('Error while subscribing to service-worker.', e);
+  } catch (e: any) {
+    const scope = 'Error while subscribing to service-worker.';
+    recordHandledError({ scope, message: e.message || e });
     throw e;
   }
 };
@@ -65,8 +71,10 @@ export const handlePushManagerUnsubscribe = async (hide: () => void) => {
     await pushServerUnsubscribe(subscription);
     await unregisterServiceWorker();
     await subscription?.unsubscribe();
-  } catch (error) {
-    // TODO: handle
+  } catch (e: any) {
+    const scope = 'Error while handling unsubscribe';
+    console.error(scope, e);
+    recordHandledError({ scope, message: e.message || e });
   } finally {
     hide();
   }
@@ -129,8 +137,12 @@ export const handleTurnOn = async (accountId: string, hideModal: () => void) =>
     });
 
     setProcessSuccess();
-  } catch (error: unknown) {
+  } catch (error: any) {
     setProcessError(error);
+    recordHandledError({
+      scope: 'Error in the attempt to turn on Push Notifications',
+      message: error.message || error,
+    });
   } finally {
     hideModal();
     setProcessEnded();