In my backend I have a series of validations when logging in. These validations return errors. I see these errors (from the frontend) in the chrome inspector, in the network tab, filtering the XHR (image).
The thing is that, if I login
put a in my front-end action try catch
, the error that it catches (and I show on the console) does not have all the details. It just says Error: Network error: Response not successful: Received status code 500
.
I want to show custom alerts and for this it would be good to be able to get the error as I am seeing it in the browser inspector .
Login in the backend
async loginUser(_, { input }) {
const { errors, valid } = validateLoginInput(input.username, input.password)
if (!valid) {
return new UserInputError("Errores:", { errors })
}
let user = await User.findOne({ username: input.username })
if (!user) {
user = await User.findOne({ email: input.username })
if (!user) {
errors.general = "El usuario o e-mail ingresado no se encuentran registrados"
return new UserInputError("Error de credenciales", { errors })
}
}
const match = await bcrypt.compare(input.password, user.password)
if (!match) {
console.log("tengo errores en valid: ",errors)
errors.general = "La contraseña es incorrecta."
return new UserInputError("Error de credenciales", { errors })
}
const token = generateToken(user)
return {
...user._doc,
id: user._id,
password: 'null',
token
}
},
Login on the front end
async loginUser({ commit }, userData) {
try {
let { data: { loginUser } } = await apolloClient.mutate({
mutation: LOGIN_USER,
variables: userData
})
const user = {
username: loginUser.username,
email: loginUser.email,
id: loginUser._id
}
const token = loginUser.token
commit('loginUser', user)
commit('setToken', token)
localStorage.setItem('apollo-token', token)
router.push('/inicio')
} catch (err) {
console.log(err)
// ACA QUIERO VER EL ERROR DE LA IMAGEN
}
},
Does anyone know how to do that? I am using Vue 2 with Apollo. Thank you very much.
I found the solution here: https://github.com/apollographql/apollo-client/issues/2810
The solution was to add inside the catch:
And there I get an object with all the error data that I receive from the backend.
You must access the request catch directly
Taken from another answer link