Errors: use application errors from CF and ALBs

[agjohnson]

Just noting here before I forget, I'd like to make sure our 5xx error pages are used from our various services, and likely need to configure bold CF and ALBs to use these error pages, or copy and hardcode these pages in the services.

• Enable display of 5xx error pages from application
• Add various placeholder text for Cloudflare error display
• Set Cloudflare to use 5xx/429/etc error pages, from origin
• ALB 502/504 unavailable error pages? Is this necessary or does CF cover this?

We shouldn't show nginx or the default ALB error pages with nicer error pages.

• Refs Add dashboard error pages #326

[humitos]

Is this a feature that AWS and/or Cloudflare provide? I'm not aware of it.

[agjohnson]

Cloudflare, definitely: https://developers.cloudflare.com/support/more-dashboard-apps/cloudflare-custom-pages/configuring-custom-pages-error-and-challenge/

AWS I think usually would require Cloudfront in front of the ALB, so this might not require any changes at AWS -- Cloudflare is serving the same purpose as Cloudfront.

[agjohnson]

@humitos I won't put this on this sprint, but this might be a good issue for you if you are looking for additional tasks.

[humitos]

I will put on the spint as Low priority. Otherwise, I will miss it completely 😄 . If I have extra time I will take a look, otherwise, we will push it to the next sprint or moving to the backlog in the next meeting.

[humitos]

These are all the custom pages that CF supports:

• Managed Challenge / I'm Under Attack Mode™
• JavaScript Challenge
• Interactive Challenge
• IP/Country Block
• WAF Block
• 500 Class Errors
• 1000 Class Errors
• Country Challenge
• 429 errors

What are the ones we are interested here? I suppose "500 class errors" for now and maybe 429 errors. cc @agjohnson

The required work here is:

• Design the HTML (probably just copy and paste 5xx.html from El Proxito. An example can be found at http://docs.devthedocs.org/_/error/5xx
• Add a custom error token name to it (eg. ::CLOUDFLARE_ERROR_500S_BOX::)
• Upload it to S3
• Create a custom page rule TF resource that points to the S3 URL

[humitos]

I tried using this file for 5xx, but Cloudflare says it's too big 😢 -- we may need to use inline CSS only with the required rules and a smaller SVG, probably.

Template is too large at 12751384 characters. Please reduce to 1500000 characters or less.

https://readthedocs-static-ext-theme-prod.s3.us-east-2.amazonaws.com/5xx-cloudflare.html

[agjohnson]

What are the ones we are interested here? I suppose "500 class errors" for now and maybe 429 errors

👍 That's what I was thinking, we can add more later if we want but I'm also happy to have the challenge and block pages maintained by Cloudflare.

I tried using this file for 5xx, but Cloudflare says it's too big

This is unfortunate. Their docs are a bit quiet about this except for:

Please keep in mind that all the external resources like images, CSS, and scripts will be inlined during the process.

I would not go deeper on this, unless there is a really easy answer here. There is a fair amount of work in creating minimal CSS that matches the look and feel of the existing pages. We can come back to this issue, I assumed it was going to be much simpler.

We should not use inline CSS anymore, this would require a separate CSS file generated through webpack with trimmed down rules and this would be a good amount of work to replicate the look/feel on desktop/tablet/mobile and keep the two in sync.

The required work here is:

Is there a good reason to not serve this from the application? We already have a serving mechanism in debug mode (/errors/5xx will display this template). I think that is better than making an operations step to deploy these.

[humitos]

I would not go deeper on this, unless there is a really easy answer here.

I didn't find an easy answer here and I thought it could not be easy to do it with semantic-ui to extract only the CSS we need. I won't continue working on this issue for now since it's kind of a "nice to have" at the moment.

Is there a good reason to not serve this from the application?

I'm not sure how CF works here. Does it downloads and cache the HTML once and then serve it from its own servers? Otherwise, if it hits our application when the application is down to serve the 500 template, it won't work 😄

[agjohnson]

I won't continue working on this issue for now since it's kind of a "nice to have" at the moment.

👍 I'll dig into this again later, there might be a workaround or hack that satisfies all of this (load styles dynamically via a small JS include for example).

I'm not sure how CF works here. Does it downloads and cache the HTML once and then serve it from its own servers?

Yup, it looks to be stored/cached:

https://developers.cloudflare.com/support/more-dashboard-apps/cloudflare-custom-pages/configuring-custom-pages-error-and-challenge/#update-custom-error-page-after-publishing