React

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

You can (and should!) use both of them together

Installation

Install the DebuggAI React SDK using npm:

npm install @debugg-ai/react

Prerequisites

Before using the DebuggAI React SDK, make sure you have:

• React 16.x or later
• An API key from DebuggAI (sign up at app.debugg.ai)
• A valid Sentry DSN (DebuggAI leverages Sentry's SDKs)

Basic Usage

Here’s how to use the DebuggAI React SDK, which wraps the functionality of Sentry:

Initialize the SDK

First, initialize the DebuggAI React SDK (which internally configures the Sentry SDK):

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

// Initialize DebuggAI (which is a wrapper around Sentry)
init({
  dsn: 'your-dsn-here', // Replace with your DebuggAI/Sentry DSN
  environment: process.env.REACT_APP_ENVIRONMENT || 'development', // Optional: specify environment
  release: 'your-app-release', // Optional: specify app release version
  tracesSampleRate: 1.0, // Optional: enable performance monitoring
});

Error Boundary

To automatically capture any errors in your React app, wrap your component tree with DebuggAI's ErrorBoundary component (which is based on Sentry's ErrorBoundary):

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

function App() {
  return (
    <ErrorBoundary fallback={<div>An error has occurred</div>}>
      <YourApp />
    </ErrorBoundary>
  );
}

export default App;

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, similar to Sentry’s API:

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 React 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 index.js or App.js).
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. React Version: Ensure that your project is using React 16.x or later for full compatibility.

Next Steps

• Learn about Error Tracing to see how DebuggAI helps you debug issues in your React 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.