Prince Tomar

Posted on Sep 7

Implementing Sentry for Error Monitoring in Flutter: A Complete Guide

Introduction

Error monitoring is a critical part of app development, helping you catch and fix bugs before they impact your users. Sentry is one of the most popular error-tracking services, and in this article, we'll explore how to integrate and use Sentry in your Flutter application.

Whether you're a beginner or an experienced developer, this guide will show you how to:

Set up Sentry for Flutter.
Capture different types of errors (UI, functional, asynchronous).
Handle errors for better app stability and debugging.

Step 1: Setting Up Sentry for Flutter

1.1. Create a Sentry Account

Before integrating Sentry into your Flutter app, you'll need to:

Create a free account at Sentry.io.
Create a new project for Flutter in Sentry.
Copy the DSN (Data Source Name) from your Sentry project settings.

Here's how to do that:

Go to Settings in your Sentry dashboard.
Navigate to Projects and select your project.
From the project sidebar, select the Client Keys (DSN) tab.
Copy your DSN and Security Header Endpoint, and paste them into your Flutter app's configuration.

The DSN is essential for connecting your Flutter app to Sentry.

1.2. Add Sentry to Your Flutter Project

In your pubspec.yaml file, add the following dependency:

dependencies:
  sentry_flutter: ^7.0.0 # Replace with the latest version

Run the following command to install the package:

flutter pub get

Step 2: Initializing Sentry in Flutter

Next, initialize Sentry at the start of your app. Modify your main.dart file like this:

import 'package:flutter/material.dart';
import 'package:sentry_flutter/sentry_flutter.dart';
import 'package:your_project/constants.dart'; // Your DSN in constants

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SentryFlutter.init(
    (options) {
      options.dsn = AppConstants.sentryDSN; // Your DSN
      options.tracesSampleRate = 1.0; // Performance monitoring
      options.profilesSampleRate = 1.0; // Optional profiling
      options.debug = true; // Debug logs during development
    },
    appRunner: () => runApp(const MyApp()), // Your app
  );

  sentryInit();
}

Explanation:

WidgetsFlutterBinding.ensureInitialized() makes sure that the Flutter framework is initialized before starting Sentry.
SentryFlutter.init connects Sentry with your app using the DSN and initializes the app.
tracesSampleRate allows for performance monitoring.

Step 3: Capturing Errors in Flutter

Flutter apps can encounter many types of errors. Let's configure Sentry to capture all errors in your app:

3.1. Handling Flutter UI and Build Errors

Add the following function to capture Flutter-specific UI errors:

void sentryInit() async {
  FlutterError.onError = (FlutterErrorDetails details) async {
    await Sentry.captureException(
      details.exception, 
      stackTrace: details.stack,
    );
    FlutterError.presentError(details);
  };
}

3.2. Handling Uncaught and Platform-Specific Errors

To capture platform-specific and uncaught errors, use the PlatformDispatcher:

PlatformDispatcher.instance.onError = (error, stack) {
  Sentry.captureException(error, stackTrace: stack);
  return true; // Prevent app from crashing
};

3.3. Handling Asynchronous Errors

Flutter supports async operations, but they might throw errors too. Use runZonedGuarded to catch those:

runZonedGuarded(
  () {
    // Run your app logic here
  },
  (error, stackTrace) async {
    await Sentry.captureException(error, stackTrace: stackTrace);
  },
);

3.4. Example: Manually Throwing an Error

Let’s test the setup by throwing an error intentionally:

FloatingActionButton(
  onPressed: () {
    throw Exception("This is a test error!");
  },
  child: const Icon(Icons.error),
),

Pressing the button will trigger an exception, and Sentry will capture it.

Step 4: Advanced Error Handling

4.1. Capturing Logs and Breadcrumbs

Sentry supports breadcrumbs, which provide context about events leading up to an error:

Sentry.addBreadcrumb(Breadcrumb(
  message: "User clicked on login button",
  level: SentryLevel.info,
));

4.2. Performance Monitoring

By setting the tracesSampleRate, you can also monitor your app’s performance (e.g., UI jank):

options.tracesSampleRate = 1.0; // Enables 100% performance tracing

4.3. Reporting Custom Events

You can also report specific events manually:

Sentry.captureMessage("This is a custom log message.");

Step 5: Testing and Debugging

Make sure to test the error handling by simulating different types of errors:

UI errors: Introduce issues in the widget tree (e.g., widget overflows).
Async errors: Trigger errors during async operations (e.g., API calls).
Manual errors: Use throw Exception() to simulate unexpected errors.

Check your Sentry dashboard to ensure all the errors are properly logged.

Conclusion

Integrating Sentry into your Flutter app helps you capture real-time crashes and performance issues in production. With the steps outlined:

You can monitor UI, functional, and asynchronous errors.
Gain insight into app performance issues.
Log important events and context with breadcrumbs.

Whether you're new to error handling or an experienced developer, Sentry is an invaluable tool for improving app stability and debugging efficiency.

If you have any questions, feel free to ask in the comments!

Happy coding! 🎉

DEV Community