Cloudflare custom error pages function as expected for WAF Block errors, but they do not work as intended for 500 class errors

Cloudflare Community Help Request

I have a Next.js static site hosted on Cloudflare Pages at (https://cf-error-pages-0e9.pages.dev/). The site includes pages designed to override custom error pages on Cloudflare, as explained in the(https://developers.cloudflare.com/support/more-dashboard-apps/cloudflare-custom-pages/configuring-custom-pages-error-and-challenge/).

WAF Block Override Preview

When attempting to preview the WAF Block override, it functions correctly.

Issue with 500-class Error

However, when trying to view a 500-class error, a blank white screen appears, and the network tab indicates that some CSS file chunks are not loading, as illustrated in the screenshot below:

500-class Error - CSS Not Loading

Page Size

I’ve confirmed that the page size, as analyzed with Collapsify, is approximately 700KB, as seen in the following screenshot:

➜  cf-error-pages git:(main) ✗ collapsify -o collapse-waf.html https://errors.christianfilipina.com/waf-block
{"time":"2023-11-19T05:23:44.858Z","hostname":"Bhavins-MacBook-Pro.local","pid":12170,"level":"info","name":"collapsify-cli","message":"Collapsed Size: 712669 bytes"}

Seeking Assistance

I am seeking assistance in identifying and resolving this issue. Is it feasible to use a Next.js static page in this context? The error pages are hosted at https://cf-error-pages-0e9.pages.dev/. I appreciate any help in resolving this matter.

500 class error preivew:

I can confirm that the issue specifically occurs on pages that require a Cloudflare error token (::[Cloudflare error token]::) and does not manifest on pages where this token is not necessary. The token is present on my page.

Your Collapsify example was for https://errors.christianfilipina.com/waf-block, which has a self-signed certificate, and won’t load due to that not being secure.

From your error page list at pages.dev, your 5xx page at https://cf-error-pages-0e9.pages.dev/5xx points to many resources at errors.christianfilipina.com, so that’s not going to work due to the SSL issue.

I’ve just added a CNAME record to point the errors subdomain on christianfilipina.com to a Cloudflare Pages site. The preview for custom pages override is successful for https://errors.christianfilipina.com/waf-block. However, it encounters issues with https://errors.christianfilipina.com/5xx, resulting in a React error.

My suspicion is that this problem stems from the necessity of a custom Cloudflare token ::CLOUDFLARE_ERROR_500S_BOX::, for the 5xx error, and there may be an issue with its parsing. While I’m not an expert, the fact that it works for /waf-block but not for any page requiring a Cloudflare token mean something?.

See it works for /waf-block

However, it fails the preview for https://errors.christianfilipina.com/1xxx, which includes the ::CLOUDFLARE_ERROR_1000S_BOX:: token.

Moreover, when I attempt to use the same page, namely https://errors.christianfilipina.com/1xxx, to override WAF Block, it works, indicating a potential issue with the Cloudflare token swapping process.