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); });
댓글 ( 4)
댓글 남기기