How to send error messages from express to react/redux - reactjs

Question

I have a MERN app using redux. My actions look like this:
export const logIn = (logInData) => async (dispatch) => {
try {
const { data } = await api.logIn(logInData);
localStorage.setItem('auth', JSON.stringify(data))
dispatch({
type: LOG_IN,
payload: data
});
} catch (error) {
dispatch({
type: ADD_FLASH_MESSAGE,
payload: error
})
}
}
And my server looks like this
export const logIn = async (req, res) => {
const logInParams = req.body;
const user = await User.findOne({ email: logInParams.email });
if (!user) {
console.log("USER NOT FOUND");
res.status(400).json({
message: "Invalid credentials."
});
}
const passwordMatches = await bcrypt.compare(logInParams.password, user.password);
if (!passwordMatches) {
console.log("WRONG PASSWORD")
return res.status(400).json({
message: "Invalid credentials."
})
}
// Sign in user with jwt
const payload = {
user: {
id: user.id
}
}
jwt.sign(payload, config.get('jwtSecret'), (error, token) => {
if (error) throw error;
console.log('Successfully logged in');
return res.status(200).json({
token: token,
user: user,
loggedIn: true
});
})
}
I'm not able to access my error messages in my actions. I just get error messages like so
POST http://localhost:5000/auth/login 400 (Bad Request)
And my console.log looks like this:
Error: Request failed with status code 400
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)
How do I access my custom error messages from my server?

Answer 1

try to get the status as error.status and custom message as error.data.message

Answer 2

your custom error message contain in error.response.data
try change this in your action:
export const logIn = (logInData) => async (dispatch) => {
try {
const { data } = await api.logIn(logInData);
localStorage.setItem('auth', JSON.stringify(data))
dispatch({
type: LOG_IN,
payload: data
});
}
catch (error) {
dispatch({
type: ADD_FLASH_MESSAGE,
payload: **error.response.data**
})
}
}