Resolve inconsistencies with static and dynamic 503 error page

Problem

Original discussion: !169039 (comment 2184684488) | #498909 (closed)

In response to #498909 (closed), a new dynamic 503 error page was created for resource exhausted errors in app/views/errors/*. A static 503 error page already existed in public/*:

A dynamic error page was created because:

  • Pages in public/* folder are static. The application can only render them without any modifications. There are situations when we want to add an error message along with an error page and it’s not possible with them.
  • There are customers who overloaded Gitaly with requests. When Gitaly cannot process incoming messages, it returns ResourceExhausted error. The error message will provide a visibility and give some clues about the problem to the end users.
Static 503 error page (recommended) Dynamic 503 error page

503-public.png

+Provides recommendations for next steps

+Friendlier heading

503-dynamic.png

-Search bar does not make sense in the context of 503 error pages

-Recommendations for next steps are minimal

Design Recommendation

Make the new dynamic 503 error page consistent with the static 503 error page:

  1. Remove the search bar, which makes sense in the context of 404 pages but not 503 pages
  2. Update text to be consistent

503-public.png

Design Idea 💭

When users hit error pages, it's helpful to provide guiding actions and next steps. For a 503 page the following actions might be useful:

  • Refresh the page (we already suggest this)
  • Contact for help (we suggest this but can provide a link to make it even easier)
  • Link to the server status page (we do not do this)

Would it be helpful to users if we provided a link to the server status page (https://status.gitlab.com) whenever users hit a 503 page on GitLab.com? And a direct link to contact GitLab support?

Edited by Alyssa Trinh