Vue 오류 처리기와 Axios로 편안한 예외 처리

이런 일이 없습니까?

예외 처리를 잊어 버렸고 콘솔로 흘렀습니다

예외 발생시에 경고를 표시하는 것만으로 4 행도 여분에 코드를 쓰지 않으면 안되어 힘들다

XXX.vue

methods: {
  onClick() {
    try {
      this.something();
    } catch (error) {
      alert(error.message);
    }
  },
},

Vue 오류 처리기 정보

Vue.config.errorHandler 을 사용하면 Vue에서 발생하는 오류를 거의 잡을 수 있습니다. 비동기 처리 내에서 발생한 오류는 잡을 수 없으므로 나머지는 addEventListener로 잡습니다.

main.ts

// ほとんどのエラーをキャッチ
Vue.config.errorHandler = function (err, vm, info) {
  // 2.2.0 以降で使用できます。
  alert(err);
}
// 残りのエラーをキャッチ
window.addEventListener("error", event => {
  alert(event.error);
});
window.addEventListener("unhandledrejection", event => {
  alert(event.reason);
});

아래의 설명과 같이 버전마다 사양이 다르므로 주의.



Vue.config.errorHandler는 어디에서 발생한 오류를 캡처 할 수 있는지 - Qiita 가 알기 쉽게 구분되어 참고가 되었습니다.

Axios의 공통 처리에 대하여

Axios의 일반적인 처리는 인터셉터 을 사용하면 깨끗하게 합니다.
모든 요청 헤더에 X-Request-Id: uuid를 붙인 예입니다.

Repository.ts

client.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['X-Request-Id'] = uuidv4();
  return config;
});

다음 예제에서는 request와 response 시간을 측정하고 API 통신에 몇 밀리초가 걸렸는지 매번 콘솔에 출력합니다. Sentry를 사용하면 시간이 걸리는 API를 프론트 측에서 측정할 수 있군요.

Vue의 오류 모니터링에 Sentry를 사용해 보았습니다 - Qiita

Repository.ts

import axios from 'axios';

const repository = axios.create({
  baseURL: 'http://localhost:8080',
});
repository.interceptors.request.use(request => {
  performance.mark('start');
  return request;
});
repository.interceptors.response.use(
  // 2XX範囲内のステータスコード
  (response) => {
    performance.mark('finish');
    performance.measure('request-to-response', 'start', 'finish');
    const message = `${performance.getEntriesByName('request-to-response')[0].duration}`;
    console.log(message);
    // Sentryでログを残すもよし
    // Sentry.captureMessage(message, Sentry.Severity.Debug);
    return response;
  },
  // 2XX範囲外のステータスコード
  (error) => {
      return Promise.reject(error);
  }
);
export default repository;

결과

예외 처리 잊어도 확실하게 경고로 표시해 준다

일반적인 예외 처리에 대해서는 기계적인 try,catch를 쓰지 않아도 되었다

XXX.vue

methods: {
  onClick() {
    this.something();
  },
},