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

Replay Details: error count in header and linking breadcrumbs + events in timeline to error console messages #38861

Closed
jas-kas opened this issue Sep 14, 2022 · 0 comments · Fixed by #39038
Assignees

Comments

@jas-kas
Copy link
Member

jas-kas commented Sep 14, 2022

Solution:

  1. In the page header, where it shows a Flame Icon with a number next to it, we replace that with a red counter, with a link labelled "Error". By clicking this link, it would automatically filter the console by errors only, and if the user hasn't got the "Console" tab active/in view, it would take the user to that tab.
  2. When the user clicks an error in the breadcrumb list or event timeline, it will select the corresponding error in the console view.
  3. Keep the Issues tab in Replay Details as is, per the discussion in #38461. We may revisit this in the future.

See designs for this ticket under "Concept B" in this Figma.

See what is labelled 1 in the screenshot:
for # 2 go here: #38922

Image

This issue closes design ticket #38578.

@jas-kas jas-kas added the p0 label Sep 15, 2022
@ryan953 ryan953 self-assigned this Sep 15, 2022
@jas-kas jas-kas changed the title Replay Details: error count in header, linking breadcrumbs/events to error console messages, linking error console messages to the specific event details in Issues Replay Details: error count in header, linking breadcrumbs/events to error console messages Sep 15, 2022
@jas-kas jas-kas changed the title Replay Details: error count in header, linking breadcrumbs/events to error console messages Replay Details: error count in header and linking breadcrumbs + events in timeline to error console messages Sep 15, 2022
@ryan953 ryan953 removed their assignment Sep 15, 2022
@ryan953 ryan953 self-assigned this Sep 19, 2022
ryan953 added a commit that referenced this issue Sep 20, 2022
…39030)

Refactor the Console, DOM & Network tabs so that their filter inputs put
the state inside the url instead of inside a `useState` hook.

This means users will be able to share their view of the page with each
other, and also we'll be able to deep-link into some views.


Related to #38861
ryan953 added a commit that referenced this issue Sep 22, 2022
…ab (#39038)

Updated the header to have a link that will open the Console tab, and
auto-select the 'error' filter:

![Screen Shot 2022-09-21 at 9 33 07
AM](https://user-images.githubusercontent.com/187460/191561421-652ef647-ec0f-41c1-89f3-79771c08f96f.png)

If there are no errors in the replay, then clicking the link will still
open the Console tab, and set the filter to be `level=error`. Normally
you wouldn't be able to set `level=error` yourself when there are no
errors because the dropdown is populated only with values that exist in
the data.

Depends on #39030
Fixes #38861
@github-actions github-actions bot locked and limited conversation to collaborators Oct 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants