See Demo

Saturday, March 15th 2025 · 1 min read

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

Related Documentation

For full implementation details, check out the monitoring documentation in our starter kits:

Relevant Commits

Ready to add monitoring to your SaaS? Get started with Achromatic.

Related Articles

Migrate from Lovable, v0 or Replit to a Next.js Codebase

Outgrown your AI-generated prototype? Learn how to transition from Lovable, v0, Bolt, or Replit to a scalable Next.js codebase. We have helped dozens of teams make this move.

How to Implement Metered Billing with Stripe in Next.js

Learn how to implement usage-based metered billing with Stripe in your Next.js SaaS. Covers metered subscriptions, usage reporting, and real-time tracking.

New Achromatic Starter Kits Are Here

Next.js 16, React 19, Better Auth, tRPC with Prisma or Drizzle ORM. Ship your SaaS faster than ever.