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:

https://sentry.io/signup

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:

JosephineAkello/flutter_sentry_test

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.