SentryUserInteractionWidget sometimes finds the wrong widget

[sstasi95]

Platform:

• Flutter Android or iOS

IDE:

• VSCode

_split-debug-info and obfuscate (Flutter Android or iOS) or CanvasKit (Flutter Web):

• Disabled

Platform installed with:

• pub.dev

Output of the command flutter doctor -v below:

[✓] Flutter (Channel stable, 3.3.9, on macOS 13.1 22C65 darwin-arm, locale en-IT)
• Flutter version 3.3.9 on channel stable at /Users/simone/dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b8f7f1f986 (5 weeks ago), 2022-11-23 06:43:51 +0900
• Engine revision 8f2221fbef
• Dart version 2.18.5
• DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/simone/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.3)
• 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
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.74.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.56.0

[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.124

[✓] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!

The version of the SDK (See pubspec.lock):
6.18.1

---

I have the following issue:

Sometimes tapping an element makes SentryUserInteractionWidget find the wrong widget when there is another page 'behind' in the navigation stack with a tappable element at the same position.

Steps to reproduce:

• Run the example app given below, navigate to page2 and tap 'Page 2 button'

Code to reproduce:

import 'package:flutter/material.dart';
import 'package:sentry_flutter/sentry_flutter.dart';

Future<void> main() async {
  final globalKey = GlobalKey();
  await SentryFlutter.init(
    (options) {
      options
        ..dsn = 'dsn'
        ..enableUserInteractionBreadcrumbs = true
        ..beforeBreadcrumb = (breadcrumb, {hint}) {
          if (breadcrumb!.category == 'ui.click') {
            print('Breadcrumb ui.click: ${breadcrumb.data}');
          }
          return breadcrumb;
        };
    },
    appRunner: () {
      return runApp(
        SentryUserInteractionWidget(
          key: globalKey,
          child: const MyApp(),
        ),
      );
    },
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      routes: {'page2': (context) => const Page2()},
      home: const Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  void _goToPage2(BuildContext context) {
    Navigator.of(context).pushNamed('page2');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(50),
          child: ListView(
            children: [
              MaterialButton(
                key: const ValueKey('Page1 button'),
                onPressed: () => print('page1 button'),
                color: Colors.green,
                child: const Text('Page1 button'),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _goToPage2(context),
        tooltip: 'page2',
        child: const Icon(Icons.navigate_next),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(50),
          child: ListView(
            children: [
              MaterialButton(
                key: const ValueKey('Page2 button'),
                onPressed: () => print('page2 button'),
                color: Colors.red,
                child: const Text('Page2 button'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Actual result:

• Console output 'Breadcrumb ui.click: {view.id: Page1 button, view.class: MaterialButton}'

Expected result:

• Console output 'Breadcrumb ui.click: {view.id: Page2 button, view.class: MaterialButton}'

Tested on both iOS and Android with different devices. On Android it seems a bit better, meaning that it finds the wrong button less often.

Thanks,

Simone

[marandaneto]

@sstasi95 thanks for raising this, I will test it out.

[marandaneto]

Indeed, I can confirm the bug, looking into it.
@ueman have you experienced that? any suggestions?

[ueman]

No clue, sorry.

[marandaneto]

I'm trying to find out where the code for the arena leaves (Gesture disambiguation) -> https://docs.flutter.dev/development/ui/advanced/gestures#gesture-disambiguation
Maybe I can implement my own but I have to understand how Flutter does it.

Edit: looking into https://github.com/flutter/flutter/blob/025ce117b7eda83a1402c2b74372a290cfa6da4e/packages/flutter/lib/src/gestures/arena.dart