Next.js

DebuggAI's Next.js SDK wraps the Sentry SDK, offering powerful error tracking and monitoring capabilities for your Next.js applications. This guide will help you get started with the Next.js SDK.

You can (and should!) use both DebuggAI and Sentry together.

Installation

Install the DebuggAI Next.js SDK using npm:

npm install @debugg-ai/nextjs

Prerequisites

Before using the DebuggAI Next.js SDK, make sure you have:

• Next.js 12.x or later
• An Ingest URL from DebuggAI (sign up at app.debugg.ai)

Basic Usage

Here’s how to use the DebuggAI Next.js SDK

Initialize the SDK

First, initialize the DebuggAI React SDK. Place the initialization in your pages/_app.js or pages/_app.tsx:

import { init } from '@debugg-ai/nextjs';
import { useEffect } from 'react';

// Initialize DebuggAI
function MyApp({ Component, pageProps }) {
  useEffect(() => {
    init({
      dsn: 'your-dsn-here', // Replace with your DebuggAI/Sentry DSN
      environment: process.env.NEXT_PUBLIC_ENVIRONMENT || 'development',
      hostName: 'johns-local',
      release: 'your-app-release', // Optional: specify app release version
      tracesSampleRate: 1.0, // Optional: enable performance monitoring
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Error Boundary

To automatically capture any errors in your Next.js app, you can use DebuggAI's ErrorBoundary component, just like in React. You can wrap your component tree with it in pages/_app.js:

import { ErrorBoundary } from '@debugg-ai/react';

function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary fallback={<div>An error has occurred</div>}>
      <Component {...pageProps} />
    </ErrorBoundary>
  );
}

export default MyApp;

The ErrorBoundary component catches JavaScript errors in any of its child components and logs them to DebuggAI.

Advanced Configuration

Adding Context

You can add custom context to your error reports by using Sentry’s withScope function, which is also supported by DebuggAI:

import { captureException, withScope } from '@debugg-ai/react';

try {
  throw new Error('Something went wrong');
} catch (e) {
  withScope(scope => {
    scope.setExtra('custom_info', 'value');
    captureException(e);
  });
}

Manual Error Logging

You can also log errors manually by calling the captureException method.

import { captureException } from '@debugg-ai/react';

// Log an error manually
try {
  // Some code
  throw new Error('Manual error');
} catch (error) {
  captureException(error);
}

Performance Monitoring

To monitor the performance of your Next.js app, DebuggAI automatically integrates Sentry’s performance tracing. You can enable it by setting the tracesSampleRate in the initialization:

init({
  dsn: 'your-dsn-here',
  tracesSampleRate: 1.0, // 0.0 to 1.0 (higher values enable more detailed performance tracking)
});

Handling Specific Errors

You can also handle specific types of errors or log specific events like route changes:

import { captureMessage } from '@debugg-ai/react';

captureMessage('User navigated to dashboard');

Best Practices

1. Initialize Early: Initialize the SDK as early as possible in your application (typically in your root pages/_app.js or pages/_app.tsx).
2. Error Boundaries: Use the ErrorBoundary component to capture uncaught JavaScript errors.
3. Add Context: Use withScope to add extra information or custom context to your error reports.
4. Monitor Performance: Use performance monitoring to track the user experience and identify bottlenecks.
5. Redact Sensitive Data: Configure redaction if handling sensitive data, especially in production environments.

Troubleshooting

If you encounter issues:

1. Verify DSN: Ensure that the DSN provided is correct and active.
2. Network Connectivity: Check your network connectivity to the DebuggAI/Sentry ingestion endpoint.
3. Check Logs: Check the browser’s console logs for any issues during SDK initialization.
4. Next.js Version: Ensure that your project is using Next.js 12.x or later for full compatibility.

Next Steps

• Learn about Error Tracing to see how DebuggAI helps you debug issues in your Next.js app.
• Explore Analytics to get insights into your app’s performance and user experience.
• Check out Click to Fix to automatically fix common issues directly from your DebuggAI dashboard.