title: How to see axios error response JSON in React
body: <p>I have a form in my react which allows users fill out their info and then sends a Post requests to create a new user in my database once submitted. I am using axios to make the http call with a node backend. The post request works on the backend, but I am now trying to handle errors on the front end (i.e. if a user enters an invalid email, the backend catches this and sends an error status back, and I want to display a message to the user saying they need to enter a valid email, etc).</p>
  
  <p>I have the following code on my backend to handle the request:</p>
  
  <pre><code>const { check, validationResult } = require('express-validator/check');
  
  studentRoutes.route('/add').post([
    check('email').isEmail(), check('class_year').isInt({min: 2014, max: 2022})],
    function (req, res) {
  
    //make sure input is valid
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(422).json({ errors: errors.array() });
    }
    .
    .
    .
    //post call succesful
    res.status(200).send("Student successfully Added to database");
  });
  </code></pre>
  
  <p>On the front end, I make the http call as follows:</p>
  
  <pre><code>app.post('student/add', obj)
      .then(res =&gt; console.log(res.data))
      .catch(err =&gt; console.log(err));
  </code></pre>
  
  <p>where app is axios.</p>
  
  <p>When I try this with correct data (i.e. should not return error), the message "Student successfully added to database" prints to the console as expected.</p>
  
  <p>When I try this with a bad email (i.e. should return error), all that is printed to my console is:</p>
  
  <pre><code>(X) POST http://localhost:4000/student/add 422 (Unprocessable Entity)
  Error: Request failed with status code 422
      at createError (createError.js:17)
      at settle (settle.js:19)
      at XMLHttpRequest.handleLoad (xhr.js:78)
  </code></pre>
  
  <p>Where the first POST error is caught by my browser and the second part starting "Error: ..." is printed to the console.</p>
  
  <p>When I try to access the error (err.errors or similar) it returns undefined. How can I access the status code and the body of the error sent?</p>
  
  <p>Note: I have also tried replacing the line <code>return res.status(422).json({ errors: errors.array() });</code> with <code>return res.status(422).send({ errors: errors.array() });</code> but that does not help and the results are the same.</p>