Custom Monitoring Provider

How to extend the repo's monitoring layer with your own provider.

Only Sentry is registered by default, but the monitoring layer is extensible.

1. Add the Provider Name

Update the provider enum:

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

const MONITORING_PROVIDERS = [
  'sentry',
  'my-provider',
  '',
] as const;

2. Register the Client Provider

Add a client provider component registration:

packages/monitoring/api/src/components/provider.tsx

monitoringProviderRegistry.register('my-provider', async () => {
  const { MyProvider } = await import('@kit/my-monitoring/provider');
  return {
    default: function Wrapper({ children }: React.PropsWithChildren) {
      return <MyProvider>{children}</MyProvider>;
    },
  };
});

3. Register the Server Service

Add the server-side service:

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

serverMonitoringRegistry.register('my-provider', async () => {
  const { MyMonitoringService } = await import('@kit/my-monitoring');
  return new MyMonitoringService();
});

4. Configure the Environment

NEXT_PUBLIC_MONITORING_PROVIDER=my-provider

Notes

  • The repo is ESM. Use import, not require.
  • If the provider is not registered in both places, the client/server experience will diverge.
  • Leaving the env var empty keeps the console fallback.