Resolve 404 pages #7137

pettinarip · 2022-07-19T20:37:39Z

IMPORTANT: this PR was branched from #7135. Merge that PR first.

Testing site: https://pettinarip-eth-org.netlify.app/

We are implementing the Netlify docs: https://docs.netlify.com/routing/redirects/redirect-options/#custom-404-page-handling

Fix #5682
Also cover #6356

gatsby-cloud · 2022-07-19T21:11:48Z

Gatsby Cloud Build Report

ethereum-org-website-dev

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 34m

pettinarip · 2022-07-20T14:59:16Z

gatsby-browser.tsx

@@ -42,7 +43,7 @@ export const wrapPageElement: GatsbyBrowser<

  // client side redirect on paths that don't have a locale in them. Most useful
  // on dev env where we don't have server redirects
-  if (!isLang(pathLocale)) {
+  if (IS_DEV && !isLang(pathLocale)) {


On prod we have server side redirects. We don't need this. In dev is handy to avoid receiving a 404 page at /.

pettinarip · 2022-07-20T15:05:52Z

gatsby-node.ts

+export const onPostBootstrap: GatsbyNode["onPostBootstrap"] = ({ actions }) => {
+  const { createRedirect } = actions
+
+  supportedLanguages.forEach((lang) => {


Creating these 404 redirects once all the pages and other redirects are created. We need them at the end of the _redirects file.

So if understand, the _redirects file that is created when building contains all redirects for the pages on the site. The site tries to resolve one of those initial redirects for the url, but if it can't find it then falls back to these 404 redirects being created here? Hopefully, this question makes sense. If it doesn't let me know.

Good question.

the _redirects file that is created when building contains all redirects for the pages on the site

Yes. Including the 404s. These files (_redirects & redirects.json) are only created for servers. They don't play any role in the local env.

The site tries to resolve one of those initial redirects for the url, but if it can't find it then falls back to these 404 redirects being created here?

Yes, I think the complete order is:

url/path match file => display the file

url/path match redirect => display the redirected file

url/path doesn't match anything => display default 404 (in English)

unless it matches the 404 fall backs for each locale (the ones created here), e.g. /es/something, will display the /es/404 page

pettinarip · 2022-07-20T15:06:16Z

gatsby-config.ts

+    {
+      resolve: `gatsby-plugin-netlify`,
+      options: {
+        generateMatchPathRewrites: false,


ref https://www.gatsbyjs.com/plugins/gatsby-plugin-gatsby-cloud/#configuration

A bit more context on this. Our i18n plugin is generating these matchPath routes for each locale, for client side routing purposes:

if (newPage.path.match(/^\/[a-z]{2}\/404\/$/)) { // Match all paths starting with this code (apart from other valid paths) newPage.matchPath = `/${locale.code}/*` }

If this flag is on, it would write in the _redirects file, something like:

/en/* /en/404 200 /es/* /es/404 200

Note the 200 status code. We don't want that. That will create a redirect. We want a 404 status code in there. That is why we are disabling this and creating those rules ourselves.

corwintines · 2022-07-20T22:43:47Z

redirects.json

@@ -171,30 +95,10 @@
    "fromPath": "/nft/",
    "toPath": "/en/nft/"
  },
-  {
-    "fromPath": "/nfts/",


Would we want to keep this redirect? I imagine the nft one above is more likely what was supposed to be removed.

Gooood catch. Yes! exactly that, thanks. I've removed the wrong one. Fixing..

corwintines · 2022-07-20T22:44:07Z

redirects.json

-  {
-    "fromPath": "/languages/",
-    "toPath": "/en/languages/"
-  },
  {
    "fromPath": "/enterprise/",


Looking at the redirects you removed, is this one still necessary?

Or is this one kept because there was 2 of the same redirects in this file 😅

Good catch again! yes, any page that is created by us shouldn't have its declaration here. It is created automatically.

corwintines

Nice! Glad you got this working!

Tested in both english and spanish.

Just had one question to double check I understand how this works: #7137 (comment)

pettinarip · 2022-07-21T15:46:11Z

redirects.json

-    "toPath": "/en/defi/"
-  },
-  {
-    "fromPath": "/layer2/",


This one should also exists. Will revert these last two redirects.

pettinarip added 3 commits July 19, 2022 12:37

redirect existing root paths to the corresponding defaultLanguage path

7672842

refactor

4b1d8f5

disable generateMatchPathRewrites from plugins

a0c018b

pettinarip force-pushed the resolve-404-pages branch 3 times, most recently from 62def04 to 8f252bc Compare July 20, 2022 14:15

define 404 redirects with correct status code

b7ba263

pettinarip force-pushed the resolve-404-pages branch from 8f252bc to b7ba263 Compare July 20, 2022 14:32

pettinarip commented Jul 20, 2022

View reviewed changes

pettinarip marked this pull request as ready for review July 20, 2022 15:04

pettinarip requested review from samajammin, wackerow, corwintines and minimalsm as code owners July 20, 2022 15:04

pettinarip commented Jul 20, 2022

View reviewed changes

only do client side redirect on dev

afe0925

pettinarip force-pushed the resolve-404-pages branch from 23fee9c to afe0925 Compare July 20, 2022 15:08

corwintines reviewed Jul 20, 2022

View reviewed changes

corwintines approved these changes Jul 20, 2022

View reviewed changes

pettinarip added 2 commits July 21, 2022 12:37

only create redirects on productions or in cases where we have a server

439237e

Merge branch 'fix-nested-redirects' into resolve-404-pages

0c25a47

pettinarip commented Jul 21, 2022

View reviewed changes

update redirects json

02267b3

pettinarip merged commit 093fc69 into dev Jul 21, 2022

pettinarip deleted the resolve-404-pages branch July 21, 2022 16:26

This was referenced Jul 21, 2022

404 redirect bug #6356

Closed

Gatsby Cloud env not displaying our custom 404 page #7156

Closed

corwintines mentioned this pull request Jul 25, 2022

Deploy v4.9.0 #7176

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resolve 404 pages #7137

Resolve 404 pages #7137

pettinarip commented Jul 19, 2022 •

edited

Loading

gatsby-cloud bot commented Jul 19, 2022 •

edited

Loading

pettinarip Jul 20, 2022

pettinarip Jul 20, 2022 •

edited

Loading

corwintines Jul 20, 2022

pettinarip Jul 21, 2022

pettinarip Jul 20, 2022

pettinarip Jul 21, 2022

corwintines Jul 20, 2022

pettinarip Jul 21, 2022

corwintines Jul 20, 2022

corwintines Jul 20, 2022 •

edited

Loading

pettinarip Jul 21, 2022

corwintines left a comment •

edited

Loading

pettinarip Jul 21, 2022

Resolve 404 pages #7137

Resolve 404 pages #7137

Conversation

pettinarip commented Jul 19, 2022 • edited Loading

gatsby-cloud bot commented Jul 19, 2022 • edited Loading

Gatsby Cloud Build Report

Build Details

Choose a reason for hiding this comment

pettinarip Jul 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corwintines Jul 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

corwintines left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pettinarip commented Jul 19, 2022 •

edited

Loading

gatsby-cloud bot commented Jul 19, 2022 •

edited

Loading

pettinarip Jul 20, 2022 •

edited

Loading

corwintines Jul 20, 2022 •

edited

Loading

corwintines left a comment •

edited

Loading