Implement Baselime monitoring and update error handling

This commit introduces the integration of Baselime for monitoring, accounting for various error scenarios and improved console error logging. Request handling has been updated to assign unique IDs for each request, aiding in tracing/logs. The environment variable key was updated, and the `MonitoringProvider` was nested in the root providers. In the base monitoring service, a function to format errors for logging was added. The provider logic was updated to create a new instance of service for each request, improving memory efficiency.

packages/monitoring/baselime/README.md

@@ -3,6 +3,6 @@
 Please set the following environment variables:
 
 ```
-BASELIME_KEY=your_key
+NEXT_PUBLIC_BASELIME_KEY=your_key
 NEXT_PUBLIC_MONITORING_PROVIDER=baselime
 ```

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

@@ -1,6 +1,6 @@
 import { BaselimeRum } from '@baselime/react-rum';
 
-export function BaselineProvider({
+export function BaselimeProvider({
   children,
   apiKey,
   enableWebVitals,

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

@@ -1,9 +1,75 @@
+import process from 'node:process';
+import { z } from 'zod';
+
 import { MonitoringService } from '../../../src/services/monitoring.service';
 
+const apiKey = z
+  .string({
+    required_error: 'API_KEY is required',
+  })
+  .parse(process.env.BASELIME_API_KEY);
+
 export class BaselimeServerMonitoringService implements MonitoringService {
-  captureException(error: Error | null) {
-    console.error(`Caught exception: ${JSON.stringify(error)}`);
+  userId: string | null = null;
+
+  async captureException(
+    error: Error | null,
+    extra?: {
+      requestId?: string;
+      sessionId?: string;
+      namespace?: string;
+      service?: string;
+    },
+  ) {
+    const formattedError = error ? getFormattedError(error) : {};
+
+    const event = {
+      level: 'error',
+      data: { error },
+      error: {
+        ...formattedError,
+      },
+      message: error ? `${error.name}: ${error.message}` : `Unknown error`,
+    };
+
+    const response = await fetch(`https://events.baselime.io/v1/web`, {
+      method: 'POST',
+      headers: {
+        contentType: 'application/json',
+        'x-api-key': apiKey,
+        'x-service': extra?.service ?? '',
+        'x-namespace': extra?.namespace ?? '',
+      },
+      body: JSON.stringify([
+        {
+          userId: this.userId,
+          sessionId: extra?.sessionId,
+          namespace: extra?.namespace,
+          ...event,
+        },
+      ]),
+    });
+
+    if (!response.ok) {
+      console.error(
+        {
+          response,
+          event,
+        },
+        'Failed to send event to Baselime',
+      );
+    }
   }
 
-  identifyUser<Info extends { id: string }>(info: Info) {}
+  identifyUser<Info extends { id: string }>(info: Info) {
+    this.userId = info.id;
+  }
+}
+
+function getFormattedError(error: Error) {
+  return {
+    name: error.name,
+    message: error.message,
+    stack: error.stack,
+  };
 }

packages/monitoring/src/components/index.ts

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

packages/monitoring/src/components/provider.tsx

@@ -0,0 +1,45 @@
+'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,
+  };
+});
+
+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>
+      );
+
+    // sentry does not require a provider
+    case InstrumentationProvider.Sentry:
+      return <>{props.children}</>;
+
+    default:
+      return <>{props.children}</>;
+  }
+}

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

@@ -5,7 +5,7 @@ import { MonitoringService } from '../services/monitoring.service';
 
 const MONITORING = getMonitoringProvider();
 
-let service: MonitoringService;
+let serviceFactory: () => MonitoringService;
 
 /**
  * @name useMonitoring
@@ -13,22 +13,20 @@ let service: MonitoringService;
  * Use Suspense to suspend while loading the service.
  */
 export function useMonitoring() {
-  if (!service) {
+  if (!serviceFactory) {
     throw withMonitoringService();
   }
 
-  console.log(service);
-
-  return service;
+  return serviceFactory();
 }
 
 async function withMonitoringService() {
-  service = await loadMonitoringService();
+  serviceFactory = await loadMonitoringService();
 }
 
-async function loadMonitoringService() {
+async function loadMonitoringService(): Promise<() => MonitoringService> {
   if (!MONITORING) {
-    return new ConsoleMonitoringService();
+    return Promise.resolve(() => new ConsoleMonitoringService());
   }
 
   switch (MONITORING) {
@@ -45,7 +43,9 @@ async function loadMonitoringService() {
     }
 
     default: {
-      throw new Error(`Unknown instrumentation provider: ${MONITORING}`);
+      throw new Error(
+        `Unknown instrumentation provider: ${MONITORING as string}`,
+      );
     }
   }
 }

packages/monitoring/src/services/console-monitoring.service.ts

@@ -6,6 +6,8 @@ export class ConsoleMonitoringService implements MonitoringService {
   }
 
   captureException(error: Error) {
-    console.error(`Caught exception: ${JSON.stringify(error)}`);
+    console.error(
+      `[Console Monitoring] Caught exception: ${JSON.stringify(error)}`,
+    );
   }
 }