HomeGuidesReferenceLearn
ArchiveExpo SnackDiscordForumsChangelog

Using Bugsnag

A guide on installing and configuring Bugsnag for end-to-end error reporting and analytics.

Bugsnag is a stability monitoring solution that provides rich, end-to-end error reporting and analytics to reproduce and fix errors with speed and precision. Bugsnag supports the full stack with open-source libraries for 50+ platforms, including React Native.

With Bugsnag, developers and engineering organizations can:

  • Stabilize: Innovate faster by knowing when to build new features vs. fix bugs.

    Use release health dashboard, stability scores and targets, built-in alerts via email, Slack, PagerDuty, and more.

  • Prioritize: Improve customer experience by identifying and prioritizing bugs that have the greatest impact on app stability.

    Analyze issues grouped by root cause and sorted by business impact, customer segmentation, A/B testing and experiments results.

  • Fix: Increase productivity by spending less time on reproducing and fixing bugs.

    Utilize powerful diagnostic data, full stacktraces and automatic breadcrumbs.

Get Started

Add Bugsnag to your Expo apps to automatically capture and report JavaScript errors. Follow the guide below and read the blog post announcing Bugsnag’s Expo integration. If you’re new to Bugsnag, you can create an account or request a demo.

Installation and configuration

The easiest way to add Bugsnag to your Expo project is to use our CLI. Alternatively you can follow the manual setup guide.

Terminal
- npx bugsnag-expo-cli init

This will install the @bugsnag/expo notifier, add some configuration to app.json and initialize Bugsnag in your application.

Capturing React render errors

An error boundary component is included which you can use to wrap your application. When render errors happen, they will be reported to Bugsnag along with any React-specific info that was available at the time.

To catch all render errors in your application and show a custom error screen to your users, follow this example:

App.jsx
const ErrorBoundary = Bugsnag.getPlugin('react');

export default () => (
  <ErrorBoundary FallbackComponent={ErrorView}>
    <App />
  </ErrorBoundary>
);

class App extends React.Component {
  // Your main app component
}

class ErrorView extends React.Component {
  // This component will be displayed when an error boundary catches an error
}

See React’s documentation on Error Boundaries to find out more.

TypeScript support

Type definitions are provided and will be picked up automatically by the TypeScript compiler when you import @bugsnag/expo.

Next steps