Design: Link error event in Replay Details (breadcrumbs) to the same error in Issues view

[jas-kas]

Problem:

Today, there is no way to link the error event you see in Replay Details to the specific error event in Issue Details so a user can debug. The error event in Breadcrumbs does not bring you to the Issue Details at all. In addition, the Issues tab only brings you to the latest event for that Issue, not the error event from the specific session.

Solution:

TBD on Design.

[ryan953]

related to #37368

[Jesse-Box]

cc: @jas-kas @ryan953
My proposed solution is a few small tweaks, specifically;

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. The console row component, on hover, will show a link labelled "View Details". This will direct the user to the issue details view showing that specific error event. If the user hovers the "View Details" link, we show a tooltip that specifies the Issue ID and project avatar.
3. When the user clicks an error in the breadcrumb list or event timeline, it will select the corresponding error in the console view.

For specs, please visit the figma designs here
https://www.figma.com/file/OPFnT04z0uy8BEUms9OU4f/Specs%3A-Details-v3?node-id=185%3A6974

[jas-kas]

@Jesse-Box I think this looks good!

I notice the mocks don't have the Issues tab, will it still exist or will these changes override the need for an Issues tab? Just want to confirm.

The errors link in the top-right is not as easily discoverable when compared to a tab on the page. That would be my only concern. 😄

[Jesse-Box]

@Jesse-Box I think this looks good!

I notice the mocks don't have the Issues tab, will it still exist or will these changes override the need for an Issues tab? Just want to confirm.

So can reason for why we should keep it or remove it. We keep it, because it doesn't effect us shipping the solution I'm proposing here. We get rid of it, because people expect the issue tab to show them which error relates to which issue. I'm tending to get rid of it. @ryan953 @billyvg opinions?

The errors link in the top-right is not as easily discoverable when compared to a tab on the page. That would be my only concern. 😄

I'll quickly mock this up and post an update here later.

[Jesse-Box]

Go to the link below Figma design to evaluate the two concepts
https://www.figma.com/file/OPFnT04z0uy8BEUms9OU4f/Specs%3A-Details-v3?node-id=210%3A9116

After exploring this idea, I came to the conclusion, that the counter in the tab makes a lot of sense for a given layout — Small Player. However, In the other layout, it gets a bit lost. If you're following my figma file, I would opt for just having "concept B", because at least it works consistently for all layout options.

Below are screenshots how Firefox and Chrome show errors in the console

[billyvg]

I like concept b

[ryan953]

I also like to keep the error count in the header -> concept B

I'm torn on whether to remove the Issues tab or not. It's something I'd look at after we get the errors system setup and working so we can see what it's like when both are there.

[Jesse-Box]

I also like to keep the error count in the header -> concept B

I'm torn on whether to remove the Issues tab or not. It's something I'd look at after we get the errors system setup and working so we can see what it's like when both are there.

Yeah I agree we don't need to remove it, to satisfy the requirements of this ticket. The one thing the issue tab tells me is how severe the issue actually is because of the affected users metric.

[jas-kas]

@Jesse-Box Option B looks good to me. :) + Keeping the "Issues" tab for now

[jas-kas]

This design ticket is closed by the implementation ticket #38861.