Skip to content

feat(replays): Add UI to display network request details - #46219

Merged
billyvg merged 20 commits into
masterfrom
ryan953/46054-req-res-main
Mar 28, 2023
Merged

feat(replays): Add UI to display network request details#46219
billyvg merged 20 commits into
masterfrom
ryan953/46054-req-res-main

Conversation

@ryan953

@ryan953ryan953 commented Mar 22, 2023•
edited
Loading

Copy link
Copy Markdown
Member

New 'Network details' panel. Figma per figma specs

There are a few states so observe in the screen shots, and some followup tasks

Note that:

  • You can only open the details panel for xhr & fetch network types
  • The data is a string that's run through the pii scrubber, we try to parse it with JSON.parse, but if that fails you'll just get a string
StateImg
Click a network row to open the Details. Notice that the row you clicked is Bold. The lower area with the data is scrollable, strings or objects will displaySCR-20230323-km4
The X button will close the panelSCR-20230323-kmb
Click+drag (don't click on the tabs or the X button) to make the panel larger/smallerSCR-20230323-kmd

Related to getsentry/sentry-javascript#7589

Fixes#46054

@ryan953
ryan953 requested review from a team as code ownersMarch 22, 2023 19:55
@github-actionsgithub-actionsBot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 22, 2023
@priscilawebdev

priscilawebdev commented Mar 23, 2023

Copy link
Copy Markdown
Member

it would be nice to have screenshots and tests :)

ryan953
ryan953 commented Mar 23, 2023
View reviewed changes
Comment threadstatic/app/views/replays/detail/layout/splitDivider.tsx
ryan953
ryan953 commented Mar 23, 2023
View reviewed changes
Comment threadstatic/app/views/replays/detail/network/networkTableCell.tsx
This was referenced Mar 23, 2023
Closed
Closed
@billyvg

billyvg commented Mar 23, 2023

Copy link
Copy Markdown
Member

Let's kill the Headers tab for now, we haven't decided on the SDK how we will want to collect headers yet - and it also might make sense to have them inside of the respective Request/Response tabs

billyvg
billyvg reviewed Mar 23, 2023
View reviewed changes
Comment threadstatic/app/views/replays/detail/network/networkRequestDetails.tsx Outdated
Comment threadstatic/app/views/replays/detail/network/networkRequestDetails.tsx
Comment threadstatic/app/components/replays/scrollableTabs.tsx Outdated
billyvg
billyvg reviewed Mar 23, 2023
View reviewed changes
Comment threadstatic/app/components/jsonBlock.tsx
priscilawebdev
priscilawebdev reviewed Mar 24, 2023
View reviewed changes
Comment threadstatic/app/components/jsonBlock.tsx Outdated
Comment threadstatic/app/components/jsonBlock.tsx Outdated
Comment threadstatic/app/views/replays/detail/network/networkTableCell.tsx Outdated
billyvg
billyvg approved these changes Mar 28, 2023
View reviewed changes

@billyvgbillyvg left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tested this with and without feature flags enabled and works great.

@billyvg
billyvg merged commit 364b48f into masterMar 28, 2023
@billyvg
billyvg deleted the ryan953/46054-req-res-main branch March 28, 2023 13:11
@github-actionsgithub-actionsBot locked and limited conversation to collaborators Apr 13, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@billyvgbillyvgbillyvg approved these changes
@priscilawebdevpriscilawebdevAwaiting requested review from priscilawebdev

Assignees

No one assigned

Labels

Scope: FrontendAutomatically applied to PRs that change frontend components

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add UI to display network request/response body

3 participants

@ryan953@priscilawebdev@billyvg