1. 에러 메시지 출력을 위한 토스트  vue-toasted 설치

https://www.npmjs.com/package/vue-toasted

 

 

 

2. 토스트  plugins/vue-toasted.js

임의 변소 error, success, type1 등을 만들어서 사용한다.

전역으로 설정 vue-toasted.js

 

import Vue from 'vue'
import Toasted from 'vue-toasted';


Vue.use(Toasted, {
    iconPack: 'mdi',
    
});

//Vue.prototype.$toasted = Toasted;




Vue.toasted.register('error', (payload) => {
    return payload;
}, {
    icon: 'mdi-alert',
    position: 'bottom-right',
    duration: 5000,
    className:'red',
    action: {
        text: "닫기",
        class: 'title',
        onClick: (e, toastObject) => {
            toastObject.goAway(0);
       }
    }
});


Vue.toasted.register('success', (payload) => {
    return payload;
}, {
    icon: 'mdi-alert',
    position: 'bottom-right',
    duration: 5000,
    className: 'success',
    action: {
        text: "닫기",
        class: 'title',
        onClick: (e, toastObject) => {
            toastObject.goAway(0);
        }
    }
});


Vue.toasted.register('type1', (payload) => {
    return payload;
}, {
    icon: 'mdi-alert',
    position: 'bottom-right',
    duration: 5000,
    className: 'dark',
    action: {
        text: "닫기",
        class: 'title',
        onClick: (e, toastObject) => {
            toastObject.goAway(0);
        }
    }
});

 

 

 

 

3. main.js  같은 위치에 공통 error.js 파일 생성

import Vue from 'vue'



Vue.config.errorHandler = e => {    
    // console.log("errorHandler");
    // console.error(e.message);
    Vue.prototype.$toasted.global.error(e.message);
}

 

 

4. main.js  에  vue-toasted.js,  error.js 임포트 

 

import Vue from 'vue'
import './error'
import './plugins/vue-toasted'
import './plugins/vuetify'
import './plugins/firebase'
import './plugins/axios'
...

 

 

 

 

ex) try catche 사용하지 않아도 에러 메시지를 사용자에게 표시

       async axiosRead(){
           try {
             const res= await this.$axios.get('http://localhost:3000/test/12');
             this.textRead=res.data;               
           } catch (error) {
               console.error(error);
           }
        },


=>

       async axiosRead(){         
           //this.$toasted.global.error('ee');
             const res= await this.$axios.get('http://localhost:3000/test/12');
             this.textRead=res.data;                        
        },

 

 

 

etc) css 클래스 수정

.toasted-container .toasted .action {
    text-decoration: none !important;
    color: white !important;
}

 

 

개별 메시지 알람 사용시 다음과 같이 호출해서 사용

  
             1)   this.$toasted.global.error('메시지 !');
              2) this.$toasted.global.success('메시지 !');
                3)this.$toasted.global.type1('메시지 !');

 

 

 

 

vueitfy  클래스

https://v15.vuetifyjs.com/ko/framework/colors

 

소스 :

https://github.com/braverokmc79/vf/blob/main/src/plugins/vue-toasted.js

 

 

 

 

 

 

백엔드 Nodejs 에러 처리

 

express-async-errors 설치

 

npm install express-async-errors --save

 

https://www.npmjs.com/package/express-async-errors

 

require('express-async-errors');

임포트 후 다음과 같이 사용

app.use((err, req, res, next) => {

  res.send(err.message);

});