See Demo
General
Monitoring

Overview

Learn how to monitor your applications.

Monitoring is key in any production app - it helps you track performance and quickly spot and fix problems including:

  • Performance Metrics – Leverage Next.js's instrumentation hook for performance reporting.
  • Client-Side Exceptions – Automatically capture uncaught exceptions in the browser.
  • Server-Side Exceptions – Automatically capture server-side exceptions using Next.js's built-in error handling.

Providers

In the packages/monitoring/provider folder you can find the configured provider. There are multiple providers available:

Console

Learn how to use the console for monitoring.

Sentry

Learn how to use Sentry for monitoring.

Manual Tracking

While most monitoring features like instrumentation or global-error exception catching are set up by default, you can still track specific events or errors manually.

Client

To track an event:

monitoring-client-example.tsx
'use client';

import { useMonitoring } from '@workspace/monitoring/hooks/use-monitoring';

export function ClientComponent() {
  const provider = useMonitoring();
  const onClick = () => {
    provider.captureEvent('my-event');
  };
}

Or an error in a try-catch block:

monitoring-client-example.tsx
'use client';

import { useMonitoring } from '@workspace/monitoring/hooks/use-monitoring';

export function ClientComponent() {
  const provider = useMonitoring();
  const onClick = () => {
    try {
      // Some code
    } catch (e) {
      provider.captureError(e);
    }
  };
}

Server

To track an event:

monitoring-server-example.ts
import { MonitoringProvider } from '@workspace/monitoring/provider';

MonitoringProvider.captureEvent('my-event');

Or a user:

monitoring-server-example.ts
import { MonitoringProvider } from '@workspace/monitoring/provider';

MonitoringProvider.setUser(user);

Or an error in a try-catch block:

monitoring-server-example.ts
import { MonitoringProvider } from '@workspace/monitoring/provider';

try {
  // Some code
} catch (e) {
  MonitoringProvider.captureError(e);
}