Specifications
I was tasked with implementing error tracking in our Flutter (mobile) app, with Sentry. Here’s the breakdown:
- Add Sentry to our Flutter app in a way that it automatically detects errors without having to manually put in any code.
- Look into other ways Sentry can add value to our app beyond just handling error reporting.
Sentry Breakdown
Sentry has a nice site, and amazing documentation.
- Sentry Site - You can sign up to Sentry here, which automatically navigates you to setting up an organization.
- Sentry Documentation - Where you go to implement and debug Sentry. After setting up an organization and signing in, all the documentation will be catered to your organization, such as the example code blocks having your org’s keys inserted.
- sentry_flutter - The plug-in used to integrate Sentry with your Flutter app.
Getting Started
Before you can do anything, you need to get your organization set up on Sentry, you can do so by going to the Sentry Sign-up Page and filling in your organization’s details. After signing up, there’s a handy tutorial that guides you through the entire set-up, after which you’ll receive your organization’s sentry key, which is used below.
Implementing Sentry
Implementing Sentry on the Flutter side is actually incredibly easy, here’s how you do it. In the main.dart file, found in /lib, import sentry_flutter like so: import 'package:sentry_flutter/sentry_flutter.dart';.
After that in the main() function, just slap this in, replacing the default runApp(MyApp()):
await SentryFlutter.init(
(options) => options.dsn = kDebugMode ? "" : 'https://yourkeyhere.ingest.sentry.io/numbers',
appRunner: () => runApp(MyApp())
);This wraps your app with the Sentry error catching code, so your Flutter errors will automatically be scooped up with no further input necessary.
(Pro-tip: The kDebugMode ternary prevents errors during development from flooding your issue tracker, ask me how I know.)
Sentry… Scope?
Sentry has a ‘Scope’ parameter, which is basically an extra bit of info you can attach to every error log Sentry catches. You can set it up with whatever you like, but in our case, I put our user details in:
Sentry.configureScope((scope) {
scope.user = SentryUser(id: _customerProfile['_id'], username: _customerProfile['name'], email: _customerProfile['email']);
});That way, whenever you get your error logs on Sentry, you’ll see from whom it came, making it slightly easier to resolve repeat customers’ errors, especially if it’s database-related.
Creating your own errors
Let’s say you have a try catch to prevent a Flutter error, but it’s still behavior you want to log in Sentry. All you have to do is catch the error yourself, by adding this to your catch block:
try {
<try and fail to do something here>
}
catch(err, stackTrace) {
await Sentry.captureException(
err,
stackTrace: stackTrace
);
}Whenever your code fails and enters that catch block, Sentry will scoop it up and send it back to its database, which you can view on your Organization’s issue tracker.
Is that all?
Yes and no. In our current app implementation, this is just about all we need, but Sentry offers so much more, I’ll list a few:
- Attaching a screenshot of the moment of the crash to your error log.
- Adding ‘breadcrumbs’ to certain events, which logs the steps the user took before the crash happened.
- Automated performance monitoring, to figure out which part of your app should be refactored to go faster.
- Setting up automated alerts to inform you that your app is imploding when it inevitably happens.
The Sentry documentation sets all of this up in a clear and fun to read fashion, I’ve just listed what I personally found useful and implemented in our app, but if you want even more, feel free to look further into the documentation.