Try it free

Configure Session Replay for Flutter

  • Latest Dynatrace
  • How-to guide
  • 6-min read
  • Preview

Preview

Preview

Session Replay for Flutter is available as a preview. Register for the preview program to get access to this feature.

Session Replay for Flutter is not available for RUM Classic or Dynatrace Managed. The preview is available to customers with Latest Dynatrace and DPS licensing.

This page describes how to activate and customize Session Replay for your Flutter apps.

Use Session Replay

Session Replay on Flutter enables you to capture your customers' interactions with your mobile application and replay each tap, swipe, and screen rotation in a movie-like experience.

Use Session Replay on crashes

Additionally, you can use it to get additional context for crash analysis in the form of video-like screen recordings that replay the user actions preceding a detected crash.

Prerequisites

Make sure that your system meets the following requirements:

  • Dynatrace version 1.303+.
  • Registered for the Session Replay for Flutter preview program.
  • Dynatrace Flutter plugin (dynatrace_flutter_plugin) version 3.349.1+ with the dynatrace_flutter_plugin_replay package added.
  • Real User Monitoring enabled for your application.
  • Active Dynatrace Digital Experience Monitoring license.
  • The web UI URL has a trusted certificate.

Supported technologies and known restrictions

  • Flutter 3.24.0+ and Dart 3.3.0+ is supported.
  • Android API level 23+ is supported for the Android build target.
  • iOS 15+ is supported for the iOS build target.
  • Session Replay is not available for other cross-platform frameworks such as Cordova, Xamarin, and .NET MAUI.
  • WebView content is handled differently depending on the platform:
    • On Android, WebView content is unmasked by default at every masking level unless you explicitly mask it (see Configure custom masking).
    • On iOS, WebView content isn't captured and appears blank in the replay.
  • We recommend not using other crash reporting tools together with Dynatrace Session Replay.
  • Image data is always transmitted over any available network connection. There's no option to restrict transmission to Wi-Fi-only connections.
  • Session Replay can capture only certain events. However, if you need to track a specific view or event that is not supported by default, you can capture a custom event.
  • You can play back the user sessions recorded with Session Replay only in certain browsers.

Session Replay is a video-like reconstruction of user interaction with a mobile application based on captured events and data. Because of this approach, a replayed session can differ from the actual user experience.

Known issues:

  • Pure style changes, such as color or opacity changes only, aren't detected as capture triggers, so these transitions might not appear in the replay.
  • Text fields with obscureText set to true are always masked, regardless of the configured masking level.

Activate Session Replay on Flutter and adjust number of recorded sessions

Before you start this procedure, make sure you have completed all steps described in Initial setup for Flutter frontends to add the Dynatrace Flutter plugin and generate your dynatrace.config.yaml file.

  1. Go to Experience Vitals Experience Vitals > Overview.
  2. Select Mobile to view all mobile frontends.
  3. Select the frontend you want to configure.
  4. Switch to the Settings tab.
  5. Under Enablement and cost control:
    1. Turn on Real User Monitoring Classic or both Real User Monitoring Classic and Real User Monitoring.
    2. Select Session Replay Classic or both Session Replay Classic and Session Replay, and then enter the new Capture rate of session replay value:
      • 100 percent to capture all sessions.
      • Lower than 100 percent to capture randomly selected sessions.
    3. To capture all sessions with a crash regardless of the capture rate, select Session Replay for crashes Classic or both Session Replay for crashes Classic and Session Replay for crashes.
  6. From the application settings, select Instrumentation wizard, and then select Flutter.
  7. Follow the steps in the instrumentation wizard.

Session Replay starts automatically the next time your app calls Dynatrace().start(...). You don't need to add any additional initialization code.

Mask sensitive data

All masking happens in the end-user device, so that no sensitive data leaves the device.

Data masking levels

Session Replay for Flutter comes with three predefined masking levels:

  • Safest: all the editable text fields, images, labels, and switches are masked.
  • Safe: all the editable text fields are masked.
  • Custom: by default, masks the same elements as Safest, but you can decide exactly which widget types should be masked. For details, see Configure custom masking.

Change masking level

By default, the plugin applies the Safest masking level. To change it to the Safe or Custom level, set the maskingConfiguration on SessionReplay(). If you've opted for the Custom level, see Configure custom masking for details on how to set which widgets should be masked.

Example 1: Change masking level to Safe

Use the following code to set the masking level to Safe.

SessionReplay().maskingConfiguration = DynatraceMaskingConfiguration.safe();

Example 2: Change masking level to Custom

Use the following code to set the masking level to Custom. For additional options, see Configure custom masking.

SessionReplay().maskingConfiguration = DynatraceMaskingConfiguration.custom();

Example 3: Change masking level to Custom with no masked widget types

Use the following code to set the masking level to Custom with no widget types masked by default. For additional options, see Configure custom masking.

SessionReplay().maskingConfiguration = DynatraceMaskingConfiguration.custom(widgetTypes: {});

Configure custom masking

If you set the data masking level to Custom, you can use additional API methods to decide which widgets should be masked. You can:

  • Mask widget types.
  • Mask or unmask individual widgets.
  • Change the text masking style.

Mask widget types

You can enable or disable masking for specific widget types, such as text fields, images, and switches.

SessionReplay().maskingConfiguration = DynatraceMaskingConfiguration.custom()
    .withMaskedWidgetType<Image>() // Adds Image as a masked widget type
    .withoutMaskedWidgetType<Switch>(); // Removes Switch as a masked widget type

Mask or unmask individual widgets

You can also mask or unmask a specific widget by wrapping it, regardless of its widget type or the active masking level.

SessionReplayMask(
  child: Text('Sensitive data'),
)
SessionReplayUnmask(
  child: Text('Not sensitive'),
)

SessionReplayMask always takes priority over both SessionReplayUnmask and the active masking configuration.

Change the text masking style

By default, masked text is covered with a solid color block. To replace masked text with asterisks instead, set textMaskingMode to TextMaskingMode.asterisks.

SessionReplay().maskingConfiguration = DynatraceMaskingConfiguration.safest(
  textMaskingMode: TextMaskingMode.asterisks,
);

Activate Session Replay logs

Session Replay logs are part of the general Dynatrace Flutter plugin logs. For details, see Debug logging.

Capture custom events

Session Replay records only certain events. However, you can track an event that is not supported by default. This triggers a manual screenshot capture tagged with the given name.

SessionReplay().trackCustomEvent('User logged');

Troubleshooting

  • User sessions are not recorded at all
  • User sessions are recorded, but Session Replay is not available

For setup and configuration issues specific to the Dynatrace Flutter plugin, see Troubleshooting.

Related topics

  • Session Replay
Related tags
Digital Experience