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

Technical problem pages #129

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

Technical problem pages #129

timpaul opened this issue Mar 16, 2018 · 4 comments

Comments

@timpaul
Copy link
Contributor

@timpaul 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

@govuk-design-system
Copy link
Collaborator

@govuk-design-system govuk-design-system commented Mar 29, 2018

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

Loading

@nickcolley
Copy link
Contributor

@nickcolley 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.

Loading

@edwardhorsford
Copy link

@edwardhorsford edwardhorsford commented Sep 10, 2019

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.

Loading

@digitalronin
Copy link

@digitalronin digitalronin commented Sep 10, 2019

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants