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>;
+}