Saturday, March 15th 2025
Monitoring
We integrated monitoring into the monorepo with configurable providers capturing Next.js metrics and errors via instrumentation.ts and global-errors.tsx, with built-in support for manual tracking.
We've introduced monitoring to the monorepo with support for two providers:
- Console (default)
- Sentry
This integration utilizes instrumentation.ts
to capture additional Next.js metrics, including requests and errors. Sentry automatically instruments React Server Components (RSC), API routes, and server actions for seamless tracking.
Switching Monitoring Providers
Console (Default)
To use the console provider, ensure the following configuration in packages/monitoring/provider/index.ts
:
packages/monitoring/provider/index.ts
export { default as MonitoringProvider } from './console';// export { default as MonitoringProvider } from './sentry';
Sentry
- Create a Sentry account.
- Update
packages/monitoring/provider/index.ts
:
packages/monitoring/provider/index.ts
// export { default as MonitoringProvider } from './console';export { default as MonitoringProvider } from './sentry';
- Configure the following environment variables in
apps/dashboard/.env
:
apps/dashboard/.env
MONITORING_SENTRY_ORG='your-org-name'MONITORING_SENTRY_PROJECT='your-project'MONITORING_SENTRY_AUTH_TOKEN=NEXT_PUBLIC_MONITORING_SENTRY_DSN=
Manual Event & Error Tracking
Client-Side
Capture an event:
client-component.tsx
'use client';import { useMonitoring } from '@workspace/monitoring/hooks/use-monitoring';const provider = useMonitoring();provider.captureEvent('my-event');
Capture an error in a try-catch block:
client-component.tsx
'use client';import { useMonitoring } from '@workspace/monitoring/hooks/use-monitoring';const provider = useMonitoring();try { // Some ```} catch (e) { provider.captureError(e);}
Server-Side
Track an event:
server-monitoring.ts
import { MonitoringProvider } from '@workspace/monitoring/provider';MonitoringProvider.captureEvent('my-event');
Track an error:
server-monitoring.ts
import { MonitoringProvider } from '@workspace/monitoring/provider';try { // Some code} catch (e) { MonitoringProvider.captureError(e);}