B2B-88: add starter kit structure and elements

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