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

  1. Create a Sentry account.
  2. Update packages/monitoring/provider/index.ts:
packages/monitoring/provider/index.ts
// export { default as MonitoringProvider } from './console';export { default as MonitoringProvider } from './sentry';
  1. 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);}

Relevant Commits