# Slow and Frozen Frames and Frames Delay Instrumentation | Sentry for Flutter

Unresponsive UI and animation hitches annoy users and degrade the user experience. This integration can help. Set it up and identify these problems in your app by tracking and showing **slow frames**, **frozen frames**, and **frame delay** metrics for spans. Learn more about frame delay [here](https://develop.sentry.dev/sdk/performance/frames-delay/).

Frames tracking instrumentation is available on **iOS**, **macOS** and **Android**.

## [Instrumentation Behaviour](https://docs.sentry.io/platforms/dart/guides/flutter/integrations/slow-and-frozen-frames-instrumentation.md#instrumentation-behaviour)

The frames tracking instrumentation measures frame metrics (slow frames, frozen frames, and frame delay) for each span. To calculate these metrics, the SDK uses a custom `WidgetsFlutterBinding` that measures the duration between [handleBeginFrame](https://api.flutter.dev/flutter/scheduler/SchedulerBinding/handleBeginFrame.html) and [handleDrawFrame](https://api.flutter.dev/flutter/scheduler/SchedulerBinding/handleDrawFrame.html) to determine each frame's render time.

Frame duration tracking begins automatically when a span starts. The integration continuously measures frame durations until the span finishes, then calculates and attaches the frame metrics to the completed span.

## [Prerequisite](https://docs.sentry.io/platforms/dart/guides/flutter/integrations/slow-and-frozen-frames-instrumentation.md#prerequisite)

Before starting, ensure:

1. The Sentry Flutter SDK is initialized. Learn more [here](https://docs.sentry.io/platforms/dart/guides/flutter.md#configure).
2. Tracing is set up. Learn more [here](https://docs.sentry.io/platforms/dart/guides/flutter/tracing.md).

## [Configure](https://docs.sentry.io/platforms/dart/guides/flutter/integrations/slow-and-frozen-frames-instrumentation.md#configure)

This instrumentation is automatically enabled through two integrations:

* The `WidgetsFlutterBindingIntegration` which provides the custom binding for frame tracking
* The `FramesTrackingIntegration` which processes and attaches the frame metrics to spans

In most cases, no additional configuration is required.

If `WidgetsFlutterBinding` is initialized before `SentryFlutter.init`, then this instrumentation will not work automatically.

### [Early Widgets Binding Initialization](https://docs.sentry.io/platforms/dart/guides/flutter/integrations/slow-and-frozen-frames-instrumentation.md#early-widgets-binding-initialization)

If you need to initialize the widgets binding earlier than `SentryFlutter.init()`, you must call `SentryWidgetsFlutterBinding.ensureInitialized()` manually. Note that using a different custom binding will prevent this instrumentation from working properly.

Example:

```dart
void main() {

  SentryWidgetsFlutterBinding.ensureInitialized();

  // ... rest of your initialization code
}
```

## [Additional Configuration](https://docs.sentry.io/platforms/dart/guides/flutter/integrations/slow-and-frozen-frames-instrumentation.md#additional-configuration)

### [Disabling the Instrumentation](https://docs.sentry.io/platforms/dart/guides/flutter/integrations/slow-and-frozen-frames-instrumentation.md#disabling-the-instrumentation)

Set `enableFramesTracking` to `false` in the options to disable the instrumentation.

```dart
await SentryFlutter.init(
  (options) {

    options.enableFramesTracking = false

  },
);
```