Error Reporting Using Sentry in Flutter
Imagine you are a solo developer, you worked on a new feature before you went for a vacation, deployed it to production a few days before the weekend and when the customers start actively using it, problems and complaints from the users start kicking in and you had already switched on your vacation mood. And as the common slogan goes, “customer is always right” you decide to give high priority to customer satisfaction over your holidays and revert to working mood. Could be frustrating right 😃?
Here is how reporting errors to a service could save you from unknown potential bugs or issues prior to customers since a working code equates to happy customers 🙂.
There are many services that you can report your code errors to. However, In this article you will learn how to monitor your applications and potential errors or bugs and report them using Sentry.
What’s Sentry?
Sentry is an application monitoring platform that enables developers to monitor, diagnose, fix, and optimize the performance of their code.
Lets Get Started.
1. Create an account with Sentry
If you don’t have an account with Sentry yet, create one here:
2. Create a new Sentry Flutter App
Next, Login into the Sentry account you just created to create the Flutter App.
Follow the steps below to successfully create the new project.
- Create the new project
After Login, select the create project icon to create a new project.
- Choose a Development Platform
There are various development platforms that support Sentry including Python, Express, Spring Boot, Android among others, however this article will be focusing only on Flutter. Therefore, select Flutter from the list.
- Set your default alert settings.
Next, set your default alert settings on the frequency of when and how to get alerts in case of any errors. In this article I will select the option of getting alerts on any new issue, but you can always choose any option you desire.
- Finally, give your project a name
In this article, I will give it the name flutter-sentry-test
. Then next, create the project.
2. Get a DSN from Sentry.
In order to report errors to Sentry, you need a DSN(Data Source Name) that will uniquely identify your app with the Sentry service. Therefore, after creating the project on Sentry, we will copy the DSN from the app we just created in the above steps.
To get the DSN, in the project you just created from above, navigate to the project settings and scroll down to client keys(DSN) as shown below:
Next, after selecting the client keys, the client keys tab will show up, from where you will copy the DSN from as shown below:
3. Create a Flutter app that you want to report its errors to Sentry.
This step assumes, you already have some hands-on on how to create a new Flutter project. If you are new to Flutter checkout the Official Flutter Documentation . You can also checkout my article Getting Started With Flutter
Now lets create a sample Flutter App that will be used to report errors to Sentry service.
On the terminal, type in the $ flutter create Command followed by the name of the app. In this case, we’ll use the name flutter_sentry_test.
$ flutter create flutter_sentry_test
Note: You can as well create the app on your respective IDE depending on your preference.
4. Import the Flutter Sentry package
Install Sentry in your application by adding this to your pubspec.yaml file
5. Configure & Initialize the Sentry SDK
In the main.dart file, import the sentry package.
Next, add configurations that will capture unhandled exceptions in the application. In this step, replace the DSN url with your Sentry DSN from the application you created in step 2. Get a DSN from Sentry above.
You can also configure the SENTRY_DSN
via the Dart environment variables by passing the --dart-define
flag to the compiler as shown in this sample:
--dart-define SENTRY_DSN = 'https://your-sentry.io DSN'
6. Verify
Finally, in this step, verify if the errors are sent to sentry by adding an intentional error to your code for testing purposes.
This will throw a State Error which will be sent to Sentry.io service
You can confirm this by navigating to your Sentry app
In my case here is the State Error that was sent to my Flutter Sentry application
Here is a demo of how the sample app sends errors to Sentry:
Checkout the full code snippet here:
By this way, you will be able to monitor and get error notifications and resolve them in advance before customers start complaining . Since working code == happy customers 😃.
Thank you 😍
Happy Fluttering 🙌.
Should you have any questions, feel free to ping me on Twitter or on the comment sections below.