Refactor monitoring services into separate packages

Separated and isolated the responsibilities of monitoring tools. Reorganized the code by introducing a core package that contains common code related to monitoring and moved all the service operations like error capturing and identification of users into their respective packages. This ensures each tool is independent and easy to maintain.

packages/monitoring/baselime/package.json

@@ -18,16 +18,22 @@
   "dependencies": {
     "@baselime/node-opentelemetry": "^0.5.8",
     "@baselime/react-rum": "^0.2.9",
+    "@kit/monitoring-core": "workspace:*",
     "@tanstack/react-table": "^8.16.0",
     "next": "14.3.0-canary.7",
     "tailwind-merge": "^2.3.0",
     "zod": "^3.23.0"
   },
   "devDependencies": {
+    "@types/react": "^18.2.79",
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/tailwind-config": "workspace:*",
-    "@kit/tsconfig": "workspace:*"
+    "@kit/tsconfig": "workspace:*",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "react": "18.2.0"
   },
   "eslintConfig": {
     "root": true,

packages/monitoring/baselime/src/components/provider.tsx

@@ -1,5 +1,11 @@
+import { useRef } from 'react';
+
 import { BaselimeRum } from '@baselime/react-rum';
 
+import { MonitoringContext } from '@kit/monitoring-core';
+
+import { useBaselime } from '../hooks/use-baselime';
+
 export function BaselimeProvider({
   children,
   apiKey,
@@ -16,7 +22,18 @@ export function BaselimeProvider({
       enableWebVitals={enableWebVitals}
       fallback={ErrorPage ?? null}
     >
-      {children}
+      <MonitoringProvider>{children}</MonitoringProvider>
     </BaselimeRum>
   );
 }
+
+function MonitoringProvider(props: React.PropsWithChildren) {
+  const service = useBaselime();
+  const provider = useRef(service);
+
+  return (
+    <MonitoringContext.Provider value={provider.current}>
+      {props.children}
+    </MonitoringContext.Provider>
+  );
+}

packages/monitoring/baselime/src/hooks/use-baselime.ts

@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
+
 import { useBaselimeRum } from '@baselime/react-rum';
 
-import { MonitoringService } from '../../../src/services/monitoring.service';
+import { MonitoringService } from '@kit/monitoring-core';
 
 /**
  * @name useBaselime
@@ -9,12 +11,14 @@ import { MonitoringService } from '../../../src/services/monitoring.service';
 export function useBaselime(): MonitoringService {
   const { captureException, setUser } = useBaselimeRum();
 
-  return {
-    captureException(error: Error, extra?: React.ErrorInfo | undefined) {
-      void captureException(error, extra);
-    },
-    identifyUser(params) {
-      setUser(params.id);
-    },
-  } satisfies MonitoringService;
+  return useMemo(() => {
+    return {
+      captureException(error: Error, extra?: React.ErrorInfo | undefined) {
+        void captureException(error, extra);
+      },
+      identifyUser(params) {
+        setUser(params.id);
+      },
+    } satisfies MonitoringService;
+  }, [captureException, setUser]);
 }

packages/monitoring/baselime/src/services/baselime-server-monitoring.service.ts

@@ -1,11 +1,11 @@
 import process from 'node:process';
 import { z } from 'zod';
 
-import { MonitoringService } from '../../../src/services/monitoring.service';
+import { MonitoringService } from '@kit/monitoring-core';
 
 const apiKey = z
   .string({
-    required_error: 'API_KEY is required',
+    required_error: 'BASELIME_API_KEY is required',
   })
   .parse(process.env.BASELIME_API_KEY);