Add Queued Microtasks tab to Performance View #9239

derekxu16 · 2025-06-03T20:27:46Z

This PR adds a Queued Microtasks tab to the Performance View, which allows a user to see details about the microtasks scheduled in an isolate's microtask queue. This tab currently only appears when DevTools is connected to a Flutter or Dart app started with --profile-microtasks.

derekxu16 · 2025-06-03T21:50:27Z

packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

@@ -23,7 +23,11 @@ TODO: Remove this section if there are not any general updates.

 ## Performance updates

-TODO: Remove this section if there are not any general updates.
+- Added a Queued Microtasks tab to the Performance View, which allows a user to


I'm not sure how these names should be capaitalized.

kenzieschmoll · 2025-06-04T16:00:03Z

...ls_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_controller.dart

+  final _status = ValueNotifier<QueuedMicrotasksControllerStatus>(
+    QueuedMicrotasksControllerStatus.empty,
+  );
+  ValueListenable<QueuedMicrotasksControllerStatus> get status => _status;
+
+  final _queuedMicrotasks = ValueNotifier<QueuedMicrotasks?>(null);
+  ValueListenable<QueuedMicrotasks?> get queuedMicrotasks => _queuedMicrotasks;
+
+  final _selectedMicrotask = ValueNotifier<Microtask?>(null);
+  ValueListenable<Microtask?> get selectedMicrotask => _selectedMicrotask;


order getters before private field: https://github.com/flutter/devtools/blob/master/STYLE.md#order-of-getters-and-setters

kenzieschmoll · 2025-06-04T16:02:01Z

...ls_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_controller.dart

+  Future<void> handleSelectedFrame(FlutterFrame frame) async {}
+
+  @override
+  Future<void> setOfflineData(OfflinePerformanceData offlineData) async {}


OfflinePerformanceData should be able to take the data from this tab and serialize it for offline exports of the performance page data. Then this method should set the _queuedMicrotasks and _selectedMicrotask from offline data when this method is called. See the other performance feature controllers for an example.

kenzieschmoll · 2025-06-04T16:03:52Z

...devtools_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_view.dart

+  }
+}
+
+class QueuedMicrotasksTabControls extends StatelessWidget {


this helper widget seems unnecessary. Can we just use RefreshQueuedMicrotasksButton directly below where this widget is currently used?

kenzieschmoll · 2025-06-04T16:05:00Z

...devtools_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_view.dart

+// run earliest is at index 0 of the returned list. We use those indices of the
+// returned list to sort the entries of the microtask selector, so that they
+// they also appear in ascending order of when they will be dequeued.
+typedef IndexedMicrotask = (int, Microtask);


can we used named elements in this record so that we don't have to use $1 and $2?

The documentation should also be using ///

kenzieschmoll · 2025-06-04T16:06:02Z

...devtools_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_view.dart

+  final void Function(Microtask?) _setSelectedMicrotask;
+
+  @override
+  Widget build(BuildContext context) => Column(


is this column necessary or can it be removed?

kenzieschmoll · 2025-06-04T16:18:03Z

packages/devtools_app/lib/src/screens/performance/performance_screen.dart

+  const PerformanceScreenBody({
+    super.key,
+    // This allows the body to modify the value that gets returned by the
+    // enclosing [PerformanceScreen]'s `showIsolateSelector` [ValueListenable].


This makes me wonder generally whether this feature belongs in the Performance screen or the CPU profiler screen. Can you explain the user journey of how a user would use this feature to debug a performance problem, and what type of performance problem would the user be encountering?

The only known use case of this feature is checking if there's a bug causing an isolate's microtask queue to get stuck. This was requested in b/329176605. The user journey of using this feature would look something like:

The user notices that their app can become unresponsive

The user determines a reproduction that can make their app enter an unresponsive state

The user starts their app with flutter run --profile-microtasks and connects their app to DevTools

The user makes their app enter an unresponsive state

The user navigates to the Queued Microtasks tab

The user selects an isolate in the isolate selector

The user takes a snapshot of the selected isolate's microtask queue

The user notes down the ID of the microtask scheduled to run next

The user waits for some amount of time (microtasks should drain quickly when the queue is not stuck, so waiting for a second is enough)

The user takes another snapshot of the selected isolate's microtask queue

If the ID of the microtask scheduled to run next is the same as the one noted down in step 8, there is a bug causing the microtask queue to be stuck

If a bug was discovered in step 11, report it in the Dart SDK repo. Otherwise, repeat steps 6-12 until all isolates have been checked.

kenzieschmoll · 2025-06-04T16:23:40Z

...vtools_app/test/screens/performance/queued_microtasks/queued_microtasks_controller_test.dart

+        createMockPerformanceControllerWithDefaults(),
+      );
+    });
+


after adding offline support for this feature, please add tests for setOfflineData here.

kenzieschmoll · 2025-06-04T16:23:58Z

...vtools_app/test/screens/performance/queued_microtasks/queued_microtasks_controller_test.dart

+    });
+
+    test('refresh', () async {
+      await controller.refresh();


add expect statements for what the state should have been prior to calling refresh

kenzieschmoll · 2025-06-04T16:25:44Z

packages/devtools_app/test/screens/performance/tabbed_performance_view_test.dart

+          await tester.tap(find.text('Timeline Events'));
+          await tester.pumpAndSettle();
+          await tester.tap(find.text('Queued Microtasks'));


why do we have to switch tabs? we should just be able to call pumpAndSettle to trigger a rebuild, and if that doesn't work then maybe there is a bug?

kenzieschmoll · 2025-06-04T16:28:05Z

flutter-candidate.txt

@@ -1 +1 @@
-36ea2bdeab611e908967b6fa57659998f600a2cb
+ead0a01bb9707b60097679a43a6262a8979f4a89


please use a version of Flutter that has been checked into google3. The latest is 7cfbf1b000546a88f7c1a5b0c154a51fd97147f8

bkonyi · 2025-06-04T16:02:02Z

...ls_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_controller.dart

+        .getQueuedMicrotasks(isolateId);
+    _queuedMicrotasks.value = queuedMicrotasks;
+
+    return;


Unnecessary return.

bkonyi · 2025-06-04T16:03:40Z

...devtools_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_view.dart

+class RefreshQueuedMicrotasksButton extends StatelessWidget {
+  const RefreshQueuedMicrotasksButton({
+    super.key,
+    required QueuedMicrotasksController controller,


Nit: I'd just make _controller public and use required this.controller here.

bkonyi · 2025-06-05T15:00:37Z

...devtools_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_view.dart

+// run earliest is at index 0 of the returned list. We use those indices of the
+// returned list to sort the entries of the microtask selector, so that they
+// they also appear in ascending order of when they will be dequeued.
+typedef IndexedMicrotask = (int, Microtask);


The documentation should also be using ///

bkonyi · 2025-06-05T15:01:35Z

...devtools_app/lib/src/screens/performance/panes/queued_microtasks/queued_microtasks_view.dart

+  );
+}
+
+class StackTraceView extends StatelessWidget {


Nit: s/StackTraceView/MicrotaskStackTraceView/

bkonyi · 2025-06-05T15:04:50Z

packages/devtools_app/lib/src/service/vm_flags.dart

@@ -16,6 +16,9 @@ const profiler = 'profiler';
 // Defined in SDK: https://github.com/dart-lang/sdk/blob/master/runtime/vm/profiler.cc#L36
 const profilePeriod = 'profile_period';

+// Defined in SDK: https://github.com/dart-lang/sdk/blob/main/runtime/vm/microtask_mirror_queues.cc#L18-L23.


I'm not sure it's worth including the line numbers here, especially if we're using a URL that doesn't point to a specific commit.

bkonyi · 2025-06-05T15:05:45Z

packages/devtools_app/test/screens/performance/tabbed_performance_view_test.dart

+        vmFlags: [
+          (
+            flagName: profileMicrotasks,
+            value: shouldEnableMicrotaskProfiling ? 'true' : 'false',


Nit: shouldEnableMicrotaskProfiling.toString()

derekxu16 force-pushed the queued-microtasks branch 2 times, most recently from b3c3d89 to d85106e Compare June 3, 2025 21:37

derekxu16 commented Jun 3, 2025

View reviewed changes

Add Queued Microtasks tab to Performance View

0f3ea7e

derekxu16 force-pushed the queued-microtasks branch from d85106e to 0f3ea7e Compare June 3, 2025 22:04

derekxu16 marked this pull request as ready for review June 3, 2025 22:12

derekxu16 requested review from kenzieschmoll and a team as code owners June 3, 2025 22:12

kenzieschmoll requested a review from bkonyi June 4, 2025 15:59

kenzieschmoll reviewed Jun 4, 2025

View reviewed changes

bkonyi reviewed Jun 5, 2025

View reviewed changes

		@@ -1 +1 @@
		36ea2bdeab611e908967b6fa57659998f600a2cb
		ead0a01bb9707b60097679a43a6262a8979f4a89

Add Queued Microtasks tab to Performance View #9239

Are you sure you want to change the base?

Add Queued Microtasks tab to Performance View #9239

Uh oh!

Conversation

derekxu16 commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

derekxu16 Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

derekxu16 commented Jun 3, 2025 •

edited

Loading

derekxu16 Jun 4, 2025 •

edited

Loading