Session replay doesn't work for inapp webview

[esji-kim]

Platform

Flutter Mobile iOS, Flutter Mobile Android

Obfuscation

Disabled

Debug Info

Disabled

Doctor

[✓] Flutter (Channel stable, 3.24.5, on macOS 14.7.1 23H222 darwin-arm64, locale ko-KR)
    • Flutter version 3.24.5 on channel stable at /Users/esji/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision dec2ee5c1f (3 weeks ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/esji/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16B40
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.95.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Version

8.10.1

Steps to Reproduce

1. package.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  amplitude_flutter: ^4.0.0-beta.5
  firebase_analytics: ^11.3.3
  firebase_app_installations: ^0.3.1+4
  firebase_core: ^3.6.0
  firebase_crashlytics: ^4.1.3
  firebase_dynamic_links: ^6.0.8
  firebase_messaging: ^15.1.3
  firebase_performance: ^0.10.0+8
  firebase_remote_config: ^5.1.3
  flutter_hooks: ^0.20.5
  flutter_inappwebview: ^6.1.5
  flutter_local_notifications: ^18.0.1
  in_app_review: ^2.0.9
  permission_handler: ^11.3.1
  sentry_flutter: ^8.10.1

2. main.dart

void main() {
  runZonedGuarded<Future<void>>(() async {
    WidgetsFlutterBinding.ensureInitialized().addPostFrameCallback((_) async {
        // permission requests  
    });

  await SentryFlutter.init(
      (options) => options
        ..dsn = 'https://[email protected]/...'
        ..environment = isDev ? 'development' : 'production'
        ..tracesSampleRate = 0
        ..profilesSampleRate = 0
        ..experimental.replay.maskAllImages = false
        ..experimental.replay.sessionSampleRate = 1.0
        ..experimental.replay.onErrorSampleRate = 1.0,
      appRunner: () => runApp(MaterialApp(
        home: Scaffold(body: InAppWebView(initialUrlRequest: URLRequest(url: WebUri.uri(Uri.https('google.com', '/'))))),
      )),
    );
  }, (error, stack) => FirebaseCrashlytics.instance.recordError(error, stack));
}

Expected Result

It is supposed that replay screen is same with user's view. For instance, when webview indicates Google, Google's search input should be found in session replay.

Actual Result

Just webview background is shown.

Are you willing to submit a PR?

None

[vaind]

It seems like the widget you're using for webview doesn't render to image (replay is based on screenshots). It looks like you're using flutter_inappwebview. I've also tested with webview_flutter which doesn't seem to have this issue. Maybe you could give it a go and see if it solves your issue.

One important thing to note with regards to webview - webview content is not masked because we don't have a mechanism that would allow us to recognize the content from Flutter. Therefore, we normally suggest masking the whole webview masked anyway by adding a custom masking rule to Sentry SDK init(): options.experimental.privacy.mask<InAppWebView>();

[esji-kim]

Thanks for checking. I also tested webview_flutter, but it doesn't work. Technically both flutter_inappwebview and webview_flutter uses WKWebView on iOS and WebView on Android.

Even I changed sentry version to 8.11.0-beta.2, it failed.

I've also tested with webview_flutter which doesn't seem to have this issue.

If you tested same version with me, there may be possibility of some conflicts between dependencies. Until now, when turned off Amplitude, it cannot recover the functionality.

[vaind]

Thanks for checking. I also tested webview_flutter, but it doesn't work. Technically both flutter_inappwebview and webview_flutter uses WKWebView on iOS and WebView on Android.

Even I changed sentry version to 8.11.0-beta.2, it failed.

I've also tested with webview_flutter which doesn't seem to have this issue.

If you tested same version with me, there may be possibility of some conflicts between dependencies. Until now, when turned off Amplitude, it cannot recover the functionality.

I've tried them on this branch a while ago and retried last week when triaging this issue. Maybe you can spot a difference in your setup and what I did on that branch, although it really is very simple. Note: there's also a video player, you can ignore that.