B2B-88: add starter kit structure and elements

packages/monitoring/api/README.md

@@ -0,0 +1,39 @@
+# Monitoring / @kit/monitoring
+
+Please set the following environment variable to your preferred monitoring provider:
+
+```
+NEXT_PUBLIC_MONITORING_PROVIDER=
+ENABLE_MONITORING_INSTRUMENTATION=true
+```
+
+## Available Providers
+
+To use a specific provider, set the `NEXT_PUBLIC_MONITORING_PROVIDER` environment variable to one of the following values:
+
+1. Baselime: `baselime`
+2. Sentry: `sentry`
+
+## Baselime
+
+To use Baselime, set the `NEXT_PUBLIC_MONITORING_PROVIDER` environment variable to `baselime`.
+
+```
+NEXT_PUBLIC_MONITORING_PROVIDER=baselime
+```
+
+## Sentry
+
+To use Sentry, set the `NEXT_PUBLIC_MONITORING_PROVIDER` environment variable to `sentry`.
+
+```
+NEXT_PUBLIC_MONITORING_PROVIDER=sentry
+```
+
+## Instrumentation
+
+To enable instrumentation, set the `ENABLE_MONITORING_INSTRUMENTATION` environment variable to `true`.
+
+```
+ENABLE_MONITORING_INSTRUMENTATION=true
+```

packages/monitoring/api/eslint.config.mjs

@@ -0,0 +1,3 @@
+import eslintConfigBase from '@kit/eslint-config/base.js';
+
+export default eslintConfigBase;

packages/monitoring/api/node_modules/@kit/baselime

@@ -0,0 +1 @@
+../../../baselime

packages/monitoring/api/node_modules/@kit/eslint-config

@@ -0,0 +1 @@
+../../../../../tooling/eslint

packages/monitoring/api/node_modules/@kit/monitoring-core

@@ -0,0 +1 @@
+../../../core

packages/monitoring/api/node_modules/@kit/prettier-config

@@ -0,0 +1 @@
+../../../../../tooling/prettier

packages/monitoring/api/node_modules/@kit/sentry

@@ -0,0 +1 @@
+../../../sentry

packages/monitoring/api/node_modules/@kit/shared

@@ -0,0 +1 @@
+../../../../shared

packages/monitoring/api/node_modules/@kit/tsconfig

@@ -0,0 +1 @@
+../../../../../tooling/typescript

packages/monitoring/api/node_modules/@types/react

@@ -0,0 +1 @@
+../../../../../node_modules/.pnpm/@types+react@19.1.4/node_modules/@types/react

packages/monitoring/api/node_modules/react

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/react@19.1.0/node_modules/react

packages/monitoring/api/node_modules/zod

@@ -0,0 +1 @@
+../../../../node_modules/.pnpm/zod@3.25.56/node_modules/zod

packages/monitoring/api/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@kit/monitoring",
+  "private": true,
+  "sideEffects": false,
+  "version": "0.1.0",
+  "scripts": {
+    "clean": "git clean -xdf ../.turbo node_modules",
+    "format": "prettier --check \"**/*.{ts,tsx}\"",
+    "lint": "eslint ..",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@kit/prettier-config",
+  "exports": {
+    "./server": "./src/server.ts",
+    "./instrumentation": "./src/instrumentation.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./components": "./src/components/index.ts"
+  },
+  "devDependencies": {
+    "@kit/baselime": "workspace:*",
+    "@kit/eslint-config": "workspace:*",
+    "@kit/monitoring-core": "workspace:*",
+    "@kit/prettier-config": "workspace:*",
+    "@kit/sentry": "workspace:*",
+    "@kit/shared": "workspace:*",
+    "@kit/tsconfig": "workspace:*",
+    "@types/react": "19.1.4",
+    "react": "19.1.0",
+    "zod": "^3.24.4"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  }
+}

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

packages/monitoring/api/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@kit/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}