Localised error pages cause redirect loops

[sagge]

Hi,

I am facing some challenges as I'm trying to implement localised error pages for our website. For some reason I am ending up with redirect loops in different locations depending on the configuration. The page is structured so that "/" path is for default locale and other locales are prefixed with langKey, for example "/sv/". I am creating the localised error pages as follows:

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage, deletePage } = actions
  // Check if the page is a localized 404
  if (page.path.match(/^\/[a-z]{2}\/404\/$/)) {
    const oldPage = { ...page }
    const langCode = page.context.langKey;
    if (langCode !== 'fi') {
      page.matchPath = `/${langCode}/*`
    }
    // Recreate the modified page
    deletePage(oldPage)
    createPage(page)
  }
}

The error page for default language is configured to the default 404.html.

If I use this for page creation and have the S3 plugin configured as follows:

{
  resolve: `gatsby-plugin-s3`,
  options: {
    bucketName: 'our-website-bucket',
    protocol: siteAddress.protocol.slice(0, -1),
    hostname: siteAddress.hostname,
    generateRedirectObjectsForPermanentRedirects: true,
    params: {
      'sitemap.xml': {
        CacheControl: 'public, max-age=0, must-revalidate',
      },
    },
  },
}

Everything seems to be working fine in the main locale under "/" path (also the 404 page). Other locales (for example "/sv/") are also fine when navigating to pages that exist, but anything that can't be found, for example "/sv/foobar" causes ERR_TOO_MANY_REDIRECTS.

If I change the configuration to include generateMatchPathRewrites: false, the localised error pages seem to be working fine, except when doing a hard refresh (cmd + shift + r) on the index page for particular locale (for example in path "/sv/"). Hard refresh navigates to "/sv/404" and causes ERR_TOO_MANY_REDIRECTS. Regular refresh on the index path for different locales are working fine.

Is there something I could configure differently to prevent the redirect loops from happening? Tips and help would be greatly appreciated as I am hitting a wall myself.

[YoshiWalsh]

This is a strange issue, and I'm not that familiar with the matchPath property. (Which I think might be what's causing the redirect to be created)

Could you please try disabling generateRedirectObjectsForPermanentRedirects and sharing what redirect rules end up in your S3 Static Website config?

[sagge]

Hi,

Sorry for the delay on getting back to you. I tried building the website with different combinations of generateRedirectObjectsForPermanentRedirects and generateMatchPathRewrites options. Different combinations generate the following configs:

Combination 1:

generateRedirectObjectsForPermanentRedirects: true,
generateMatchPathRewrites: true,

s3.routingRules.json:

[{"Condition":{"KeyPrefixEquals":"sv/"},"Redirect":{"ReplaceKeyWith":"sv/404","HttpRedirectCode":"302","Protocol":"https","HostName":"ourdomain.com"}}]

Combination 2:

generateRedirectObjectsForPermanentRedirects: true,
generateMatchPathRewrites: false,

s3.routingRules.json:

[]

Combination 3:

generateRedirectObjectsForPermanentRedirects: false,
generateMatchPathRewrites: true,

s3.routingRules.json:

[{"Condition":{"KeyPrefixEquals":"sv/"},"Redirect":{"ReplaceKeyWith":"sv/404","HttpRedirectCode":"302","Protocol":"https","HostName":"ourdomain.com"}},{"Condition":{"KeyPrefixEquals":"artikkelit/perunkirjoitus/perunkirjoitus-ja-virkatodistukset/"},"Redirect":{"ReplaceKeyWith":"artikkelit/perunkirjoitus/virkatodistus-perunkirjoitusta-varten","HttpRedirectCode":"301","Protocol":"https","HostName":"ourdomain.com"}},{"Condition":{"KeyPrefixEquals":"artikkelit/perunkirjoitus/virkatodistus/"},"Redirect":{"ReplaceKeyWith":"artikkelit/perunkirjoitus/virkatodistus-perunkirjoitusta-varten","HttpRedirectCode":"301","Protocol":"https","HostName":"ourdomain.com"}},{"Condition":{"KeyPrefixEquals":"artikkelit/avioliitto/sahkoinen-avioerohakemus/"},"Redirect":{"ReplaceKeyWith":"artikkelit/avioliitto/avioerohakemus","HttpRedirectCode":"301","Protocol":"https","HostName":"ourdomain.com"}}]

Combination 4:

generateRedirectObjectsForPermanentRedirects: false,
generateMatchPathRewrites: false,

s3.routingRules.json:

[{"Condition":{"KeyPrefixEquals":"artikkelit/perunkirjoitus/perunkirjoitus-ja-virkatodistukset/"},"Redirect":{"ReplaceKeyWith":"artikkelit/perunkirjoitus/virkatodistus-perunkirjoitusta-varten","HttpRedirectCode":"301","Protocol":"https","HostName":"ourdomain.com"}},{"Condition":{"KeyPrefixEquals":"artikkelit/perunkirjoitus/virkatodistus/"},"Redirect":{"ReplaceKeyWith":"artikkelit/perunkirjoitus/virkatodistus-perunkirjoitusta-varten","HttpRedirectCode":"301","Protocol":"https","HostName":"ourdomain.com"}},{"Condition":{"KeyPrefixEquals":"artikkelit/avioliitto/sahkoinen-avioerohakemus/"},"Redirect":{"ReplaceKeyWith":"artikkelit/avioliitto/avioerohakemus","HttpRedirectCode":"301","Protocol":"https","HostName":"ourdomain.com"}}]

Hopefully this will shed some light on the issue.

[Tahriff]

Did you manage to solve your issue ? I'm encountering a very similar situation.

[sagge]

Unfortunately no. I couldn't find a way to get this working and ended up using single error page with the default language for the whole site. This is quite far from optimal as it only works for certain language and causes the site language to change to default.