B2B-88: add starter kit structure and elements

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,67 @@
+'use client';
+
+import { lazy } from 'react';
+
+import { createRegistry } from '@kit/shared/registry';
+
+import {
+  MonitoringProvider as MonitoringProviderType,
+  getMonitoringProvider,
+} from '../get-monitoring-provider';
+
+// Define the type for our provider components
+type ProviderComponent = {
+  default: React.ComponentType<React.PropsWithChildren>;
+};
+
+const provider = getMonitoringProvider();
+
+const Provider = provider
+  ? lazy(() => monitoringProviderRegistry.get(provider))
+  : null;
+
+// Create a registry for monitoring providers
+const monitoringProviderRegistry = createRegistry<
+  ProviderComponent,
+  NonNullable<MonitoringProviderType>
+>();
+
+// Register the Baselime provider
+monitoringProviderRegistry.register('baselime', async () => {
+  const { BaselimeProvider } = await import('@kit/baselime/provider');
+
+  return {
+    default: function BaselimeProviderWrapper({
+      children,
+    }: React.PropsWithChildren) {
+      return <BaselimeProvider enableWebVitals>{children}</BaselimeProvider>;
+    },
+  };
+});
+
+// Register the Sentry provider
+monitoringProviderRegistry.register('sentry', async () => {
+  const { SentryProvider } = await import('@kit/sentry/provider');
+
+  return {
+    default: function SentryProviderWrapper({
+      children,
+    }: React.PropsWithChildren) {
+      return <SentryProvider>{children}</SentryProvider>;
+    },
+  };
+});
+
+/**
+ * @name MonitoringProvider
+ * @description This component is used to wrap the application with the appropriate monitoring provider.
+ * @param props
+ * @returns
+ */
+export function MonitoringProvider(props: React.PropsWithChildren) {
+  if (!Provider) {
+    return <>{props.children}</>;
+  }
+
+  return <Provider>{props.children}</Provider>;
+}

packages/monitoring/api/src/get-monitoring-provider.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const MONITORING_PROVIDER = z
+  .enum(['baselime', 'sentry', ''])
+  .optional()
+  .transform((value) => value || undefined);
+
+export type MonitoringProvider = z.infer<typeof MONITORING_PROVIDER>;
+
+export function getMonitoringProvider() {
+  return MONITORING_PROVIDER.parse(process.env.NEXT_PUBLIC_MONITORING_PROVIDER);
+}

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

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

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

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+import { useMonitoring } from './use-monitoring';
+
+export function useCaptureException(error: Error) {
+  const service = useMonitoring();
+
+  useEffect(() => {
+    void service.captureException(error);
+  }, [error, service]);
+}

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { MonitoringContext } from '@kit/monitoring-core';
+
+/**
+ * @name useMonitoring
+ * @description Asynchronously load the monitoring service based on the MONITORING_PROVIDER environment variable.
+ * Use Suspense to suspend while loading the service.
+ */
+export function useMonitoring() {
+  return useContext(MonitoringContext);
+}

packages/monitoring/api/src/instrumentation.ts

@@ -0,0 +1,51 @@
+import { createRegistry } from '@kit/shared/registry';
+
+import {
+  MonitoringProvider,
+  getMonitoringProvider,
+} from './get-monitoring-provider';
+
+// Define a type for the instrumentation registration implementation
+type InstrumentationRegistration = {
+  register: () => Promise<void> | void;
+};
+
+// Create a registry for instrumentation providers, using literal strings 'baselime' and 'sentry'
+const instrumentationRegistry = createRegistry<
+  InstrumentationRegistration,
+  NonNullable<MonitoringProvider>
+>();
+
+// Register the 'baselime' instrumentation provider
+instrumentationRegistry.register('baselime', async () => {
+  const { registerInstrumentation } = await import(
+    '@kit/baselime/instrumentation'
+  );
+
+  return { register: registerInstrumentation };
+});
+
+// Register the 'sentry' instrumentation provider with a no-op registration, since Sentry v8 sets up automatically
+instrumentationRegistry.register('sentry', () => {
+  return {
+    register: () => {
+      return;
+    },
+  };
+});
+
+/**
+ * @name registerMonitoringInstrumentation
+ * @description Register monitoring instrumentation based on the MONITORING_PROVIDER environment variable using the registry internally.
+ */
+export async function registerMonitoringInstrumentation() {
+  const provider = getMonitoringProvider();
+
+  if (!provider) {
+    return;
+  }
+
+  const instrumentation = await instrumentationRegistry.get(provider);
+
+  return instrumentation.register();
+}

packages/monitoring/api/src/server.ts

@@ -0,0 +1 @@
+export * from './services/get-server-monitoring-service';

packages/monitoring/api/src/services/get-server-monitoring-service.ts

@@ -0,0 +1,52 @@
+import {
+  ConsoleMonitoringService,
+  MonitoringService,
+} from '@kit/monitoring-core';
+import { createRegistry } from '@kit/shared/registry';
+
+import {
+  MonitoringProvider,
+  getMonitoringProvider,
+} from '../get-monitoring-provider';
+
+// create a registry for the server monitoring services
+const serverMonitoringRegistry = createRegistry<
+  MonitoringService,
+  NonNullable<MonitoringProvider>
+>();
+
+// Register the 'baselime' monitoring service
+serverMonitoringRegistry.register('baselime', async () => {
+  const { BaselimeServerMonitoringService } = await import(
+    '@kit/baselime/server'
+  );
+
+  return new BaselimeServerMonitoringService();
+});
+
+// Register the 'sentry' monitoring service
+serverMonitoringRegistry.register('sentry', async () => {
+  const { SentryMonitoringService } = await import('@kit/sentry');
+
+  return new SentryMonitoringService();
+});
+
+// if you have a new monitoring provider, you can register it here
+//
+
+/**
+ * @name getServerMonitoringService
+ * @description Get the monitoring service based on the MONITORING_PROVIDER environment variable.
+ */
+export async function getServerMonitoringService() {
+  const provider = getMonitoringProvider();
+
+  if (!provider) {
+    console.info(
+      `No instrumentation provider specified. Returning console service...`,
+    );
+    return new ConsoleMonitoringService();
+  }
+
+  return serverMonitoringRegistry.get(provider);
+}