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/api/src/components/error-boundary.tsx

@@ -0,0 +1,35 @@
+import type { ErrorInfo, ReactNode } from 'react';
+import { Component } from 'react';
+
+interface Props {
+  onError?: (error: Error, info: ErrorInfo) => void;
+  fallback: ReactNode;
+  children: ReactNode;
+}
+
+export class ErrorBoundary extends Component<Props> {
+  readonly state = { hasError: false, error: null };
+
+  constructor(props: Props) {
+    super(props);
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    this.props.onError?.(error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}

packages/monitoring/api/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './error-boundary';
+export * from './provider';

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

@@ -0,0 +1,52 @@
+'use client';
+
+import { lazy } from 'react';
+
+import { getMonitoringProvider } from '../get-monitoring-provider';
+import { InstrumentationProvider } from '../monitoring-providers.enum';
+
+const BaselimeProvider = lazy(async () => {
+  const { BaselimeProvider } = await import('@kit/baselime/provider');
+
+  return {
+    default: BaselimeProvider,
+  };
+});
+
+const SentryProvider = lazy(async () => {
+  const { SentryProvider } = await import('@kit/sentry/provider');
+
+  return {
+    default: SentryProvider,
+  };
+});
+
+type Config = {
+  provider: InstrumentationProvider;
+  providerToken: string;
+};
+
+export function MonitoringProvider(
+  props: React.PropsWithChildren<{ config?: Config }>,
+) {
+  const provider = getMonitoringProvider();
+
+  if (!props.config) {
+    return <>{props.children}</>;
+  }
+
+  switch (provider) {
+    case InstrumentationProvider.Baselime:
+      return (
+        <BaselimeProvider apiKey={props.config?.providerToken} enableWebVitals>
+          {props.children}
+        </BaselimeProvider>
+      );
+
+    case InstrumentationProvider.Sentry:
+      return <SentryProvider>{props.children}</SentryProvider>;
+
+    default:
+      return <>{props.children}</>;
+  }
+}