Next.js: Changing response status code in _error.js

[chandhravadanan]

changing response code in custom error page, not working.

This is content in pages/_error.js file.

import React from 'react'

function Error(props) {
    return (
       <div>
             my custom page
      </div>
    )
}

Error.getInitialProps = ({ req, res, err }) => {
     res.status = 200 // changing the response code here
     return {}
}

but status is always goes as 404. any suggestion?

[jamesmosier]

What are you wanting to do with that status code that is not happening currently?

Take a look at the docs on the custom error pages.

You could return the error status as an initial prop:

function Error({ statusCode }) {
 // use the statusCode however
}

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

[chandhravadanan]

wanted to redirect to some other page when 404/500 error occurs.

import React from 'react'

function Error(props) {
    return (
       <div>
             my custom page
      </div>
    )
}

Error.getInitialProps = ({ req, res, err }) => {
     res.writeHead(302, {Location: redirectUrl}); // still it goes as 404 
     res.end();
     return new Promise((resolve, reject)=>{})
}

[jamesmosier]

If you just want to redirect, then you'll find this doc helpful on redirecting in getInitialProps

Basically...

if (res && res.statusCode === 404) {
  res.writeHead(302, {
    Location: '/some_other_page'
  });
  res.end();
} else if (err && err.statusCode === 404) {
  Router.push('/some_other_page');
}

return {};

Here is a codesandbox that shows this happening. If you try to go to a page that doesn't exist, it will redirect to the about page in my example.

[chandhravadanan]

But i am getting 404 response code for the same code.

My dependencies are

"next": "^9.1.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",

[jamesmosier]

If you could publish an example repository or codesandbox.io example with this issue that would be helpful.

[chandhravadanan]

Works as expected in codesandbox. May be issue occurs from hosting side (zeit.co)

[jamesmosier]

You could look into the Now docs to see about custom routing for your error pages. See this link or this one for more information about this.

But without knowing your specific setup and use case, it is hard to determine what the correct approach is and whether this is a Next/Now bug or just an issue you are encountering. If you have a more thorough example I could help further, otherwise I would just be guessing as to what your desired outcome is.

[lfades]

@chandhravadanan As @jamesmosier said, you should do redirects inside your page's getInitialProps, not in _error.js, which is used for error handling, otherwise you could end up with unexpected results.

Can you share more details about your project or the code that you're trying to get working?

[chandhravadanan]

@jamesmosier @lfades

This is the sample code https://github.com/chandhravadanan/error_redirect
hosted in zeit https://errorredirect.stupidloser00.now.sh

When i try to access https://errorredirect.stupidloser00.now.sh/unknownpage i am getting 404 error rather than 302 but location header is set as mentioned in the code (https://google.com)

[lfades]

@chandhravadanan Why are you trying to redirect in _error.js? That page should be used for errors, like a 404. You can instead use a redirect route.

[chandhravadanan]

@chandhravadanan Why are you trying to redirect in _error.js? That page should be used for errors, like a 404. You can instead use a redirect route.

302 redirection happens properly for 500 error if it handled in _error.js file. Why it is not applying same behaviour for 404?

https://errorredirect.stupidloser00.now.sh/500

ErrorHandler.getInitialProps = ({ req, res, err }) => {
  try{
      if (res && ( res.statusCode === 404 || res.statusCode ===500)) {
        res.writeHead(302, {Location: 'https://google.com'});
        res.end();
        } else if (err && (err.statusCode === 404 || err.statusCode === 500)) {
            Router.push('https://google.com');
        }
    }catch(e){
        console.log('error occurred', res)
    }
  return {};
};

[maxchehab]

Also noticing this issue. I can set headers in the error page, but not the status code.

[cmlbrnc]

Any suggestion for next.js server responded with the HTTP status code: 404 ? Thank you in advance