Using Bugsnag

Bugsnag is a stability monitoring solution which 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

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

Issues grouped by root cause and sorted by business impact
Customer segmentation
A/B testing and experiment analysis

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

Powerful diagnostic data
Full stacktraces
Automatic breadcrumbs

Get Started

Add Bugsnag to your native 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.

Add Bugsnag to your Expo project

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.

# using npx (recommended)
npx bugsnag-expo-cli init

# using npm (if npx isn't available)
npm install --global bugsnag-expo-cli
bugsnag-expo-cli init

Note: npx (included with npm 5.2+) is a tool that lets you invoke command line tools from npm without installing them first.

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:

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 provided and will be picked up automatically by the TypeScript compiler when you import @bugsnag/expo.

Next steps

Read the full integration guide
View @bugsnag/js, the library powering Bugsnag’s JavaScript error reporting, on GitHub
Explore the example project
Get support for your questions and feature requests