Debugging

next-forge uses two different tools for finding and fixing bugs: Sentry for error capture and VSCode for debugging.

Sentry

Sentry is used for error tracking and performance monitoring. It helps identify, debug, and resolve issues by providing detailed error reports, stack traces, and performance metrics across both server and client environments. When an error occurs, Sentry captures the full context including the user's browser information, the sequence of events that led to the error, and relevant application state.

Configuration

Sentry is configured and managed in three key places:

The instrumentation.ts file in your Next.js project initializes Sentry for both Node.js and Edge runtime environments, configuring the DSN (Data Source Name) that routes error data to your Sentry project.

The sentry.client.config.ts file configures Sentry for the client environment. This includes settings like the sample rate for errors and sessions, and the integrations to use.

The next.config.ts file imports shared Sentry-specific settings through withSentryConfig. This enables features like source map uploads for better stack traces and automatic instrumentation of Vercel Cron Monitors. The configuration also optimizes bundle size by tree-shaking logger statements and hiding source maps in production builds.

Manual Usage

If you want to capture a specific exception rather than letting it bubble up to Sentry, you can use the captureException function:

import { captureException } from '@sentry/nextjs';
 
captureException(new Error('My error message'));

Tunneling

The tunnelRoute option in @repo/next-config's Sentry configuration routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. This can increase your server load as well as your hosting bill.

VSCode

VSCode is used for debugging the application. The .vscode/launch.json file contains the configuration for the debugger and is configured to work for all the apps in the monorepo.

To use the debugger, simply open the app in VSCode (or any VSCode-compatible editor) and go to the Debug panel (Ctrl+Shift+D on Windows/Linux, ⇧+⌘+D on macOS). Select a launch configuration, then press F5 or select Debug: Start Debugging from the Command Palette to start your debugging session.