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]

Suman Kundu · Accepted Answer · 2019-08-21 02:53:17Z

14

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

answered Aug 21, 2019 at 2:53

Suman Kundu

1,74218 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashmah · Accepted Answer · 2019-08-21 03:06:23Z

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

MKR · Accepted Answer · 2019-08-21 04:41:45Z

0

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
  }); ```

answered Aug 21, 2019 at 4:41

MKR

363 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related