Error page displays invalid information

[dwightwatson]

Bug report

Describe the bug

I just upgraded to Next.js 8. When I visit a page that does not exist, the error message is "An unexpected error has occurred." which isn't entirely correct for a 404.

When looking at the source for the default error page it looks as though there is a check against the status code to see if a different message should be shown, but having a quick look at the developer tools it doesn't look like the status code is being passed through the props as expected.

In addition this line sets the title of the page but it looks wonky when the status code is not available, as shown in the attached screenshot.

To Reproduce

Run next build && next export and check the contents of the build 404.html file.

I found this issue was present when deployed to Netlify also.

Expected behavior

The 404 error page indicates the page was not found, not that an error occurred.

Screenshots

This screenshot shows the broken <title> tag.

System information

• OS: macOS 10.14.4
• Version of Next.js: 8.0.0

[Ephem]

I've been looking into this during the evening and have found out a couple of things:

• I can replicate this error by running the basic-export example in 7.0.3 as well. Are you sure this only happens in 8.0.0 for you @dwightwatson?
• It all boils down to the error page needing a correct status code to render the correct content, and when we statically export, we currently don't have a way to supply that status code at build time.

res needs to contain a statusCode when this line gets called in worker.js.

I think we might need to add a way to specify a status-code to exportPathMap, and also default to 404 for the default 404 page if none is specified there.

I also found a broken test relating to this in test/integration/export/test/ssr.js that currently gives a false negative.

@timneutkens If adding statusCode as an option to exportPathMap sounds like a reasonable solution I think I can work on a PR for this?

[dwightwatson]

I only noticed this for the first time in 8.0.0, didn't check if it existed earlier. Sounds like this may have been around for a little while then.

[Ephem]

Still a bug that needs fixing, glad you found it! :)

When I thought some more about this I realised that maybe it would be nice allowing for configuring passing any of the values into ´getInitialProps´ for static exports?

[timneutkens]

@Ephem I think it's not super useful to allow statusCode and it might be confusing to users that may expect that the file will hold that statusCode while in reality it will be what the web server they host on returns (most likely 200). When 404 is rendered err will always be null, so in this case it should probably be something like:

  static getInitialProps ({ res, err }) {
    const statusCode = err === null ? 404 : (res ? res.statusCode : (err ? err.statusCode : null))
    return { statusCode }
  }

[Ephem]

Yeah, that did give me some pause, and after sleeping on it I realised the use case for different status codes there (building error pages for other codes), can be solved without additional complexity by just adding custom pages for those anyway. Good call!

I’ll work on a PR and also make sure that test is working correctly. :)

[timneutkens]

Thank you @Ephem 🙏🙏🙏