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

There is a problem with the service pages (Technical problem pages) #129

Open
timpaul opened this issue Mar 16, 2018 · 5 comments
Open

There is a problem with the service pages (Technical problem pages) #129

timpaul opened this issue Mar 16, 2018 · 5 comments
Labels
pattern Goes in the 'Patterns' section of the Design System

Comments

@timpaul
Copy link
Contributor

timpaul commented Mar 16, 2018

There is a problem with the service pages

Also known as 500 pages, Technical problem pages

Use this issue to discuss this pattern in the GOV.UK Design System.

screen shot 2018-06-25 at 10 19 15

Contributors

Related links

@timpaul timpaul created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Mar 16, 2018
@ignaciaorellana ignaciaorellana moved this from Agreed to In progress in GOV.UK Design System Community Backlog Mar 16, 2018
@timpaul timpaul mentioned this issue Mar 16, 2018
@govuk-design-system govuk-design-system added get-ready-to-publish This thing has been reviewed and approved for publication and removed ready-for-review labels Mar 29, 2018
@govuk-design-system
Copy link
Collaborator

Design review

This pattern was reviewed by a panel of designers from GDS, HMRC, DWP and Home Office on 22 March 2018.

The panel agreed that the pattern should be published in the GOV.UK Design System.

Recommendations

The panel recommended that the following actions be taken once the pattern has been published:

  • Add guidance explaining how the URLs of these pages should be designed
  • Recommend that services are designed so that user data isn’t lost when there’s a technical problem
  • Recommend that the page tells users what has happened to any data they have entered and what they should do next
  • Investigate whether the ‘Try again later’ copy is helpful to users or not, or is there is a more helpful alternative

@timpaul timpaul added the pattern Goes in the 'Patterns' section of the Design System label May 21, 2018
@ignaciaorellana ignaciaorellana moved this from In progress to Published in GOV.UK Design System Community Backlog Jun 15, 2018
@ignaciaorellana ignaciaorellana removed the get-ready-to-publish This thing has been reviewed and approved for publication label Jun 15, 2018
@NickColley
Copy link
Contributor

NickColley commented Sep 10, 2019

For GOV.UK Publishing, the stack that serves www.GOV.UK, they have a hardcoded 500 page in their CDN configuration.

This is because if the application fails resulting in a 500 error, it cannot serve the assets it needs to serve a page to the user.

By hard coding a simpler page, the CDN can respond with something that is closer to GOV.UK branding.

This has come up in the X-GOV Frontend community slack, with a user suggesting that this is a common thing with Kubernetes:

"Anyone hosting stuff in kubernetes will have this requirement, at some point.
"The default backend can only really deliver a single html page as a response to an error - everything else has to come from a different web server"

I have hosted the current GOV.UK Publishing 500 page so you can see it rendered: https://govuk-publishing-500-page.glitch.me

I have put together an improved version of this based on the current design system pattern: https://govuk-frontend-proposed-500-page.glitch.me

HTML for proposed page
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sorry, there is a problem with the service - GOV.UK</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#0b0c0c"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      color: #0b0c0c;
    }
    header {
      display: block;
      background: #0b0c0c;
      color: white;
      padding: 10px 0;
    }
    .logotype-crown {
      vertical-align: text-bottom;
      margin-right: 1px;
    }
    .logotype {
      font-size: 29px;
      font-size: 1.8125rem;
      font-weight: bold;
      line-height: 1;
    }
    .container {
      max-width: 960px;
      margin: 0 auto;
      padding-right: 15px;
      padding-left: 15px;
    }
    main {
      display: block;
      padding-top: 30px;
    }
    h1 {
      margin-top: 0;
      margin-bottom: 30px;
      font-size: 32px;
      font-size: 2rem;
      line-height: 1.09375;
    }
    p {
      font-size: 19px;
      font-size: 1.1875rem;
      line-height: 1.31579;
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <svg role="presentation" focusable="false" class="logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" width="36">
        <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
      </svg>
      <span class="logotype">GOV.UK</span>
    </div>
  </header>
  <main>
    <div class="container">
      <h1>Sorry, there is a problem with the service</h1>
      <p>Try again later.</p>
    </div>
  </main>
</body>
</html>

Given this we should consider changing the current pattern or adding additional guidance to help users with this technical restriction.

@edwardhorsford
Copy link

On my current service and on one of my previous ones, we packged up an error page as a single html file that was served independently. I imagine most services will need something like this.

In our case we did it manually, and had to update every so often. As it's a rare occurrence, it wasn't so bad if it was a bit out of date.

It would certainly be handy if GDS could somehow publish an error page with inlined styles that people could pull and keep in sync easily.

@digitalronin
Copy link

We've created this, which has a little bit more styling.

https://github.com/ministryofjustice/cloud-platform-custom-error-pages/blob/master/rootfs/www/4xx.html

@dav-idc dav-idc changed the title Technical problem pages Technical problem pages (There is a problem with the service pages) Dec 5, 2022
@dav-idc dav-idc changed the title Technical problem pages (There is a problem with the service pages) There is a problem with the service pages (Technical problem pages) Dec 5, 2022
@stevenjmesser
Copy link

We have removed the 'Experimental' tag from components, patterns, and guidance in the Design System. 😌

The tag was being used on the There is a problem with the service page pattern to raise awareness that more research is needed to validate it. However, we recently published new guidance on how to share findings from users which we hope will make it easier to collect and format more information about how the Design System is being used across services.

If your team has used this component please let us know. 💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pattern Goes in the 'Patterns' section of the Design System
Development

No branches or pull requests

9 participants