Skip to content
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

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

Merged
merged 20 commits into from
Mar 28, 2023

Conversation

ryan953
Copy link
Member

@ryan953 ryan953 commented Mar 22, 2023

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
State Img
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 display SCR-20230323-km4
The X button will close the panel SCR-20230323-kmb
Click+drag (don't click on the tabs or the X button) to make the panel larger/smaller SCR-20230323-kmd

Related to getsentry/sentry-javascript#7589

Fixes #46054

@ryan953 ryan953 requested review from a team as code owners March 22, 2023 19:55
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 22, 2023
@priscilawebdev
Copy link
Member

it would be nice to have screenshots and tests :)

@billyvg
Copy link
Member

billyvg commented Mar 23, 2023

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

static/app/components/jsonBlock.tsx Outdated Show resolved Hide resolved
static/app/components/jsonBlock.tsx Outdated Show resolved Hide resolved
Copy link
Member

@billyvg billyvg left a comment

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 master Mar 28, 2023
@billyvg billyvg deleted the ryan953/46054-req-res-main branch March 28, 2023 13:11
@github-actions github-actions bot locked and limited conversation to collaborators Apr 13, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add UI to display network request/response body
3 participants