Feature/mn 175/factorize monitor code

package.json

@@ -49,9 +49,10 @@
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.1",
     "@reduxjs/toolkit": "^1.8.1",
-    "@sentry/react": "^6.19.6",
+    "@sentry/browser": "^7.36.0",
+    "@sentry/react": "^7.36.0",
     "@sentry/react-native": "^4.13.0",
-    "@sentry/tracing": "^6.19.7",
+    "@sentry/tracing": "^7.36.0",
     "axios": "^0.26.1",
     "expo": "^44.0.6",
     "expo-application": "~4.0.1",

packages/corejs/.eslintrc.js

@@ -35,6 +35,13 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
   },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
   overrides: [
     {
       files: [

packages/corejs/package.json

@@ -69,6 +69,10 @@
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   },
+	"peerDependencies": {
+		"react": "*",
+		"react-native": "*"
+	},
   "publishConfig": {
     "access": "public"
   }

packages/corejs/src/index.ts

@@ -5,6 +5,8 @@ import * as schemas from './schemas';
 import * as slices from './slices';
 import * as types from './types';
 
+export * from './monitoring';
+
 const reducers = {};
 Object.values(slices).forEach((slice) => {
   const { name } = slice;

packages/corejs/src/monitoring/index.tsx

@@ -0,0 +1,133 @@
+import * as Sentry from '@sentry/browser';
+import { BrowserTracing } from '@sentry/tracing';
+import React, { createContext, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
+import { Primitive } from '@sentry/types';
+
+import { MonitoringContext, MonitoringProps, SentryTransactionStatus } from './types';
+
+export * from './types';
+
+/**
+ * Monitoring context which will create wrapper for monitoring functionality.
+*/
+export const Context = createContext<MonitoringContext | null>(null);
+
+/**
+ * Monitoring wrapper used to abstract Sentry functionality.
+ *
+ * @param {MonitoringProps} data - Configuration for sentry to override default configuration.
+ * @return {React.ReactNode}
+*/
+export function MonitoringProvider({ children, config }: PropsWithChildren<MonitoringProps>) {
+  useEffect(() => {
+    Sentry.init({
+      dsn: config.dsn,
+      environment: config.environment,
+      debug: config.debug,
+      tracesSampleRate: config.tracesSampleRate,
+      integrations: [
+        new BrowserTracing({ tracePropagationTargets: config.tracingOrigins }),
+      ],
+    });
+  }, []);
+
+  /**
+   * Updates user context information for future events.
+   *
+   * @param id {string} set user for in sentry
+   * @return {void}
+  */
+  const setMonitoringUser = useCallback((id: string): void => {
+    Sentry.setUser({ id });
+  }, []);
+
+  /**
+   * Set key:value that will be sent as tags data with the event.
+   *
+   * Can also be used to unset a tag, by passing `undefined`.
+   *
+   * @param key String key of tag
+   * @param value Value of tag
+   * @return {void}
+  */
+  const setMonitoringTag = useCallback((key: string, value: Primitive): void => {
+    Sentry.setTag(key, value);
+  }, []);
+
+  /**
+   * Error handler function which is used to capture errors in sentry.
+   *
+   * @param error {Error | string} - Caught error that to be send to Sentry.io
+   * @returns {string | null}
+   */
+  const errorHandler = useCallback((error: Error | string): string | null => {
+    if (!Sentry) {
+      return null;
+    }
+
+    return Sentry.captureException(error);
+  }, []);
+
+  /**
+   * Measure the performance of application based on functionality and operation based on it.
+   * Return type of the function is the IIFE, which will helps to close the transaction and complete the measurement.
+   *
+   * @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
+   * @returns {() => void} - Which will helps to close the transaction and complete the measurement.
+  */
+  const measurePerformance = useCallback((name: string, op: string, data?: { [key: string]: number | string }): (() => void) => {
+    // This will create a new Transaction
+    const transaction = Sentry.startTransaction({ name, data, op });
+
+    // Set transaction on scope to associate with errors and get included span instrumentation
+    // If there's currently an unfinished transaction, it may be dropped
+    Sentry.getCurrentHub().configureScope((scope) => {
+      scope.setSpan(transaction);
+    });
+
+    return () => {
+      transaction.setStatus(SentryTransactionStatus);
+      transaction.finish();
+    };
+  }, []);
+
+  /**
+   * Set the custom measurement on particular transaction
+   *
+   * @param transactionName Name of the transaction
+   * @param name Name of the measurement
+   * @param value Value of the measurement
+   * @param [unit] Unit of the measurement. (Defaults to an empty string)
+   * @return {void}
+   */
+  const setMeasurement = useCallback((transactionName: string, name: string, value: number, unit?: string): void => {
+    const transaction = Sentry.startTransaction({ name: transactionName, op: name });
+
+    setTimeout(() => {
+      transaction.setMeasurement(name, value, unit);
+      transaction.setMeasurement('frames_total', value, unit);
+      transaction.setStatus(SentryTransactionStatus);
+      transaction.finish();
+    }, 100);
+  }, []);
+
+  const monitoringContextValue = useMemo(
+    () => ({ setMonitoringUser, setMonitoringTag, errorHandler, measurePerformance, setMeasurement }),
+    [setMonitoringUser, setMonitoringTag, errorHandler, measurePerformance, setMeasurement],
+  );
+
+  return (
+    <Context.Provider value={monitoringContextValue}>
+      {children}
+    </Context.Provider>
+  );
+}
+
+/**
+ * Custom hook which will provide monitoring context which will expose all the functionality.
+*/
+export function useMonitoring() {
+  return useContext(Context);
+}

packages/corejs/src/monitoring/types.ts

@@ -0,0 +1,68 @@
+/**
+ * Monitoring config interface
+*/
+export interface MonitoringConfig {
+  /**
+   * DSN key for sentry.io application
+  */
+  dsn: string;
+  /**
+   * The current environment of your application (e.g. "production")
+  */
+  environment: string;
+  /**
+   * Enable debug functionality in the SDK itself
+  */
+  debug: boolean;
+  /**
+   * Sample rate to determine trace sampling.
+   *
+   * 0.0 = 0% chance of a given trace being sent (send no traces) 1.0 = 100% chance of a given trace being sent (send
+   * all traces)
+   *
+   * Tracing is enabled if either this or `tracesSampler` is defined. If both are defined, `tracesSampleRate` is
+   * ignored.
+  */
+  tracesSampleRate: number;
+  /**
+   * Array of all the origin to browser trace.
+  */
+  tracingOrigins: string[];
+}
+
+/**
+ * Monitoring context interface
+*/
+export interface MonitoringContext {
+  /**
+   * Set current user for sentry.
+  */
+  setMonitoringUser: (id: string) => void;
+
+  /**
+   * Store the error in the monitoring application.
+  */
+  errorHandler: (error: Error | string) => string;
+
+  /**
+   * Start Measure Performance
+  */
+  measurePerformance: (name: string, op: string, data: { [key: string]: number | string } | null) => (() => void);
+
+  /**
+   * Set custom measurement value
+  */
+  setMeasurement: (transactionName: string, name: string, value: number, unit: string) => void;
+}
+
+/**
+ * Monitoring configuration interface
+*/
+export interface MonitoringProps {
+  /**
+   * Configuration to initialize Sentry
+  */
+  config: MonitoringConfig;
+}
+
+export const SentryTransactionStatus = 'success';

packages/corejs/src/types.ts

@@ -24,3 +24,4 @@ export * from './views/reduxTypes';
 export * from './views/apiTypes';
 export * from './wheelAnalysis/entityTypes';
 export * from './wheelAnalysis/reduxTypes';
+export * from './monitoring/types';

packages/corejs/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+		"jsx": "react",
     "outDir": "lib",
     "allowJs": false,
     "target": "es5",
@@ -9,8 +10,11 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "module": "commonjs",
-    "lib": [ "es2015" ]
+    "skipLibCheck": true,
+    "lib": [ "es2015" ],
   },
   "include": ["src"],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }

packages/toolkit/src/hooks/index.js

@@ -1,4 +1,3 @@
-export { default as useSentry } from './useSentry';
 export { default as useIcons } from './useIcons';
 export { default as useToggle } from './useToggle';
 export { default as useInterval } from './useInterval';