paint-brush
Power of Sentry + Expo: Catch Bugs Before They Bite and Supercharge Your Startup's Successby@agrittiwari
1,452 reads
1,452 reads

Power of Sentry + Expo: Catch Bugs Before They Bite and Supercharge Your Startup's Success

by agrit420June 1st, 2023
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

Expo is a tooling available to build cross-platform applications using single codebase. With underlying framework React Native, you can target web, android and iOS, all at the same time. Integrating Sentry in your product enables you to receive realtime errors and crash reports.
featured image - Power of Sentry + Expo: Catch Bugs Before They Bite and Supercharge Your Startup's Success
agrit420 HackerNoon profile picture

The regular day of a startup juggles between two states, namely shipping or fixing.


You can catch any developer working at any time (day or night), they are usually pushing code to production as long as it is functional or fixing the code in production that they shipped after marking it as functional.


It’s funny, but this is what makes working at a startup fun.

Devs pushing feature to Production

This blog highlights the advantage of using sentry and Expo to push your code to production quickly.


Using Expo:

  • Expo is a tooling available to build cross-platform applications using single codebase. With underlying framework React Native, you can target web, android and iOS, all at the same time. What does a startup wants is the most feature pushed with least amount of cost to it. And Expo is the one solution stop.


  • The developer experience is extremely awesome and the most native complexity is hidden under the Expo layer.


  • You can simply start your project by

    npx create-expo-app hackernight
    cd hackernight
    


    You can run npx expo prebuild to generate your native build code folders. easy to build features dependent on native code, and you can also managed it via config plugins.


    This support is only extended by another tooling provided by Expo is EAS (Expo Application Services).


    So you don’t have to worry about managing releases for your mobile apps as well. You can manage your deployment pipelines right from your terminal.


    You can create channels/ environments like development, staging and production. This makes it easy to manage the app releases for the testing and quality analysis in no-strings attached environment.

Using Sentry

  • Integrating Sentry in your product enables you to receive realtime errors and crash reports. You can use it to monitor performance of your over metrics and events you wish to optimise.


  • You can install it in the app by

npx expo install sentry-expo
npx expo install expo-application expo-constants expo-device expo-updates @sentry/react-native


  • Now you have to initialize Sentry SDK in your app,
Sentry.init({
  dsn:   <_YOUR_DSN_HERE_>,
  enableInExpoDevelopment: true,
  debug: true, // If `true`, Sentry will try to print out useful debugging information if something goes wrong with sending the event. Set it to `false` in production
  autoSessionTracking: true,
  enableNative: true,
});


After all Its always breaking production

You can expect to have the fighting duo at your disposal in your startup arsenal.


There are many features of EXPO startups today uses, one specifically is ability to write code once, run everywhere and second, manage the CI/CD pipeline right from your terminal via EAS


I am working at a startup, using expo and integrated Sentry. We have faced realtime crashes, issues, solved the bug and shipped the solution literally in minutes because of our dynamic duo.

Here is how we were able to do so we faced during our fast iteration and faster shipment days.


  1. Sentry captures errors, exceptions, crashes, transactions, and generally anything that goes wrong in your application in real-time. Before our internal user decides to report the bug, we get the notification about it with a detailed report.

  2. There is in-depth stack trace on every issue that our user faced. It keeps history of all the events that happened before the actual code break and sends the event data to DSN

    Stack trace

  3. This detailed dashboard help us to pinpoint the cause of error, we debug it , ship the solution and then move to improve debugging on the app by planning our actionmap for future and unforseeable bugs.


  4. There is a feature called tags, which give a detailed visual idea about the bug (like machine/device, OS version, API version, release version, environment ) and in Sentry dashboard one can customize a tag the errors based on the type of origin, an error particularly has.

    Debug via Tags



You can debug the issue as fast as you understand it. The data about the issue only makes it faster to solve.

Debugging via Sentry is a great to way to understand the internals of a stack that we use and gives us opportunity to work on improving our understanding about the programming concepts and helps us design better systems. This has significantly helped our startup in having fast fixes and faster deployments.