CODEWITHSUNDEEP
amazon-s3amazon-cloudfront
Nathan
Nathan

Reputation: 7709

Language specific 404 error page in cloudfront

I have a cloudfront distribution serving an s3 bucket. To make the page multilanguage, I added a lamba@edge function that analyzes the Accept-Language header and redirects /<page> to /en/<page> or /de/<page>.

The redirect happens with a 303 return code so that the users gets /en/<page> as the path shown in the browser and can switch languages by going to /de/<page>.

Works! But what is in case of a 404? If I configure a custom 404 page in S3 or cloudfront and the user requests /de/<non-existing-page>, he gets redirected to the custom 404 page (for example /error-pages/404). But that page is not translated!

Is there a way to make the 404 page language specific? Depending on if the user comes from /en/<page> or /de/<page>?

Upvotes: 0

Views: 1472

Answers (2)

Nihad Abou-Zid
Nihad Abou-Zid

Reputation: 1

An alternative solution is to have a root error page that redirects to a more specific error page. Here is an example of the JavaScript logic in the root error page defaulting to the english error page.

let languageFromUrlPath = window.location.pathname.split('/')[1];
const errorPagePath = `/${languageFromUrlPath}/404`;
try {
    const response = await fetch(errorPagePath);
    languageFromUrlPath = response.status === 200 ? languageFromUrlPath : 'en';
} catch (error) {
    languageFromUrlPath = 'en';
}
window.location.href = `/${languageFromUrlPath}/404`;

I guess that's not a best practice solution but it might be okay for simple use cases as it requires no setup or devops process changes.

Upvotes: 0

Nathan
Nathan

Reputation: 7709

I found a solution.

  1. use 2 S3 Buckets (or as many, as you have languages), one for each language and put the files for each language in the corresponding bucket
  2. configure the ErrorDocument for each bucket to the language-specific 404 page
  3. In your CloudFront distribution configure an origin and behavior for each language such that the PathPattern /<language>/* is directed to the origin fetching from the s3 bucket for language <language>

Upvotes: 1

Related Questions