how to show error message in react js when http request send?

Question

could you please tell me how to show error message in react js when http request send ?

I make a service in the nodejs where I am sending 400 status with error message . I want to show this error message on frontend.

app.get('/a',(req,res)=>{
    res.status(400).send({message:" some reason error message"})
})

Now I want to show this error message on frontend .on catch I will not get this message.

try {
            const r = await axios.get('http://localhost:3002/a');
} catch (e) {
            console.log('===============================================')
            console.log(e)
            console.log(e.data)
            hideLoading();
            setErrorMessage(e.message);
            showErrorPopUp();
        }

on catch i will not get this message.getting on stack of error [![enter image description here][1]][1]

Answer 1

It's better to respond with a JSON in this particular case from the server:

app.get('/a',(req,res) => {
    res.status(400).json({message:"some reason error message"})
})

So in the client, you can read from error.response easily

try {
  const r = await axios.get('http://localhost:3002/a');
} catch (e) {
  if (e.response && e.response.data) {
    console.log(e.response.data.message) // some reason error message
  }
}

Read more about handling caught errors in axios here