Expert Catcher SetUp For Flutter Apps

In Flutter, we use the Catcher plugin to integrate with Sentry, Crashanalytics, Slack, etc. to collect and send app crash reports. Since I just sent a correction to the Catcher Example as a patch, I am probably the best one to explain how to set up to use this Catcher plugin.

The Plugins

Catcher

Firebase Crashanalytics

Sentry dependency is already included with Catcher but Firebase Crashanalytics is not, so you need to include it if using the crash analytics features. To install Catcher in your pubspec:

dependencies:

catcher: ^0.6.7

If you need Firebase Crashanalytics features of Catcher then to install Firebase Crashanalytics in the pubspec it’s:

dependencies:

firebase_crashlytics: ^2.0.7

And, remember if using the Sentry features to sign for an App DSN from Sentry:

Catcher Basics

This example is re-using my Zones example detailed in my article:

Uncaught Exception Secrets, Zones https://readmedium.com/uncaught-exception-secrets-zones-c9759fa7a60e

First, we are going to set up some helper functions and classes. The first set is reportmode and catcher options:

If you want instead to use Slack instead of Sentry or Firebase Crashanalytics then you have to change the Catcher debugOptions to:

CatcherOptions debugOptions = CatcherOptions(SilentReportMode(), [

SlackHandler("<web_hook_url>", "#catcher",

username: "CatcherTest",

iconEmoji: ":thinking_face:",

enableDeviceParameters: true,

enableApplicationParameters: true,

enableCustomParameters: true,

enableStackTrace: true,

printLogs: true),

//ConsoleHandler()

]);

If you are using firebase crashanalytics then you put the handler for that right before the ConsoleHander.

PageReportMode, the full page report mode I am using, can include a stacktrace; so I have it set to true. In the catcher options, if you are using sentry then you have to declare your app DSN from sentry:

SentryHandler(

SentryClient(SentryOptions(dsn: 'YOUR DSN HERE')),

printLogs: true,

),

The catcherScreenShots emailaddies are:

String catcherEmailAddyOne = "[email protected]";

String catcherEmailAddyTwo = "[email protected]";

late Directory externalDir;

String catcherScreenShots = myCatcherScreenShotPath() as String;

Future<String> myCatcherScreenShotPath() async {

if (Platform.isAndroid || Platform.isIOS || Platform.isFuchsia) {

// ignore: cast_nullable_to_non_nullable

externalDir = await getExternalStorageDirectory() as Directory;

}

if (Platform.isMacOS || Platform.isLinux || Platform.isWindows) {

externalDir = await getApplicationDocumentsDirectory();

}

// ignore: unused_local_variable

String path = "";

return path = externalDir.path.toString();

}

Now for the firebase crashanalytics helper:

We have none of the setup plugins to collect device information, as Catcher already handles that set of requirements.

Now to show how to use these helper functions and classes.

The Call In Main

Then use them in main:

If you want to simplify things, you can use the simple short error widget that catcher provides by using this in your myapp dart file right before your home widget:

builder: (BuildContext context, Widget? widget) {

Catcher.addDefaultErrorWidget(

// ignore: avoid_redundant_argument_values

showStacktrace: true,

title: "Error Report",

description: "Error description",

// ignore: avoid_redundant_argument_values

maxWidthForSmallMode: 150,);

return widget!;

},

I use the Catcher full report page mode, so I need to set up a GlobalKey navigaorKey right before my Catcher block:

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

Then we replace runApp function with the catcher function and that is calling our helper functions and classes:

Catcher(

rootWidget: MyApp(navigatorKey: navigatorKey,),

debugConfig: debugOptions,

releaseConfig: releaseOptions,

navigatorKey: navigatorKey,

);

Then in the myapp dart file, I have to define GlobalKey:

final GlobalKey<NavigatorState> navigatorKey;

const MyApp({Key? key, required this.navigatorKey}) : super(key: key);

Then the navigatorKey:

@override

Widget build(BuildContext context) {

return MaterialApp(

// ignore: unnecessary_this

navigatorKey: this.navigatorKey,

title: myAppTitle,

Conclusion

I have shown you the preferred setup where the catcher report is manually email triggered to the email you provide along with the full page mode setup with the additional how to do the Sentry set up, firebase Crashanalytics, and Slack.

About Me, Fred Grott

I am a reformed Android, Java, Kotlin, and Front-End developer. I am a reformed ADHD’er and Code and Design Cowboy. And I am the nut starting to write a Flutter Dev App series of books during COIVD. Not only that, but I am organically creating my Flutter Developer Book chapters via Medium article writing, which is at:

The more formalized almost ready for book code is at:

And you can follow me on: