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/sentry/package.json

@@ -12,13 +12,14 @@
   "exports": {
     ".": "./src/index.ts",
     "./server": "./src/server.ts",
-    "./client": "./src/client.ts",
+    "./provider": "./src/components/provider.tsx",
     "./instrumentation": "./src/instrumentation.ts",
     "./config/client": "./src/config/sentry.client.config.ts",
     "./config/server": "./src/config/sentry.server.config.ts",
     "./config/edge": "./src/config/sentry.server.edge.ts"
   },
   "dependencies": {
+    "@kit/monitoring-core": "workspace:*",
     "@opentelemetry/resources": "1.23.0",
     "@opentelemetry/sdk-node": "0.50.0",
     "@opentelemetry/semantic-conventions": "^1.23.0",
@@ -30,10 +31,15 @@
     "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/sentry/src/client.ts

@@ -1 +0,0 @@
-export * from './hooks/use-sentry';

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

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+
+import { MonitoringContext } from '@kit/monitoring-core';
+
+import { SentryServerMonitoringService } from '../services/sentry-server-monitoring.service';
+
+export function SentryProvider({ children }: React.PropsWithChildren) {
+  return <MonitoringProvider>{children}</MonitoringProvider>;
+}
+
+function MonitoringProvider(props: React.PropsWithChildren) {
+  const service = useRef(new SentryServerMonitoringService());
+
+  return (
+    <MonitoringContext.Provider value={service.current}>
+      {props.children}
+    </MonitoringContext.Provider>
+  );
+}

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

@@ -1,12 +0,0 @@
-import { useMemo } from 'react';
-
-import { SentryServerMonitoringService } from '../services/sentry-server-monitoring.service';
-
-/**
- * @name useSentry
- * @description Get the Sentry monitoring service. Sentry can be used in the browser and server - so we don't need to differentiate between the two.
- * @returns {SentryServerMonitoringService}
- */
-export function useSentry(): SentryServerMonitoringService {
-  return useMemo(() => new SentryServerMonitoringService(), []);
-}

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

@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/nextjs';
 
-import { MonitoringService } from '../../../src/services/monitoring.service';
+import { MonitoringService } from '@kit/monitoring-core';
 
 /**
  * @class