Introduce error boundary mechanism and exception capture with Baselime and Sentry

Deleted the ErrorBoundary component from the makerkit package and introduced new exception capture mechanisms for Baselime and Sentry monitoring providers. The code now captures all exceptions thrown within components and sends them to the configured monitoring provider, which in turn logs the errors for debugging purposes. Updated packages and environment variables accordingly to support this feature.

packages/monitoring/src/capture-exception.ts

@@ -0,0 +1,44 @@
+import { InstrumentationProvider } from './monitoring-providers.enum';
+
+/**
+ * @name MONITORING_PROVIDER
+ * @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable.
+ */
+const MONITORING_PROVIDER = process.env.MONITORING_PROVIDER as
+  | InstrumentationProvider
+  | undefined;
+
+/**
+ * @name captureException
+ * @description Capture an exception and send it to the monitoring provider defined.
+ * @param error
+ */
+export async function captureException(error: Error) {
+  if (!MONITORING_PROVIDER) {
+    console.info(
+      `No instrumentation provider specified. Logging to console...`,
+    );
+
+    return console.error(`Caught exception: ${JSON.stringify(error)}`);
+  }
+
+  switch (MONITORING_PROVIDER) {
+    case InstrumentationProvider.Baselime: {
+      const { captureException } = await import('@kit/baselime');
+
+      return captureException(error);
+    }
+
+    case InstrumentationProvider.Sentry: {
+      const { captureException } = await import('@kit/sentry');
+
+      return captureException(error);
+    }
+
+    default: {
+      throw new Error(
+        `Please set the MONITORING_PROVIDER environment variable to register the monitoring instrumentation provider.`,
+      );
+    }
+  }
+}

packages/monitoring/src/components/error-boundary.tsx

@@ -0,0 +1,39 @@
+import type { ErrorInfo, ReactNode } from 'react';
+import { Component } from 'react';
+
+import { captureException } from '../capture-exception';
+
+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,
+    };
+  }
+
+  async componentDidCatch(error: Error, info: ErrorInfo) {
+    this.props.onError?.(error, info);
+
+    await captureException(error);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}

packages/monitoring/src/components/index.ts

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

packages/monitoring/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-capture-exception';

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

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+import { captureException } from '../capture-exception';
+
+export function useCaptureException(error: Error) {
+  useEffect(() => {
+    void captureException(error);
+  }, [error]);
+
+  return null;
+}

packages/monitoring/src/index.ts

@@ -1 +1 @@
-export * from './instrumentation';
+export * from './capture-exception';

packages/monitoring/src/instrumentation.ts

@@ -1,44 +1,46 @@
-enum InstrumentationProvider {
-  Baselime = 'baselime',
-  Sentry = 'sentry',
-}
+import { InstrumentationProvider } from './monitoring-providers.enum';
 
 /**
- * @name DEFAULT_INSTRUMENTATION_PROVIDER
- * @description Register monitoring instrumentation based on the MONITORING_INSTRUMENTATION_PROVIDER environment variable.
+ * @name MONITORING_PROVIDER
+ * @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable.
  */
-const DEFAULT_INSTRUMENTATION_PROVIDER = process.env
-  .MONITORING_INSTRUMENTATION_PROVIDER as InstrumentationProvider | undefined;
+const MONITORING_PROVIDER = process.env.MONITORING_PROVIDER as
+  | InstrumentationProvider
+  | undefined;
 
 /**
  * @name registerMonitoringInstrumentation
- * @description Register monitoring instrumentation based on the MONITORING_INSTRUMENTATION_PROVIDER environment variable.
+ * @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable.
  *
- * Please set the MONITORING_INSTRUMENTATION_PROVIDER environment variable to register the monitoring instrumentation provider.
+ * Please set the MONITORING_PROVIDER environment variable to register the monitoring instrumentation provider.
  */
 export async function registerMonitoringInstrumentation() {
-  if (!DEFAULT_INSTRUMENTATION_PROVIDER) {
+  if (!MONITORING_PROVIDER) {
     console.info(`No instrumentation provider specified. Skipping...`);
 
     return;
   }
 
-  switch (DEFAULT_INSTRUMENTATION_PROVIDER) {
+  switch (MONITORING_PROVIDER) {
     case InstrumentationProvider.Baselime: {
-      const { registerBaselimeInstrumentation } = await import('@kit/baselime');
+      const { registerBaselimeInstrumentation } = await import(
+        '@kit/baselime/instrumentation'
+      );
 
       return registerBaselimeInstrumentation();
     }
 
     case InstrumentationProvider.Sentry: {
-      const { registerSentryInstrumentation } = await import('@kit/sentry');
+      const { registerSentryInstrumentation } = await import(
+        '@kit/sentry/instrumentation'
+      );
 
       return registerSentryInstrumentation();
     }
 
     default:
       throw new Error(
-        `Unknown instrumentation provider: ${DEFAULT_INSTRUMENTATION_PROVIDER as string}`,
+        `Unknown instrumentation provider: ${MONITORING_PROVIDER as string}`,
       );
   }
 }

packages/monitoring/src/monitoring-providers.enum.ts

@@ -0,0 +1,4 @@
+export enum InstrumentationProvider {
+  Baselime = 'baselime',
+  Sentry = 'sentry',
+}