Axios post request returns data instead of rendering an error page

Question

I have this post request:

axios({
    method: "post",
    url: "/sessions/add",
    data: {
        session: {
          name: session.session.name,
          date: sessionDateInput.value,
        },
      },
    })
    //redirect back to sessions/add
    .then((res) => console.log(res))
    .catch((err) => console.log(err.response.data));

It works fine if all the post data is correct, however, if it is not correct I have an error page in my "views" directory set up, with that said, my express server isn't able to render res.render('errorPage') and instead of rendering the error page, throws an error in the console.

the post request works fine if I use the html and it is able to res.render:

<form method="post" action="/route"></form>

the error page:

any way to fix this?

Answer 1

Since the response contains a html-document in case of an error, you could replace the current document with its content, e.g.:

//...
.catch((err) => document.write(err.response.data));