How to Set Up Bugsly in React

Overview

Running React in production without error monitoring is like driving without a dashboard. You need visibility into what's failing and why.

Bugsly provides a first-class React integration for error monitoring that takes minutes to set up and immediately starts delivering value.

Installation and Setup

Start by adding Bugsly to your project:

npm install @bugsly/react

Next, initialize the SDK in your application:

import * as Bugsly from "@bugsly/react";

Bugsly.init({
  dsn: "YOUR_BUGSLY_DSN",
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
});

const root = createRoot(document.getElementById("root"));
root.render(<Bugsly.ErrorBoundary><App /></Bugsly.ErrorBoundary>);

How It Works

Once initialized, the Bugsly React SDK automatically instruments your application. Here's what happens behind the scenes:

• Automatic error capture: Unhandled exceptions and promise rejections are caught and reported with full stack traces
• Context enrichment: Each event includes environment data, request details, and user context where available
• Intelligent grouping: Similar errors are grouped together so you see issues, not individual events
• Performance data: Transaction traces help you understand the performance impact of errors

Customizing Your Integration

For React projects, we recommend enabling these additional features after the basic setup:

1. Source maps (if applicable) — upload source maps during your build so Bugsly can display readable stack traces
2. User feedback — prompt users who encounter errors for additional context
3. Custom tags — add business-specific metadata to events for filtering and analysis

Bugsly's dashboard will become your team's go-to tool for understanding what's happening in your React production environment.

Next Steps

Once error monitoring is live, set up issue ownership rules to automatically assign errors to the right team. Configure integration with your project management tool to create tickets from Bugsly issues. Enable weekly reports to track your team's progress on reducing error rates across releases.