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

CVE-2026-23864 - React Server Components DoS Vulnerabilities

Multiple denial of service vulnerabilities discovered in React Server Components. All Achromatic starter kits updated to patched versions.

Introducing shadcn-modal-manager

We open sourced shadcn-modal-manager - a lightweight, type-safe modal manager for shadcn/ui built with pure React and zero dependencies.

Agent Skills Support: npm for AI Coding Agents

Achromatic now supports Vercel Agent Skills, bringing 10+ years of React and Next.js optimization patterns to AI coding assistants like Claude Code, Cursor, and Codex.