Set Up Bugsly for React

1. Install the SDK

2. Configure Bugsly

Add the following to your application entry point. Replace the DSN with your project DSN from the Bugsly dashboard.

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

Bugsly.init({
  dsn: "https://your-dsn@bugsly.dev/1",
  environment: "production",
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Bugsly.browserTracingIntegration(), Bugsly.replayIntegration()],
});

function App() {
  return (
    <Bugsly.ErrorBoundary fallback={<p>Something went wrong</p>}>
      <YourApp />
    </Bugsly.ErrorBoundary>
  );
}

3. Verify It Works

Trigger a test error in your application and check your Bugsly dashboard. The error should show up as an issue within a few seconds.

Want to check your DSN before touching any code? From a macOS, Linux or WSL terminal, this sends one real error without any SDK (replace your-dsn with the key from your DSN):

curl -sS -X POST "https://bugsly.dev/api/1/envelope/" \
  -H "X-Sentry-Auth: Sentry sentry_version=7, sentry_key=your-dsn" \
  --data-binary $'{}\n{"type":"event"}\n{"level":"error","platform":"other","exception":{"values":[{"type":"CurlTestError","value":"Hello from my terminal"}]}}'

Choosing between tools? Our React error tracking comparison covers error boundaries, source maps and session replay.

Frequently Asked Questions