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 const { status } = error.response
if (status >= 500) { if (status >= 500) {
// do something ? router.push({name: 'genericError', params: { err : error.response }})
} }
if (status === 404) { if (status === 404) {
router.push({name: '404', params: { err : error.response.data.error }}) router.push({name: '404'})
} }
return Promise.reject(error) return Promise.reject(error)

View File

@ -165,7 +165,7 @@
this.ShowTwofaccountInModal = true; this.ShowTwofaccountInModal = true;
} }
catch (error) { 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'); this.$router.go('/login');
} }
catch (error) { 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'"> <div class="error-message" v-if="$route.name == '404'">
<p class="error-404"></p> <p class="error-404"></p>
<p>{{ $t('errors.resource_not_found') }}</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>
<div v-else-if="$route.name == 'flooded'"> <div v-else-if="$route.name == 'flooded'">
<p class="error-generic"></p> <p class="error-generic"></p>
@ -12,16 +12,18 @@
{{ $t('errors.already_one_user_registered') }}<br> {{ $t('errors.already_one_user_registered') }}<br>
{{ $t('errors.cannot_register_more_user') }} {{ $t('errors.cannot_register_more_user') }}
</p> </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>
<div v-else> <div v-else>
<p class="error-generic"></p> <p class="error-generic"></p>
<p>{{ $t('errors.error_occured') }}</p> <p>{{ $t('errors.error_occured') }}</p>
<p v-if="debugMessage">{{ debugMessage }}</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-white">{{ $t('errors.refresh') }}</router-link></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>
<!-- <div v-if="debugMode == 'development'"> -->
<!-- </div> -->
</modal> </modal>
</div> </div>
</template> </template>
@ -34,17 +36,19 @@
data(){ data(){
return { return {
ShowModal : true, ShowModal : true,
debugMessage : this.err ? this.err : null,
} }
}, },
computed: { computed: {
debugMode: function() { debugMode: function() {
return process.env.NODE_ENV return process.env.NODE_ENV
},
error: function() {
return this.err === undefined ? {} : this.err
} }
}, },
props: ['err'], props: ['err'], // error.response
components: { components: {
Modal Modal

View File

@ -23,6 +23,11 @@
<button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.sign_in') }}</button> <button type="submit" class="button is-link" @click="handleSubmit">{{ $t('auth.sign_in') }}</button>
</div> </div>
</div> </div>
<div class="field" v-if="errorMessage">
<span class="tag is-danger">
{{ errorMessage }}
</span>
</div>
</form> </form>
</div> </div>
</div> </div>
@ -49,7 +54,8 @@
return { return {
email : '', email : '',
password : '', password : '',
validationErrors: {} validationErrors: {},
errorMessage: ''
} }
}, },
@ -73,16 +79,16 @@
catch (error) { catch (error) {
this.validationErrors = {} this.validationErrors = {}
this.errorMessage = ''
if( error.response.status === 401 ) { if( error.response.status === 401 ) {
this.validationErrors['email'] = '' this.errorMessage = this.$t('auth.forms.password_do_not_match')
this.validationErrors['password'] = [ this.$t('auth.forms.password_do_not_match') ]
} }
else if( error.response.data.validation ) { else if( error.response.data.validation ) {
this.validationErrors = error.response.data.validation this.validationErrors = error.response.data.validation
} }
else { 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 => { .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 this.validationErrors = error.response.data.validation
} }
else { 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 this.errorMessage = error.response.data.requestFailed
} }
else { 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 this.errorMessage = error.response.data.resetFailed
} }
else { 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 this.validationErrors = error.response.data.validation
} }
else { 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 this.validationErrors = error.response.data.validation
} }
else { 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 this.validationErrors = error.response.data.validation
} }
else { 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 this.tempIcon = this.twofaccount.icon
} }
catch (error) { 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 this.validationErrors = error.response.data.validation
} }
else { 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 this.validationErrors = error.response.data.validation
} }
else { 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": { "errors": {
"resource_not_found": "Resource not found", "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.", "already_one_user_registered": "There is already a registered user.",
"cannot_register_more_user": "You cannot register more than one user.", "cannot_register_more_user": "You cannot register more than one user.",
"refresh": "refresh", "refresh": "refresh",
"please": "Please ", "please": "Please ",
"response": { "response": {
"no_valid_totp": "No valid TOTP resource in this QR code" "no_valid_totp": "No valid TOTP resource in this QR code"
} },
"something_wrong_with_server": "Something is wrong with your server"
}, },
"pagination": { "pagination": {
"previous": "&laquo; Previous", "previous": "&laquo; Previous",

View File

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