Next.js: Custom error page being reloaded every ~3 seconds

[jooj123]

Bug report

I am currently using nextjs alongside express
I have a custom error page (_error.js) and each time the error page is triggered it reloads itself every 3 seconds or so for some strange reason

I believe this is a bug with nextjs as i dont have anything special in my express app outside of next which would suggest it should reload every 3 seconds.

Describe the bug

I have a custom error page (_error.js) and each time the error page is triggered it reloads itself every 3 seconds or so for some strange reason

To Reproduce

Create an express app which has a router and route like:

const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });

const router = new express.Router({
  strict: true,
  caseSensitive: true,
});

// for simplicity use a basic route here /unknown/
router.get(`/unknown/`, (req, res) =>
  nextApp.render(req, res, '/error', {}),
);

then in my error page i have something like:

function Error({ statusCode, message }) {
  return <div>Error Message: {message}</div>;
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;

  return {
    statusCode,
    message: err ? err.message : 'Oops...',
  };
};

export default Error;

As soon as i goto /unknown/ route - the error page displays but next seems to reload it every ~3 seconds for some weird reason.

Expected behavior

I expect it to goto the custom error page and not reload every 3 seconds.
This is bad because I dont want to overload the server with never ending requests from users to error pages (they should only get a loaded error page once)

System information

• OS: macOS
• Browser: any
• Version of Next.js: ^9.1.7

[jooj123]

Note - it looks similar to this one: https://github.com/zeit/next.js/issues/6973 but there is no error thrown in the custom error component
I have even tried to add a Error Boundary but that didnt make a difference

[jooj123]

I guess i can try and fix this in a PR if i can be given some pointers - as i have never contributed to nextjs before

[jamesmosier]

I followed your steps but was not able to reproduce. When I navigated to /unknown/ the custom error page was shown as expected but there was no reload of the page every 3 seconds.

Is there any other code or steps I could follow to try to reproduce? Does this happen for you with a new Next project?

[jooj123]

Hi - i have added a repo here which is based off a basic express generator and basic next setup - https://github.com/jooj123/test-nextjs

Added how to reproduce in the readme

cc @timneutkens @jamesmosier

[mattcarlotta]

Same problem here. I'm not using a custom express server, but I noticed the _error page seems to trigger getInitialProps in the _app.js file over and over while in development.

Example repo: https://github.com/mattcarlotta/nextjs-ssr-kit

Steps to reproduce:

1. Clone the repo and install dependencies.
2. Add a console.log("triggered _app.js getInitialProps") to the _app.js file in its getInitialProps.
3. Go to http://localhost:3000/error
4. Check console for repetitive getInitialProps calls.

[jooj123]

This one can be reproduced, can we remove the "Can't Reproduce" tag please?

[aoshi321]

I'm also experiencing the same in development mode. @jooj123 were you able to resolve this?
@timneutkens is this currently being looked at thx

[mattcarlotta]

A workaround I've found is to set up a custom 404 page so that if a user navigates to a page that doesn't exist, then they will land on the 404 page instead of the server-side 500 page. That said, if the server itself has an error, then the problem will still occur in development.

[timneutkens]

@timneutkens is this currently being looked at thx

Not actively, it's on the backlog. There's hundreds of open issues currently so feel free to contribute and investigate this issue.