Better Error Handling for Flutter — Error Stack

Modern error handling UI for Flutter to help you resolve bugs quicker

Error Stack Flutter Package for Error Handling

In this Medium story, I’ll share a new package to transform your error screen into a slick, modern, error handling UI with just 1 line of code. This package will work for Android, iOS, Linux, macOS, Windows and Web.

Introducing Error Stack for Flutter 🎉

You can install this package via pub.dev, the public repository is hosted on GitHub here.

Installing Error Stack

Add the following to your pubspec.yaml file:

dependencies:
  error_stack: ^1.7.3

Or with Flutter

flutter pub add error_stack

You may need to run flutter pub get after to make sure it’s added as a dependency in your project.

Initializing Error Stack 🛠️

To start using Error Stack, add ErrorStack.init(); to your main.dart file like in the example below.

// Add Error Stack to your main.dart file
...
import 'package:error_stack/error_stack.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ErrorStack.init(); // Initialize Error Stack
  runApp(MyApp());
}

Now, Error Stack will be enabled and ready to catch any errors thrown on your UI. Let’s simulate an error to test it out!

import 'package:flutter/material.dart';

class ErrorExampleWidget extends StatefulWidget {
  
  ErrorExampleWidget({super.key});

  @override
  createState() => _ErrorExampleWidgetState();
}

class _ErrorExampleWidgetState extends State<ErrorExampleWidget> {

  dynamic title = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Error Example")
      ),
      body: SafeArea(
         child: Container(
           child: Text(title), // title isn't a subtype of type String 💣
         ),
      ),
    );
  }
}

The ErrorExamplePage will throw an error because the Text widget only accepts a String for the first argument.

If you try to use this widget in your app, it will invoke Error Stack to appear.

Error Stack in Light and Dark Mode

Features 🚀

• Instant Google Search from the UI to resolve the error
• Copy error message to clipboard
• Light and Dark mode support
• Debug & Release mode error screens
• Customizable Error Page for Release mode

Error Stack Console Log

Instant Google Search

My favourite feature is the ability to instantly search Google for the error, if you tap “Search Google for this error” it’ll take you straight to the search page so you can learn how to resolve the error.

Restarting the App

Another useful feature is the ability to restart the app in Debug mode. This means you won’t need to manually kill the app and re-build it.

Release Mode UI

If your app crashes in release mode, Error Stack will display a different UI to your users. However, if you’d like to use your own UI, add errorWidget to the init method like in the example below.

await ErrorStack.init(
  errorWidget: (errorDetails) => MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text("An error occurred"),
      ),
    ),
  )
);

Closing out

I hope you found this Medium story insightful! Error Stack’s been a lot of fun to work on, I’ve already got a few ideas to make it even better.

You can check out the public repository on GitHub here if you’re interested in how things are handled under the hood. Feel free to try it in your project and send me any feedback.

Thanks for reading,

Anthony Gordon

https://linktr.ee/agordn