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]

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]

• javascript
• node.js
• reactjs
• axios

3 Answers 3

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

That's a very subjective question. You might need to use some middleware to handle async actions in a better way like redux-saga or redux-thunk.

The approach would be define a error state in your store. And, when you get an error update the state, dispatching an action.

And, in your component (container), you need to have an observer to get the updated error state.

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

For reference, there is a very basic and good tutorial by Dan. https://egghead.io/lessons/javascript-redux-displaying-error-messages

Axios have validateStatus in request-config where you can whitelist your status

https://github.com/axios/axios#request-config

// validateStatus defines whether to resolve or reject the promise for a given // HTTP response status code. If validateStatus returns true (or is set to null // or undefined), the promise will be resolved; otherwise, the promise will be // rejected.

axios
  .get("<URL>",{validateStatus: function (status) {
    return (status >= 200 && status < 300) || status==400;
  }})
  .then(function(response) {
    // handle success;
  })
  .catch(function(response) {
    // handle error
  })
  .finally(function(error) {
    // always executed
  }); ```