loading...
Cover image for Error reporting in Flutter made easy with Sentry and Catcher

Error reporting in Flutter made easy with Sentry and Catcher

bvdwalt profile image Bennie van der Walt Updated on ・2 min read

Flutter packages we will be using

  1. Catcher
  2. Sentry Flutter Client

Setup Sentry

  1. Go to Sentry.io and register (signing in with your GitHub account is quite easy).
  2. After registering you will be able to create your application.
  3. Get your application's DSN URL under your app in Sentry (you will need this later when setting up the Sentry Client in your Flutter code so keep it somewhere)

Add dependencies to your Flutter project

In your pubspec.yaml add the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  ...other dependencies...
  catcher: ^0.3.14
  sentry: ">=3.0.0 <4.0.0"
Enter fullscreen mode Exit fullscreen mode

Using Catcher and Sentry in your Flutter project

In your main.dart file add the following block of code inside your main method and be sure to add your DSN URL instead of the placeholder:

import 'package:catcher/catcher.dart';
import 'package:sentry/sentry.dart';

...

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  CatcherOptions debugOptions = CatcherOptions(SilentReportMode(), [ConsoleHandler()]);

  CatcherOptions releaseOptions = CatcherOptions(SilentReportMode(), [SentryHandler(SentryClient(dsn: 'https://___.ingest.sentry.io/___'))]);

  Catcher(MyApp(), debugConfig: debugOptions, releaseConfig: releaseOptions);
}

Enter fullscreen mode Exit fullscreen mode

The last line where you call Catcher and pass in your application's entry widget will replace the line that normally reads runApp(MyApp).

What is especially handy about Catcher is that it will internally run your app with runZonedGuarded, so you don't have to do that in your main.dart file, which leaves this file much cleaner.

Catcher takes in a debugConfig as well as a releaseConfig object. The debug config will be used when your app is running in debug mode, you can see above that my example will just log any errors to the console.
In production my example code will silently report the error to my DSN endpoint without confirmation from the user. You also have a choice to use the DialogReportMode()

Live example app

A full working example can be found on my GitHub inside the repository spacex_flights which has been released to the Play Store here: Launch Tracker - SpaceX

Discussion

pic
Editor guide