Skip to content

Commit 302725a

Browse files
committed
update frames tracking docs
1 parent 9005cf4 commit 302725a

File tree

1 file changed

+30
-12
lines changed

1 file changed

+30
-12
lines changed

docs/platforms/flutter/integrations/slow-and-frozen-frames-instrumentation.mdx

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,15 @@ Unresponsive UI and animation hitches annoy users and degrade the user experienc
1212
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.
1313
Learn more about frame delay [here](https://develop.sentry.dev/sdk/performance/frames-delay/).
1414

15+
<Note>
16+
17+
Frames tracking instrumentation is available on **iOS**, **macOS** and **Android**.
18+
19+
</Note>
20+
1521
## Instrumentation Behaviour
1622

17-
Frame metrics are manually calculated using the [addPersistentFrameCallback](https://api.flutter.dev/flutter/scheduler/SchedulerBinding/addPersistentFrameCallback.html) API from the Flutter SDK.
23+
Frame metrics are manually calculated by implementing a custom `WidgetsFlutterBinding` which allows us to measure the duration between [handleBeginFrame](https://api.flutter.dev/flutter/scheduler/SchedulerBinding/handleBeginFrame.html) and [handleDrawFrame](https://api.flutter.dev/flutter/scheduler/SchedulerBinding/handleDrawFrame.html).
1824
Frame duration tracking in Sentry's Flutter SDK begins automatically when a span starts. It continuously measures each frame's render time until the span finishes, then calculates and attaches frame metrics to the completed span.
1925

2026
## Prerequisite
@@ -26,22 +32,34 @@ Before starting, ensure:
2632

2733
## Configure
2834

29-
This type of instrumentation is automatically enabled. There is no need for further configuration.
35+
This instrumentation is automatically enabled through two integrations:
36+
- The `WidgetsFlutterBindingIntegration` which provides the custom binding for frame tracking
37+
- The `FramesTrackingIntegration` which processes and attaches the frame metrics to spans
38+
39+
In most cases, no additional configuration is required.
40+
41+
### Early Widgets Binding Initialization
42+
43+
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.
44+
45+
Example:
46+
```dart {2}
47+
void main() {
48+
SentryWidgetsFlutterBinding.ensureInitialized();
49+
// ... rest of your initialization code
50+
}
51+
```
3052

3153
## Additional Configuration
3254

3355
### Disabling the Instrumentation
3456

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

37-
```dart
38-
import 'package:flutter/widgets.dart';
39-
import 'package:sentry_flutter/sentry_flutter.dart';
40-
41-
Future<void> main() async {
42-
await SentryFlutter.init(
43-
(options) => options.enableFramesTracking = false,
44-
appRunner: () => runApp(MyApp()),
45-
);
46-
}
59+
```dart {3}
60+
await SentryFlutter.init(
61+
(options) {
62+
options.enableFramesTracking = false
63+
},
64+
);
4765
```

0 commit comments

Comments
 (0)