Page resources not found for 404 page, doesn't render react.

[cezarcarvalhaes]

Description

On deployed site, when an non-existent route is hit, the resulting 404 page is unable to load page-data.json and thus doesn't not render React throwing the error Error: page resources for /fake-page not found. Not rendering React. The proper static page is displayed, however, react functionality is disabled. I searched other issues, but was unable to find a solution that worked.

For whatever reason, if you attempt to hit /fake-path, it attempts to load the page data for that non-existent path and not the 404 path. (looks for ../page-data/fake-path/page-data.json, instead of ../page-data/404/page-data.json). This only happens when the site is deployed using S3 and Cloudfront, however, things work as expected when running locally using gatsby serve.

#19618 was closed without a clear resolution due to the myriad of suggestions and related comments exceeded the original issue scope.

I have created a minimal reproduction that successfully recreates the problem. Any help with this is much appreciated.

We are using gatsby-plugin-s3 to optimize caching as well.

Steps to reproduce

This live reproduction renders the proper 404 page, but you'll see the error in the console.

Github Repo

Expected result

Redirect to 404, page-data.json for 404 page successfully loaded, no uncaught errors and React succesfully rendered.

Actual result

Error: page resources for /fake-page not found. Not rendering React.
page-data.json return 403 codes

Environment

System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 83.0
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.4.1 => 3.4.1
    gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.4.1
    gatsby-plugin-image: ^1.4.0 => 1.4.0
    gatsby-plugin-manifest: ^3.4.0 => 3.4.0
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0
    gatsby-plugin-s3: ^0.3.8 => 0.3.8
    gatsby-plugin-sharp: ^3.4.1 => 3.4.1
    gatsby-source-filesystem: ^3.4.0 => 3.4.0
    gatsby-transformer-sharp: ^3.4.0 => 3.4.0

[vladar]

Error 403 suggests that your S3 / CloudFront is incorrectly configured. Gatsby checks for "normal" status codes: 404, 200, 500. But when it sees unexpected status code 403 it simply retries 3 times and then surrenders:

gatsby/packages/gatsby/cache-dir/loader.js

Lines 137 to 186 in d38f4d9

	if (status === 200) {
	try {
	const jsonPayload = JSON.parse(responseText)
	if (jsonPayload.path === undefined) {
	throw new Error(`not a valid pageData response`)
	}
	return Object.assign(loadObj, {
	status: PageResourceStatus.Success,
	payload: jsonPayload,
	})
	} catch (err) {
	// continue regardless of error
	}
	}
	// Handle 404
	if (status === 404 || status === 200) {
	// If the request was for a 404 page and it doesn't exist, we're done
	if (pagePath === `/404.html`) {
	return Object.assign(loadObj, {
	status: PageResourceStatus.Error,
	})
	}
	// Need some code here to cache the 404 request. In case
	// multiple loadPageDataJsons result in 404s
	return this.fetchPageDataJson(
	Object.assign(loadObj, { pagePath: `/404.html`, notFound: true })
	)
	}
	// handle 500 response (Unrecoverable)
	if (status === 500) {
	return Object.assign(loadObj, {
	status: PageResourceStatus.Error,
	})
	}
	// Handle everything else, including status === 0, and 503s. Should retry
	if (retries < 3) {
	return this.fetchPageDataJson(
	Object.assign(loadObj, { retries: retries + 1 })
	)
	}
	// Retried 3 times already, result is an error.
	return Object.assign(loadObj, {
	status: PageResourceStatus.Error,
	})

You need to configure your S3 properly to make sure CloudFront returns a 404 status code and not 403.

Check out those articles on more details and how to fix the configuration:

https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/
https://stackoverflow.com/questions/34882125/getting-403-forbidden-when-loading-aws-cloudfront-file

So this error is not really an error with Gatsby but rather with your AWS setup. As stated, this is slightly tangential to Gatsby, and it seems like we’ve provided enough information to make an informed decision.

If this is not the case, or if we can help further--please don’t hesitate to reach out or comment on this issue, and we’d love to take another look.

Thanks for using Gatsby 💪

[cezarcarvalhaes]

Thanks for the great solution! My apologies for not recognizing the true scope of the issue.

---

For anyone who finds this in the future, I simply updated my s3 Access Control List to allow Everyone (public access) to list and read all objects. Originally, we were setting each object's permissions as public in the deploy script, but the overall bucket itself didn't allow all objects to be accessible, so the non-existent object was throwing a 403 instead of the 404.

[lettie16]

This issue seems to have surfaced again.
Reading through this issue we have exactly the same problem. The only difference is we create our 404 page with createPages as we need to provide locale info. The errors coming back for the resource not being found are all 404's so not 403's as described above and we host on Gatsby Cloud.
Same error message.

Uncaught (in promise) Error: page resources for /fake-page not found. Not rendering React
    at production-app.js:233:13

We are running on Gatsby 4.24.8

Any suggestions?