Merge branch 'main' of https://github.com/monkvision/monkjs into feature/MN-176/factorize-monitor-code

Author: deepakglobant

.github/workflows/webapp-deploy.yml

@@ -50,7 +50,7 @@ jobs:
           cache: yarn
       - name: Setup Expo
         run: |
-          yarn global add expo-cli
+          yarn global add expo-cli@6.1.0
       - name: Build
         run: |
           yarn install

monkjs-4.0.0/packages/sights/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@monkvision/sights4.0.0",
+  "name": "@monkvision/sights4",
   "version": "4.0.0",
   "license": "BSD-3-Clause-Clear",
   "packageManager": "[email protected]",

packages/corejs/src/hooks/index.ts

@@ -4,7 +4,8 @@ import * as entity from './entities';
 import * as schemas from './schemas';
 import * as slices from './slices';
 import * as types from './types';
-export * from './hooks';
+
+export * from "./monitoring";
 
 const reducers = {};
 Object.values(slices).forEach((slice) => {

packages/corejs/src/hooks/useMonitoring/index.ts

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { Primitive } from '@sentry/types';
 import { CaptureConsole } from '@sentry/integrations';
 import { Integrations } from '@sentry/tracing';
@@ -12,22 +12,22 @@ import { MonitoringContextType } from './types';
 
 const tracingOrigins = ['localhost', 'cna.dev.monk.ai', 'cna.staging.monk.ai', 'cna.preview.monk.ai', 'cna.monk.ai'];
 const MonitoringConstants = {
-  type: {
-    UPLOAD: 'upload', // logs linked to the upload
-    CAMERA: 'camera', // logs linked to the camera
-    FUNC: 'func', // logs linked to a function
-    APP: 'app', // logs linked to the application
-    HTTP: 'http', // logs linked to the api
-  },
-  operation: {
-    HTTP: 'http',
-    USER_TIME: 'user-time-per-action',
-    USER_CAMERA_TIME: 'user-camera-time',
-    USER_UPLOAD_CENTER_TIME: 'user-upload-center-time',
-    USER_ACTION: 'user-action',
-    RESPONSE_TIME: 'response-time',
-    FUNC: 'func',
-  },
+	type: {
+		UPLOAD: 'upload', // logs linked to the upload
+		CAMERA: 'camera', // logs linked to the camera
+		FUNC: 'func', // logs linked to a function
+		APP: 'app', // logs linked to the application
+		HTTP: 'http', // logs linked to the api
+	},
+	operation: {
+		HTTP: 'http',
+		USER_TIME: 'user-time-per-action',
+		USER_CAMERA_TIME: 'user-camera-time',
+		USER_UPLOAD_CENTER_TIME: 'user-upload-center-time',
+		USER_ACTION: 'user-action',
+		RESPONSE_TIME: 'response-time',
+		FUNC: 'func',
+	},
 };
 
 const Tracing = Integrations.BrowserTracing;
@@ -36,91 +36,95 @@ const setUser = (id: string) => SentryR.setUser({ id });
 const MonitoringContext = createContext<MonitoringContextType | null>(null);
 
 function MonitoringProvider({ children, config }) {
-  useEffect(() => {
-    Sentry.init({
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      dsn: (config.dns || Constants.manifest.extra.SENTRY_DSN) as string,
-      environment: Constants.manifest.extra.ENV as string,
-      debug: Constants.manifest.extra.ENV !== 'production',
-      enableAutoSessionTracking: true,
-      enableInExpoDevelopment: true,
-      sessionTrackingIntervalMillis: 10000,
-      tracesSampleRate: Constants.manifest.extra.ENV !== 'production' ? 1.0 : 0.2,
-      integrations: [
-        ...(Platform.select({
-          web: [new CaptureConsole({ levels: ['log'] })],
-          native: [],
-        })),
-        new Tracing({
-          tracingOrigins,
-        }),
-      ],
-    } as Sentry.SentryExpoNativeOptions);
-  }, []);
+	useEffect(() => {
+		Sentry.init({
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+			dsn: (config.dns || Constants.manifest.extra.SENTRY_DSN) as string,
+			environment: Constants.manifest.extra.ENV as string,
+			debug: Constants.manifest.extra.ENV !== 'production',
+			enableAutoSessionTracking: true,
+			enableInExpoDevelopment: true,
+			sessionTrackingIntervalMillis: 10000,
+			tracesSampleRate: Constants.manifest.extra.ENV !== 'production' ? 1.0 : 0.2,
+			integrations: [
+				...(Platform.select({
+					web: [new CaptureConsole({ levels: ['log'] })],
+					native: [],
+				})),
+				new Tracing({
+					tracingOrigins,
+				}),
+			],
+		} as Sentry.SentryExpoNativeOptions);
+	}, []);
 
-  /**
-   * @param error {Error} - Caught error to send to Sentry.io
-   * @param type {string} - tag of the error's type
-   * @param extras {Record} - Useful information that can be sent (request's body for example)
-   * @param additionalTags - (Optional) Additional tags to add to the error
-   */
-  const errorHandler = (error: Error | string): string => {
-    if (!Sentry || (!Sentry?.Browser && !Sentry?.Native)) { return null; }
+	/**
+	 * @param error {Error} - Caught error to send to Sentry.io
+	 * @param type {string} - tag of the error's type
+	 * @param extras {Record} - Useful information that can be sent (request's body for example)
+	 * @param additionalTags - (Optional) Additional tags to add to the error
+	 */
+	const errorHandler = (error: Error | string): string => {
+		if (!Sentry || (!Sentry?.Browser && !Sentry?.Native)) { return null; }
 
-    return Platform.select({
-      web: Sentry.Browser,
-      native: Sentry.Browser,
-    }).captureException(error);
-  };
+		return Platform.select({
+			web: Sentry.Browser,
+			native: Sentry.Browser,
+		}).captureException(error);
+	};
 
-  /**
-   * @param name {string} - Name of transaction
-   * @param operation {string} - Operation of transaction to be performed
-   * @param data {{[key: string]: number | string}} - Data to be added on transaction
-   */
-  const measurePerformance = (name: string, operation: string, data: { [key: string]: number | string } | null) => {
-    const transaction = Platform.select({
-      web: Sentry.Browser,
-      native: Sentry.Browser,
-    }).startTransaction({ name, data });
-    const transactionOperation = transaction.startChild({ op: operation });
+	/**
+	 * @param name {string} - Name of transaction
+	 * @param operation {string} - Operation of transaction to be performed
+	 * @param data {{[key: string]: number | string}} - Data to be added on transaction
+	 */
+	const measurePerformance = (name: string, operation: string, data: { [key: string]: number | string } | null) => {
+		const transaction = Platform.select({
+			web: Sentry.Browser,
+			native: Sentry.Browser,
+		}).startTransaction({ name, data });
+		const transactionOperation = transaction.startChild({ op: operation });
 
-    return () => {
-      transactionOperation.finish();
-      transaction.finish();
-    };
-  };
+		return () => {
+			transactionOperation.finish();
+			transaction.finish();
+		};
+	};
 
   const monitoringContextValue = useMemo(
     () => ({ errorHandler, measurePerformance }),
     [errorHandler, measurePerformance],
   );
 
-  return (
-    <MonitoringContext.Provider value={monitoringContextValue}>
-      {children}
-    </MonitoringContext.Provider>
-  );
+	return (
+		<MonitoringContext.Provider value={monitoringContextValue}>
+			{children}
+		</MonitoringContext.Provider>
+	);
 }
 
-export default MonitoringProvider;
+const useMonitoring = () => {
+  return useContext(MonitoringContext);
+}
 
 export {
-  MonitoringContext,
-  setTag,
-  setUser,
-  Tracing,
   MonitoringConstants,
+	MonitoringContext,
+	setTag,
+	setUser,
+	Tracing,
+  MonitoringProvider,
+  useMonitoring,
 };
 
 MonitoringProvider.propTypes = {
-  config: PropTypes.shape({
-    dns: PropTypes.string,
-  }),
+	config: PropTypes.shape({
+		dns: PropTypes.string,
+	}),
 };
 
 MonitoringProvider.defaultProps = {
-  config: {
-    dns: '',
-  },
+	config: {
+		dns: '',
+	},
 };

packages/corejs/src/index.ts

@@ -16,7 +16,7 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
 import { Provider } from 'react-redux';
 import store from 'store';
-// import { useMonitoring } from '@monkvision/corejs';
+import { useMonitoring } from '@monkvision/corejs';
 
 const theme = {
   ...DefaultTheme,
@@ -39,7 +39,7 @@ function App() {
   const { height: minHeight } = useWindowDimensions();
   const { t } = useTranslation();
 
-  // const [errorHandler] = useMonitoring();
+  const { errorHandler } = useMonitoring();
   const [appIsReady, setAppIsReady] = useState(false);
 
   const onLayoutRootView = useCallback(async () => {
@@ -52,13 +52,12 @@ function App() {
       try {
         await SplashScreen.hideAsync();
       } catch (err) {
-        // errorHandler(err);
+        errorHandler(err);
       }
     }
   }, [appIsReady]);
 
   useEffect(() => {
-    // errorHandler('Use Monitoring Error Checking');
     async function prepare() {
       try {
         // Keep the splash screen visible while we fetch resources
@@ -69,7 +68,7 @@ function App() {
         // experience. Please remove this if you copy and paste the code!
         // await new Promise((resolve) => { setTimeout(resolve, 2000); });
       } catch (err) {
-        // errorHandler(err);
+        errorHandler(err);
       } finally {
         // Tell the application to render
         setAppIsReady(true);

packages/corejs/src/monitoring/index.tsx

@@ -5,8 +5,7 @@ import { Platform } from 'react-native';
 import * as Sentry from 'sentry-expo';
 import App from 'components/App';
 import './i18n';
-
-import MonitoringProvider from '@monkvision/corejs/src/monitoring';
+import { MonitoringProvider } from '@monkvision/corejs';
 
 if (Platform.OS === 'web') {
   const container = document.getElementById('root');