Network panel registers no requests after switching Devtools tabs

[elliette]

Steps to reproduce:

1. Open network panel
2. See that requests are showing up in panel
3. Switch to another DevTools panel
4. Switch back to the network panel

Expected: Requests should still show up in panel Actual: Requests do not show up in panel

FYI @srawlins

[elliette]

Note: Performing a hard refresh on DevTools then causes the missed requests to appear

[srawlins]

I honestly thought this was just a shortcoming (like, missing feature, not bug) of the network panel 😅 ; that you can't leave and go back.

[srawlins]

CC @bkonyi

[srawlins]

Ah yeah sort of a duplicate of https://github.com/flutter/devtools/issues/6804

[srawlins]

FWIW I think this is surprising behavior. If I am on the network page, and I hit record (or it's already recording because I just got there), and then I just click another tab, then I never indicated that I wanted the recording to stop! We could add a badge on the tab name to indicate we're still recording.

[elliette]

I honestly thought this was just a shortcoming (like, missing feature, not bug) of the network panel 😅 ; that you can't leave and go back.

Ah I see - you have to manually click "record" to start recording network requests. This seems quite counterintuitive and easy to miss. I think at the very least we should add a banner whenever network recording is paused. Something like:

[srawlins]

So right now:

1. When you start DevTools, and aren't looking at the Network screen, we are not recording network requests.
2. The first time you navigate to the Network screen (and only the first time), it starts recording automatically.

We could make these changes:

1. When you navigate away from the network screen, we keep recording network requests.
2. We display a badge in the app bar indicating that the tab is recording. (Or both? A permanent badge indicating not recording or yes recording? A simple emoji before the word Network? There is already that radial gauge icon. Make it dynamic? Color it red when recording? Change from the radial gauge to a red recording circle?

[srawlins]

(Oh the other indicator is the permanent spinner in the footer next to, e.g. "Showing 9 of 9 requests." I never see that thing.

But maybe when you're on other screens we could also indicate in the footer, "BTW I'M RECORDING NETWORK STUFF")

[elliette]

One other option in case continually recording network requests is too much overhead:

The first time you navigate to the Network screen we do not start recording automatically and instead display a banner telling you to record.

All other behavior would remain the same - navigating away from the network panel stops any recording, and users must explicitly start re-recording when they navigate back.

[srawlins]

Yeah when you jump to the CPU profiler for example (which is definitely a thing you would not run continuously for minutes on end, so slightly different situation), we have text in the center of the screen, very lonely, big space, saying "Press record to start! Press stop to stop!"

[bkonyi]

We definitely don't want to start recording network traffic without some indication that the user wants network profiling enabled (e.g., opening the network screen) since I don't believe we actually have a limit to the buffer on the dart:io side, which would result in unbounded memory usage if the application is making a lot of network requests, particularly if they're sending large request/response bodies.

[srawlins]

WDYT about this, @elliette ? It seems jarring to me, popping that banner up, and so close to where the pause/resume buttons are.

[mehtahardikr]

getting this following with latest version :

[  +35 ms] E/flutter (12385): [ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: 'dart:io/network_profiling.dart': Failed assertion: line 276 pos 12: '<optimized
out>': "-5476376629845470640" not found in "_idToSocketStatistic" map
[        ] E/flutter (12385): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:67:4)
[        ] E/flutter (12385): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:49:5)
[        ] E/flutter (12385): #2      _SocketProfile.collectStatistic (dart:io/network_profiling.dart:276:12)
[        ] E/flutter (12385): #3      _RawSocket.close.<anonymous closure> (dart:io-patch/socket_patch.dart:2414:22)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): #4      _RawSecureSocket._completeCloseCompleter (dart:io/secure_socket.dart:790:3)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): 
[  +40 ms] E/flutter (12385): [ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: 'dart:io/network_profiling.dart': Failed assertion: line 276 pos 12: '<optimized
out>': "-5476376629812315488" not found in "_idToSocketStatistic" map
[        ] E/flutter (12385): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:67:4)
[        ] E/flutter (12385): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:49:5)
[        ] E/flutter (12385): #2      _SocketProfile.collectStatistic (dart:io/network_profiling.dart:276:12)
[        ] E/flutter (12385): #3      _RawSocket.close.<anonymous closure> (dart:io-patch/socket_patch.dart:2414:22)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): #4      _RawSecureSocket._completeCloseCompleter (dart:io/secure_socket.dart:790:3)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): 
[        ] E/flutter (12385): [ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: 'dart:io/network_profiling.dart': Failed assertion: line 276 pos 12: '<optimized
out>': "-5476376629812311648" not found in "_idToSocketStatistic" map
[        ] E/flutter (12385): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:67:4)
[        ] E/flutter (12385): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:49:5)
[        ] E/flutter (12385): #2      _SocketProfile.collectStatistic (dart:io/network_profiling.dart:276:12)
[        ] E/flutter (12385): #3      _RawSocket.close.<anonymous closure> (dart:io-patch/socket_patch.dart:2414:22)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): #4      _RawSecureSocket._completeCloseCompleter (dart:io/secure_socket.dart:790:3)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): 
[   +2 ms] E/flutter (12385): [ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: 'dart:io/network_profiling.dart': Failed assertion: line 276 pos 12: '<optimized
out>': "-5476376629845476544" not found in "_idToSocketStatistic" map
[        ] E/flutter (12385): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:67:4)
[        ] E/flutter (12385): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:49:5)
[        ] E/flutter (12385): #2      _SocketProfile.collectStatistic (dart:io/network_profiling.dart:276:12)
[        ] E/flutter (12385): #3      _RawSocket.close.<anonymous closure> (dart:io-patch/socket_patch.dart:2414:22)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): #4      _RawSecureSocket._completeCloseCompleter (dart:io/secure_socket.dart:790:3)
[        ] E/flutter (12385): <asynchronous suspension>
[        ] E/flutter (12385): 

[srawlins]

getting this following with latest version

What is the version you are using?

[srawlins]

@mehtahardikr what makes you think your error is related to OP's issue? Your error is similar to one that was last seen in Flutter 3.32, but should be fixed in 3.35: https://github.com/flutter/devtools/issues/9317

[mehtahardikr]

its still happening even after upgrade.

[srawlins]

@mehtahardikr thanks for checking. What version of flutter are you now using?