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.

[caugner]

I have temporarily deployed a change on the review environment that automatically replaces HTTP 404 responses with HTTP 303 redirecting to the same path on https://developer.mozilla.org.

Advantage:

• You can now click on links to unchanged pages, and you see where you end up.
• This is a workaround for The images can not be previewed in PR review rari#101.

Disadvantage:

• You may see images on the review environment that won't be there on production. For example, in a PR you could remove an image, and you would still see it in the review environment, because the HTTP 404 will redirect to production.

This is not a permanent change, and we have plans to migrate the review environment from AWS to GCP soon, which should resolve the issues without any caveat.

[OnkarRuikar]

that automatically replaces HTTP 404 responses with HTTP 303 redirecting to the same path on developer.mozilla.org.

The automatic redirect could be confusing. The reviewer needs to know when they cross PR boundary. How about we throw 404, and the 404 page auto redirects to the prod server after five seconds? We can redirect images directly.

Disadvantage:

You may see images on the review environment that won't be there on production.

😕 This is desirable, right? We add a new image in a PR and we want to see it in the preview.

For example, in a PR you could remove an image, and you would still see it in the review environment, because the HTTP 404 will redirect to production.

If an image is removed, then the author must have removed the corresponding rending code as well, right?