What do you have ?
My frontend is made on Nuxt js and backend is made in node and graphql.
I have the following code snippet from my controller to generate relevant error message:
createUser: async function ({ userInput }, req) {
const errors = []
if (!validator.isEmail(userInput.email)) {
errors.push({ message: 'Email is invalid' })
}
//other custom error code
if (errors.length > 0) {
error = new Error('Invalid input')
error.data = errors;
error.code = 422;
throw error
}
//other code if no error
}
And my frontend code to reach the controller method from the page (register):
methods: {
async onSubmit(e) {
e.preventDefault()
const graphqlQuery = { //query code goes here}
const res = await this.$axios.post('http://localhost:8080/graphql', graphqlQuery, {
headers: {
'Content-Type': 'application/json'
}
})
if (res.status === 200) {
this.error.mode = true
this.error.title = 'Success ! '
this.error.message = 'Account created successfully. Please login'
this.error.type = 'success'
}
if (res.errors && res.errors[0].status === 422) {
this.error.mode = true
this.error.title = 'Verification failed ! '
this.error.message = res.errors[0].message
this.error.type = 'danger'
}
if (res.errors) {
this.error.mode = true
this.error.message = 'User creation failed ! '
this.error.type = 'danger'
}
}
}
And custom error page:
<template>
<b-container>
<b-row>
<b-col class="error-wrapper">
<h1 class="error-code">
{{ statusCode }}
</h1>
<h4>
{{ message }}
</h4>
<b-link to="/" class="btn to-home">
Home
</b-link>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
name: 'ErrorVue',
layout: 'default',
props: {
error: {
type: Object,
default: null
}
},
computed: {
statusCode () {
return (this.error && this.error.statusCode) || 500
},
message () {
return this.error.message || 'Error'
}
}
}
</script>
<style scoped>
</style>
What are you trying to do ?
I'm trying to handle and display the custom error code with in the page, with the above error handling code.
What is the issue ?
When I intentionally pass wring data to cause error. I'm being redirected to error page with status 500
.
I'm not able to console log error in the page(register) but able to log in the error.vue
page.
The error does contain the custom code and message. And I want to display them in page from where the method was initiated(register).
How do I display the custom message in the register.vue
page ? Or does anyone have alternative method to approach the issue ?