gatsby: Document how to create multilingual 404 pages

Description

In our current project, we are working on a multilingual website with 2 languages. One of our requirement includes to have localised 404 pages. Instead of translating the content and layout on client-side, I would like to render a distinct 404 page for each language, like we do for normal pages with createPage. We host our website on Netlify, which describes how to set up custom 404 pages here. https://www.netlify.com/docs/redirects/#custom-404

For a short summary of the Netlify behaviour: They use rules set in the _redirects file to rewrite (not redirect) any incorrect path to the according 404 page.

Unfortunately, this seems not to be compatible with Gatsby. According to the following code in production-app.js, it does a look up on the pages existing within Gatsby and if it doesn’t find it, it will statically fetch and render the 404.html component. Yet the “incorrect” path would have already returned the correct 404 page served by Netlifys rewrite rule.

...
if (loader.getPage(props.location.pathname)) {
  return createElement(ComponentRenderer, {
    page: true,
    ...props
  });
} else {
  return createElement(ComponentRenderer, {
    page: true,
    location: { pathname: `/404.html` }
  });
}
...

Steps to reproduce

Start with a plain gatsby starter
Create two error pages, for example /404.jsx and /en/404.jsx
Install the gatsby-plugin-netlify
Add a custom _redirects file for Netlify and add the following:

/en/*   /en/404.html    404
/*        /404.html    404

According to this, every 404 underneath /en/… should result in the /en/404.html and everything else should end up with /404.html. 5. Deploy it to Netlify. 6. Enter example.com/en/not-existing-page 7. You will see very quickly the /en/404.html flicking up (by the Netlify rewrite) and then you’ll get the /404.html set by Gatsby.

Expected result

I would like to get the /en/404.html. Or more generally, I would like Gatsby to be more flexible on 404 pages.

Actual result

You receive the /404.html.

Environment

gatsby@1.9.253
gatsby-plugin-netlify@1.0.19
Node.js version: v8.10.0
Operating System: macOS

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 16 (9 by maintainers)

Commits related to this issue

docs(i18n): Show how to create prefixed 404 pages (#11573) Fixes #5129 (cc @patricknick) — committed to gatsbyjs/gatsby by valin4tor 5 years ago

Most upvoted comments

Good news: this is already possible! Using matchPath you can serve a specific 404 page for any matched path. Since @manuelbieh has shared his repo, I’ve created a commit which shows how you can do this: https://github.com/davidbailey00/manuelbieh.de/commit/62714633fb13b6e04c9e24f587114419299af946

Sorry everyone for taking so long to give a proper reply! I’ve renamed the issue title, since we need to document how to do this better 😃

TL;DR: before calling createPage, check if the path is one of your specific 404 pages. If so, define the matchPath property to match the pages you want to redirect to that specific 404 page.

+12

valin4tor on Nov 28, 2018

Just to update everyone, since this issue hasn’t had much attention recently - I’ve assigned myself to implement this but at the moment I’m not sure how soon I’ll get round to doing it. Recently I’ve been working on reliability improvements and tests to core code + offline plugin - hopefully when that’s all polished up - perhaps in a few weeks - and if I’m not working on anything else by then, I’ll be able to start implementing this!

valin4tor on Oct 30, 2018

Sorry, I haven’t had time to implement this feature last week, since I’ve been working on improvements to the offline plugin - I’ll make this my priority when I’m next working on Gatsby. Thanks for providing your repo!

valin4tor on Nov 18, 2018

I notice that this bug report has been up for some time - requesting the feature to optionally disable gatsby’s 404 handling. Am using Contentful with Netlify and its extremely easy to create a custom 404 that can be edited by a Contentful editor, but the Gatsby default 404 will load itself shortly after it hits the custom error page.

Netlify seems to pull required plugins from elsewhere based on the contents of package.json too, so there is no straightforward solution like editing the production-app.js either; it will at least require gatsby to be forked in whole.

larryPersonal on Jul 31, 2018

Hey everyone, thanks for all the information about this issue 👍 Currently I’m waiting on #8510 to be merged which should fix some of the problems with flickering (e.g. your comment @BlakeTurner), then I’ll take a look and hopefully make Gatsby able to detect 404 redirects at the server-side.

valin4tor on Sep 26, 2018

for me the same just deployed a modified gatsby-starter-blog having needed files like

| |____
| | |____de
| | | |____404.js
| | | |____index.js
| | |____en
| | | |____404.js
| | | |____index.js
| | |____hello-world
| | | |____index.md
| | | |____salty_egg.jpg
| | |____hi-folks
| | | |____index.md
| | |____index.js
| | |____my-second-post
| | | |____index.md

now i get 404.html like

Page Not found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

first try included the original src/pages/404.js from gatsby-starter-blog where it would show my custom 404 and then gatsby’s when i instead click on a non existent link gatsby 404 shows, then my custom and then again gatsby’s where it stays…

is it possible to “just” add an option to disable gatsby’s 404? would that solve it?

at least commenting out

if (loader.getPage(props.location.pathname)) {
  return createElement(ComponentRenderer, {
    page: true,
    ...props,
  })
// } else {
//   return createElement(ComponentRenderer, {
//     page: true,
//     location: { pathname: `/404.html` },
//   })
}

in node_modules/gatsby/cache-dir/production-app.js solved it maybe changing to something like } else if (!options.disabled) { would be nice 👍 but I don’t know how to get options in this file and what other issues this might introduce?

CanRau on Jun 6, 2018

@patricknick not yet, I’ll just work on that!

valin4tor on Feb 5, 2019

I’ve used this rewrite on netlify which seems to work for me:

/en/* /en/404/index.html 404

Do you have actual /en/404.html in your build?

pieh on May 29, 2018

I’m looking for a solution for this, too

CanRau on May 21, 2018