Custom error page getInitialProps and render called even when there is no error

[tomdohnal]

I'm not sure if I understand how custom _error page works.

The way I think it's supposed to work is that if (and only if) an error is thrown in the application, it should render the _error page (and call the getInitialProps method).

What I'm not getting is that when I have a custom _error page that looks like this:

import React from "react";

function MyError() {
  console.log("Error render");
  return <div>Error</div>;
}

MyError.getInitialProps = () => {
  console.log("Error getInitialProps");

  return {};
};

export default MyError;

It calls both the console.log("Error getInitialProps") and console.log("Error render") no matter whether an error is actually thrown. It doesn't display the error page in the UI, but the getInitialProps is called and the component is instantiated somewhere.

I doubt this is a bug in Next.js (it's rather a bug in my mental model 😃) but I can't wrap my head around how it works right now :)

[timneutkens]

I assume you don't have a pages/404.js and it's being rendered for a 404 page. If your page does not have a favicon.ico the browser automatically tries to load it and that would result in the server rendering the 404/error page depending on which you have (We recommend adding pages/404.js if you have pages/_error.js though)

[tomdohnal]

Oh yeah, my bad you're right . It was because I use some service workers on other project on the same localhost:3000 which the browser tries to call and it throws 404.

I'll add a special 404 page then :) Thanks a lot!