Better errors handling from vuejs side

This commit is contained in:
Bubka 2020-01-17 00:23:38 +01:00
parent 01862e11a3
commit a68a9b8f39
11 changed files with 42 additions and 30 deletions

View File

@ -20,11 +20,11 @@ axios.interceptors.response.use(response => response, error => {
const { status } = error.response
if (status >= 500) {
// do something ?
router.push({name: 'genericError', params: { err : error.response }})
}
if (status === 404) {
router.push({name: '404', params: { err : error.response.data.error }})
router.push({name: '404'})
}
return Promise.reject(error)

View File

@ -165,7 +165,7 @@
this.ShowTwofaccountInModal = true;
}
catch (error) {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
//this.$router.push({ name: 'genericError', params: { err: error.response } });
}
},
@ -194,7 +194,7 @@
this.$router.go('/login');
}
catch (error) {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
}

View File

@ -4,7 +4,7 @@
<div class="error-message" v-if="$route.name == '404'">
<p class="error-404"></p>
<p>{{ $t('errors.resource_not_found') }}</p>
<p class="">{{ $t('errors.please') }}<router-link :to="{ name: 'accounts' }" class="is-text has-text-white">{{ $t('errors.refresh') }}</router-link></p>
<p class="">{{ $t('errors.please') }}<router-link :to="{ name: 'accounts' }" class="is-text has-text-grey-light">{{ $t('errors.refresh') }}</router-link></p>
</div>
<div v-else-if="$route.name == 'flooded'">
<p class="error-generic"></p>
@ -12,16 +12,18 @@
{{ $t('errors.already_one_user_registered') }}<br>
{{ $t('errors.cannot_register_more_user') }}
</p>
<p>{{ $t('errors.please') }}<router-link :to="{ name: 'accounts' }" class="is-text has-text-white">{{ $t('auth.sign_in') }}</router-link></p>
<p>{{ $t('errors.please') }}<router-link :to="{ name: 'accounts' }" class="is-text has-text-grey-light">{{ $t('auth.sign_in') }}</router-link></p>
</div>
<div v-else>
<p class="error-generic"></p>
<p>{{ $t('errors.error_occured') }}</p>
<p v-if="debugMessage">{{ debugMessage }}</p>
<p>{{ $t('errors.please') }}<router-link :to="{ name: 'accounts' }" class="is-text has-text-white">{{ $t('errors.refresh') }}</router-link></p>
<p v-if="error" class="has-text-grey-lighter">{{ error.statusText }}</p>
<p>{{ $t('errors.please') }}<router-link :to="{ name: 'accounts' }" class="is-text has-text-grey-light">{{ $t('errors.refresh') }}</router-link></p>
<p v-if="debugMode == 'development' && error.data">
<strong>{{ error.data.message }}</strong><br>
{{ error.data.debug }}
</p>
</div>
<!-- <div v-if="debugMode == 'development'"> -->
<!-- </div> -->
</modal>
</div>
</template>
@ -34,17 +36,19 @@
data(){
return {
ShowModal : true,
debugMessage : this.err ? this.err : null,
}
},
computed: {
debugMode: function() {
return process.env.NODE_ENV
},
error: function() {
return this.err === undefined ? {} : this.err
}
},
props: ['err'],
props: ['err'], // error.response
components: {
Modal

View File

@ -23,6 +23,11 @@
<button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.sign_in') }}</button>
</div>
</div>
<div class="field" v-if="errorMessage">
<span class="tag is-danger">
{{ errorMessage }}
</span>
</div>
</form>
</div>
</div>
@ -49,7 +54,8 @@
return {
email : '',
password : '',
validationErrors: {}
validationErrors: {},
errorMessage: ''
}
},
@ -73,16 +79,16 @@
catch (error) {
this.validationErrors = {}
this.errorMessage = ''
if( error.response.status === 401 ) {
this.validationErrors['email'] = ''
this.validationErrors['password'] = [ this.$t('auth.forms.password_do_not_match') ]
this.errorMessage = this.$t('auth.forms.password_do_not_match')
}
else if( error.response.data.validation ) {
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
}

View File

@ -77,7 +77,7 @@
}
})
.catch(error => {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
});
},
@ -108,7 +108,7 @@
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
}

View File

@ -66,7 +66,7 @@
this.errorMessage = error.response.data.requestFailed
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
}

View File

@ -85,7 +85,7 @@
this.errorMessage = error.response.data.resetFailed
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
}

View File

@ -120,7 +120,7 @@
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
@ -158,7 +158,7 @@
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
@ -192,7 +192,7 @@
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}

View File

@ -83,7 +83,7 @@
this.tempIcon = this.twofaccount.icon
}
catch (error) {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
},
@ -110,7 +110,7 @@
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}
},
@ -148,7 +148,7 @@
this.validationErrors = error.response.data.validation
}
else {
this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
this.$router.push({ name: 'genericError', params: { err: error.response } });
}
}

View File

@ -30,14 +30,15 @@ export default {
},
"errors": {
"resource_not_found": "Resource not found",
"error_occured": "An error occured",
"error_occured": "An error occured:",
"already_one_user_registered": "There is already a registered user.",
"cannot_register_more_user": "You cannot register more than one user.",
"refresh": "refresh",
"please": "Please ",
"response": {
"no_valid_totp": "No valid TOTP resource in this QR code"
}
},
"something_wrong_with_server": "Something is wrong with your server"
},
"pagination": {
"previous": "&laquo; Previous",

View File

@ -14,13 +14,14 @@
*/
'resource_not_found' => 'Resource not found',
'error_occured' => 'An error occured',
'error_occured' => 'An error occured:',
'already_one_user_registered' => 'There is already a registered user.',
'cannot_register_more_user' => 'You cannot register more than one user.',
'refresh' => 'refresh',
'please' => 'Please ',
'response' => [
'no_valid_totp' => 'No valid TOTP resource in this QR code',
]
],
'something_wrong_with_server' => 'Something is wrong with your server'
];