-
Notifications
You must be signed in to change notification settings - Fork 337
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Offline support for Network page #8332
base: master
Are you sure you want to change the base?
Offline support for Network page #8332
Conversation
@hrajwade96 is this PR ready for review or is this still a work in progress? |
@kenzieschmoll just finishing up few things, I will mark it ready soon |
…into network_screen_offline_support
packages/devtools_app/lib/src/screens/network/network_screen.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_controller.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_controller.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_controller.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_controller.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_controller.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_controller.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/offline_network_data.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/network_screen.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/offline_network_data.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/screens/network/offline_network_data.dart
Outdated
Show resolved
Hide resolved
@kenzieschmoll can you run the checks again, I have done the above steps, formatted the code and updated the release notes as well. |
I pushed a minor change that I had missed pushing earlier which was the primary cause of the checks failing. |
Looks like you still have some failing tests. Based on the errors it looks like you may need to set a global in the test setup for the failing tests: You can verify the tests pass locally by running |
Getting closer. Another failing test: Consider running all tests locally |
Yes I've fixed this one, I ran locally now there's just one test (below one) failing locally but mostly it's timezone bound, hence although it's failing locally, it should pass here.
|
A couple things look like they are still missing from this PR. I checked the code out locally and noticed that we do not have a way to export the offline network data. This is because the return Row(
children: [
if (!widget.offline) ...[
StartStopRecordingButton(
recording: _recording,
onPressed:
() async => await widget.controller.togglePolling(!_recording),
tooltipOverride:
_recording
? 'Stop recording network traffic'
: 'Resume recording network traffic',
minScreenWidthForTextBeforeScaling: double.infinity,
gaScreen: gac.network,
gaSelection: _recording ? gac.pause : gac.resume,
),
const SizedBox(width: denseSpacing),
ClearButton(
minScreenWidthForTextBeforeScaling:
_NetworkProfilerControls._includeTextWidth,
gaScreen: gac.network,
gaSelection: gac.clear,
onPressed: widget.controller.clear,
),
const SizedBox(width: denseSpacing),
DownloadButton(
tooltip: 'Download as .har file',
minScreenWidthForTextBeforeScaling:
_NetworkProfilerControls._includeTextWidth,
onPressed: widget.controller.exportAsHarFile,
gaScreen: gac.network,
gaSelection: gac.NetworkEvent.downloadAsHar.name,
),
const SizedBox(width: denseSpacing),
// TODO(kenz): fix focus issue when state is refreshed
Expanded(
child: SearchField<NetworkController>(
searchController: widget.controller,
searchFieldEnabled: hasRequests,
searchFieldWidth:
screenWidth <= MediaSize.xs
? defaultSearchFieldWidth
: wideSearchFieldWidth,
),
),
const SizedBox(width: denseSpacing),
Expanded(
child: StandaloneFilterField<NetworkRequest>(
controller: widget.controller,
filteredItem: 'request',
),
),
const SizedBox(width: denseSpacing),
OpenSaveButtonGroup(
screenId: ScreenMetaData.performance.id,
onSave: widget.controller.exportData,
),
],
],
); Once I added these buttons and then attempted to export network data, I am seeing an exception:
|
@kenzieschmoll, I wanted to clarify my understanding based on your comment:
|
I dug a little deeper on the errors I am encountering. These exceptions occur even for the "review history" behavior. Have you tested with requests that have an error? Some of the fields on We should also have test coverage for this case. |
Ok will check this case and also add test coverage for this |
Yes you are correct sorry for the confusion. I meant to update the comment about the flag with my edit. For the next PR (adding the buttons behind a flag), I will make that change since I already have a PR prepared. I'll leave the flag off, and then you can make your change to support full offline support for the network page, which requires exporting the data to a JSON file so that it can be reloaded into DevTools in the existing offline mechanism. The majority of the work for that is done in this PR, but the final piece is supporting the full serialization / deserialization to / from JSON.
This is a requirement of adding full offline support for the Network page (where you can export a file and load it back into DevTools later). The offline framework in DevTools serializes to json and loads files from json. |
Oh, okay, no problem. Thanks! I had the idea before, but this made it much clearer.
I thought we are going to add support to re-import the .har file which we can download (like #4470 (comment)). Is it like har and json both formats will be supported for importing? Or now are you thinking to add support for only json for importing back. |
From the work in this PR, adding support for re-importing as JSON seems like it is 90% there. Is that correct? If I understand correctly there is not much work left to support the full JSON serialization / deserialization. If this is almost complete, then I think we should push this across the finish line. This is also good for consistency with how offline data is supported for other DevTools screens. For deserializing the .har files, this work has not started yet, right? At this point, it seems like this would take more work to support, and if the JSON serialization / deserialization is robust and well-tested, then it may not make sense to support importing both types of files. Bringing my comment from #4470 to this thread for reference:
To re-state in the context of this PR, we could consider adding support for importing the .har file to DevTools as a follow up. However, we may be limited if the .har format doesn't allow us to add metadata that we would have in the JSON format (things like filters or other data specific to the DevTools network profiler), so it may not be worth doing. As a user of this tool, I see the user journey as such:
|
packages/devtools_app/lib/src/shared/http/http_request_data.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/shared/http/http_request_data.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/shared/http/http_request_data.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/lib/src/shared/http/http_request_data.dart
Outdated
Show resolved
Hide resolved
packages/devtools_app/test/screens/network/offline_data_test.dart
Outdated
Show resolved
Hide resolved
Yes correct, I added the remaining piece (disconnected network body) in this PR itself , now we don't need another PR for this. (note: I haven't added OpenSaveButtonGroup for import/export cta since you would be raising a PR with new UI for that, also btw we need to add a call to_fetchFullDataBeforeExport before the json is downloaded just like in case of har).
Ahh ok, at that time I interpreted this comment a little differently regarding the follow-up PR on re-importing .har Hmm, After completing this PR, I'll analyze the approach to add this support and get back to you. Once I've done that, we can discuss whether it's worth pursuing. Does that work?
Hmm, yes got it, thanks |
@@ -82,6 +89,30 @@ class NetworkScreen extends Screen { | |||
} | |||
} | |||
|
|||
class DisconnectedNetworkScreenBody extends StatelessWidget { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
did you mean to include these changes in this PR? Have you verified that the network data can be exported to JSON and that it can be reloaded into DevTools? If not, we should not add this code yet.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually I did not originally intend to include these changes, but thought to add it as it's relatively not a big change.
I had already verified the happy journey (attaching videos), I am fixing one issue in the response data. I will throughly test it and then let you know, otherwise I can raise it as a separate PR as well.
Screen.Recording.2025-01-29.at.10.55.14.PM.mov
clideo_editor_baefe568f22145b2b04a299b8fd94832.mp4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the videos, this looks great!
One more comment. You said:
also btw we need to add a call to_fetchFullDataBeforeExport before the json is downloaded just like in case of har
Can that be done as part of this PR?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the videos, this looks great!
Yup :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more comment. You said:
also btw we need to add a call to_fetchFullDataBeforeExport before the json is downloaded just like in case of har
Can that be done as part of this PR?
Yes, but then, I had added it in the OpenSaveButtonGroup, which is not a part of this PR, as you would be adding the dropdown in a separate one.
(Note: This function was marked private before make it public)
OpenSaveButtonGroup(
screenId: ScreenMetaData.network.id,
onSave: () async {
await widget.controller.fetchFullDataBeforeExport();
widget.controller.exportData();
},
),
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay I can apply that change to my follow up PR, thanks for the code pointer.
Can you merge with the master branch? The benchmark size threshold was increased recently. |
Looks like a legitimate error in the performance benchmarks:
|
Adding offline support to Network page.
issue link - #4470
List which issues are fixed by this PR.
Please add a note to
packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
if your change requires release notes. Otherwise, add the 'release-notes-not-required' label to the PR.Pre-launch Checklist
///
).If you need help, consider asking for help on Discord.