ui: add details to generic error message

[j82w]

When a user encounters an error they only get a generic error message. Users need to go to the dev console and try to find and share the actual error message. If the issue doesn't reproduce, it's not possible to root cause the problem.

This commit adds the current date, error message, and the current URL to the error component so when a user shares a screen shot we have the necessary info without the need for them to go to the dev console.

This commit also refactors the check for the timeout logic into the error component which removes the duplicate logic.

Fixes: #105549

Release note (ui change): The generic error message now includes details about the actual error, and other context to make it easier to root cause.

[cockroach-teamcity]

This change is 

[zachlite]

Thank you for doing this!

Reviewable status: complete! 0 of 0 LGTMs obtained (waiting on @j82w)

---

pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss line 26 at r1 (raw file):

  flex-direction: row;
  font-size:xx-small;
  color:$colors--neutral-4;

Can you use secondary-text-color here? I think the current light gray on red is too low-contrast.

$secondary-text-color: $colors--neutral-5;

[j82w]

pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss line 26 at r1 (raw file):

Previously, zachlite wrote…

Can you use secondary-text-color here? I think the current light gray on red is too low-contrast.

$secondary-text-color: $colors--neutral-5;

@dongniwang what do you recommend? I did the low contract by design so they focus on the main error message and hopefully ignore the details. The current color is still readable for us, and not distracting to users.

[dongniwang]

Hey @j82w. I understand we'd like to make the message less distracting to users. And I do agreed with @zachlite the gray on red is low-contrast and not accessible.

We do have a set of Alerts in the Design System with alert messages. I'd recommend updating the message in a more legible color. Also, would it be possible to move the link into its own line? See attached screenshot. Let me know if you have any questions!

[j82w]

@dongniwang the message in your design looks like something that is meant for users. The only thing relevant for users is the first line. The new newline that starts with the date is only meant for CRDB employees to help root cause bugs in the ui console. We don't want users to even notice the new information being displayed as it may confuse them. Do you still think we should go with the proposed designed?

[dongniwang]

Just met with @j82w to discuss this, capturing our conversation and decisions here as well:

1. For right now, @j82w will keep the existing action button location (next to message title) and update text from gray to body text color.
2. Future improvement consideration 1) consider improving the existing error code system to include meaningful error code and message for better troubleshooting experience both internally and externally 2) consider adding a functionality such as "submit a ticket" in the error message to help user get support more easily. "Submit a ticket" should capture a screenshot of the page, include error message and timestamp of the console, and then zip everything as attachment and create a support ticket.
3. @dongniwang to explore design option that's similar to the 404 page design.

[zachlite]

Reviewable status: complete! 1 of 0 LGTMs obtained (waiting on @dongniwang)

[j82w]

bors r+

[craig]

Build succeeded:

• Bazel Essential CI (Cockroach)

[blathers-crl]

Encountered an error creating backports. Some common things that can go wrong:

1. The backport branch might have already existed.
2. There was a merge conflict.
3. The backport branch contained merge commits.

You might need to create your backport manually using the backport tool.

---

error creating merge commit from 5fcb13a to blathers/backport-release-22.2-105550: POST https://api.github.com/repos/cockroachdb/cockroach/merges: 409 Merge conflict []

you may need to manually resolve merge conflicts with the backport tool.

Backport to branch 22.2.x failed. See errors above.

---

error creating merge commit from 5fcb13a to blathers/backport-release-23.1-105550: POST https://api.github.com/repos/cockroachdb/cockroach/merges: 409 Merge conflict []

you may need to manually resolve merge conflicts with the backport tool.

Backport to branch 23.1.x failed. See errors above.

---

_{🦉 Hoot! I am a Blathers, a bot for CockroachDB. My owner is dev-inf.}