컴포넌트 내부의 단일 지점에서 vuejs 오류를 캡처하는 방법

컴포넌트 내부의 단일 지점에서 vuejs 오류를 캡처하는 방법

이 컴포넌트에서는 많은 공리를 사용하고 있습니다.then().catch()내가 항상 던지고 있는 캐치 안console.error()예를 들어 다음과 같습니다.

axios.get(
 //...
).then(
 //...
).catch(
 error => {
  console.error(..)
 }
)

그 밖에도 에러를 던지는 곳이 몇 군데 있어요.에러를 글로벌하게 처리할 수 있는 방법이 없는지 찾고 있습니다.사용자 인터셉터를 사용할 수 있는 악리는 알고 있습니다만, vue 컴포넌트는 에러를 검출할 필요가 있기 때문에 하나의 함수로 통합할 수 있습니까?

Vue API는 를 제공하지만 메서드의 오류를 검출하지 않습니다(강조).

컴포넌트 렌더링 기능 및 워처 중 검출되지 않은 에러에 대한 핸들러를 할당합니다.

이하에 예를 나타냅니다.

구성 요소 렌더링 중 오류 처리:

Vue.config.errorHandler = function (err, vm, info)  {
  console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};

Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
  el: '#app',
  data: {
    people: [
      {name: 'Check the console', address: {zip: 4444}},
      {name: 'No address',     /* address: {zip: 5555} */}
    ]
  }
})

<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>
<template id="person-template">
  <div>
    Name: <b>{{ person.name }}</b> - Zip: {{ person.address.zip }}
  </div>
</template>
<div id="app">
  <div v-for="person in people">
    <person :person="person"></person>
  </div>
</div>

워처 내부 오류 처리:

Vue.config.errorHandler = function (err, vm, info)  {
  console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};

Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
  el: '#app',
  data: {
    message: "Some message"
  },
  watch: {
    message() {
      console.log(this.message.trim());
    }
  }
})

<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>

<div id="app">
  Message: {{ message }}
  <br>
  <button @click="message = null">click here to set message to null and provoke watcher error</button>
</div>

그렇지만.....

...최근에,errorHandler다음 방법에서는 동작하지 않습니다.

Vue.config.errorHandler = function (err, vm, info)  {
  console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};

Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
  el: '#app',
  methods: {
    goMethod() {
      console.log(this.invalidProperty.trim());
    }
  }
})

<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>

<div id="app">
  <button @click="goMethod">click to execute goMethod() and provoke error that will NOT be handled by errorHandler</button>
</div>

마지막으로:

사용자 인터셉터를 사용할 수 있는 악리는 알고 있습니다만, vue 컴포넌트는 에러를 검출할 필요가 있기 때문에 하나의 함수로 통합할 수 있습니까?

결론은 현재 Vue에서는 이들을 하나의 기능으로 통합할 방법이 없다는 것입니다.

따라서 당신의 추측이 맞다면 악시오 가로채기를 정의하는 것이 최선책입니다: Axios interceptor)를 정의하는 것입니다.

악시오스 요격기

요청 또는 응답이 처리되기 전에 대행 수신할 수 있습니다.then또는catch.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

언급URL : https://stackoverflow.com/questions/49214634/how-to-capture-vuejs-errors-from-a-single-point-inside-a-component