On this page4 sections
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);
}Related Documentation
For full implementation details, check out the monitoring documentation in our starter kits:
Current implementation
Ready to add monitoring to your SaaS? Get started with Achromatic.
