fix(ci/preview): add custom 404 page for PR preview pages

[OnkarRuikar]

• fix PR preview pages don't handle visit to non deployed pages well #37764

The current 404 page shows following content:

Message: The specified key does not exist.
Key: pr37670/en-us/_spas/404.html
RequestId: W9ZG8PFR8V5N0MK5
HostId: EoaAHM8g7wgSv7rGa1dRb6/F9o5Pg93I6h0iZVYuA8A5x1RrlpNKgHZVADEZDyl/ZnC2KuEdIr8=

From the error, when 404 occurs, the Cloudfront is trying to look for /en-us/_spas/404.html. We can put a custom 404.html file there to provide the link to prod pages.

Tested the changes successfully:

404_page.mp4

I had to put JS in a separate file to avoid inline script CSP error. To have the JS in the same HTML we'll have to add CSP hash to mdn/yari//libs/constants/index.js. The preview build is not part of the MDN platform so let's not involve yari repo.

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/length

(comment last updated: 2025-01-24 05:05:09)

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[caugner]

Note that due to the fix mentioned here, for your custom 404 page to work, you'll need to overwrite /404/index.html after the rsync command in the next step.

I'll let content folks (cc @Rumyra) decide whether your proposed custom 404 page with a link to production is more useful than the generic 404 page.

[yin1999]

Related issue in yari: mdn/yari#7185

[OnkarRuikar]

I'll let content folks (cc @Rumyra) decide whether your proposed custom 404 page with a link to production is more useful than the generic 404 page.

If we have View on MDN prod link on the generic 404 page when in dev environments, then we won't need this workaround. From the code comment I thought we don't want this CI specific stuff in platform code that is why I made the fix here.

[estelle]

Thanks for adding this feature Onkar. This looks like it will be useful.

One suggestion, though people may disagree:
in addition to link.textContent = "View on MDN production server";
maybe we can add a "You are currently in a PR, so this page is not available" or something similar before it, just as clarification.