How to handle Node.js API errors with React

Question

I am currently developing a RESTful API with the help of Node.js and a client with React.

I am at the very beginning, ie the creation of a user via a registration form, and I realized that I do not really know how to handle the errors that my API sends me with React.

For example if I want to register with a username that is already taken, the controller of my API will throw an error :

throw {status: 422, message: "Username already used"}

My React client will retrieve it and display it in the console at the moment, but it displays a very general error (Request failed with status code 422) and not the message "Username already used"

_addUser(username, email, password)
 .then((res) => {
   console.log(res);
 })
 .catch((err) => {console.log(err.message)})

Does anyone have an idea of how to solve my problem? Or another way to handle errors?

Errors like the one you are describing are valid responses. You should check the status code and then change React state so that you can render a nice message for your user. — Davin Tryon
– Davin Tryon, Commented Jul 22, 2019 at 16:00
@DavinTryon how can I check the status code in my React app ? — Paul28000
– Paul28000, Commented Jul 22, 2019 at 16:30
it depends what http library you are using. looks like it should be at res.status. — Davin Tryon
– Davin Tryon, Commented Jul 22, 2019 at 16:39
i'm using express, if i console.log res.status in the .catch the value is undefined — Paul28000
– Paul28000, Commented Jul 22, 2019 at 16:49

Muhammad Talha · Accepted Answer · 2023-12-25 09:42:33Z

5

Your Backend Node.js code:

return res.status(500).json({message: "Email already registered"})

Your Frontend React or React Native code:

try{// some code}
catch (error){
   console.log(error.response.data.message)}

edited Dec 25, 2023 at 9:42

answered Oct 19, 2021 at 9:42

Muhammad Talha

8421 gold badge7 silver badges10 bronze badges

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

Comments

Aman Gupta · Accepted Answer · 2019-07-23 10:11:19Z

2

Try this:

.catch((err) => {
    console.log(err.response); // err.response.status will give you the error code.
})

answered Jul 23, 2019 at 10:11

Aman Gupta

1,9144 gold badges33 silver badges60 bronze badges

Comments

TahaK332 · Accepted Answer · 2020-07-21 10:32:55Z

0

This is late, but I figured out why your custom error isn't showing. In your catch block, instead of console logging:

err.message

Try logging:

err.**response**

Look at this in your console and display accordingly :)

answered Jul 21, 2020 at 10:32

TahaK332

11 bronze badge

Comments

pycan · Accepted Answer · 2019-07-22 16:00:06Z

-1

You should throw error with the new keyword. Then you should be able to display the message.

throw new Error('Username already used')

Or if you are using express, you can go like this:

res.status(422).send('Username already used')

edited Jul 22, 2019 at 16:00

answered Jul 22, 2019 at 15:54

pycan

3614 silver badges19 bronze badges

6 Comments

Paul28000 Over a year ago

I'm getting "Error: Request failed with status code 500" using this, still not my custom error message :/

Paul28000 Over a year ago

I'm using Express but your second suggestion is still not giving me my custom message

pycan Over a year ago

Then you can check for the status code, 422 in your case, and display error message in your React application based on this code.

Paul28000 Over a year ago

But how can i get the status code in my React app ?

pycan Over a year ago

@Paul28000 what does you console.log(err) display?

|

Chirag Patel · Accepted Answer · 2020-07-07 11:08:07Z

Please refer a below link:
https://medium.com/@chiragpatel.cmpicamsit15/error-handling-from-express-js-node-js-to-react-axios-error-handling-7758de90d365

**Server Side Node Js Code :**

   module.exports = (app) => {
app.put(‘/updateUser’, (req, res, next) => {
passport.authenticate(‘jwt’, { session: false }, (err, user, info) => {
if (err) {
console.error(err);
}
if (info !== undefined) {
console.error(info.message);
res.status(403).send(info.message);
} else {
User.findOne({
where: {
username: req.body.username,
},
}).then((userInfo) => {
if (userInfo != null) {
console.log(‘user found in db’);
userInfo
.update({
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
})
.then(() => {
console.log(‘user updated’);
res.status(200).send({ auth: true, message: ‘user updated’ });
});
} else {
console.error(‘no user exists in db to update’);
res.status(401).send(‘no user exists in db to update’);
}
});
}
})(req, res, next);
});
};


**Client-Side (React JS) :**


updateUser = async (e) => {
const accessString = localStorage.getItem(‘JWT’);
if (accessString === null) {
this.setState({
loadingUser: false,
error: true,
});
}
const {
first_name, last_name, email, username
} = this.state;
e.preventDefault();
try {
const response = await axios.put(
‘http://localhost:3003/updateUser’,
{
first_name,
last_name,
email,
username,
},
{
headers: { Authorization: `JWT ${accessString}` },
},
);
// eslint-disable-next-line no-unused-vars
console.log(response.data);
this.setState({
updated: true,
error: false,
});
} catch (error) {
console.log(error.response.data);
this.setState({
loadingUser: false,
error: true,
});
}
};

Collectives™ on Stack Overflow

How to handle Node.js API errors with React

5 Answers 5

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related