Vue JS Как глобально отлавливать ошибки и отображать их в компоненте верхнего уровня

Question

Я настроил Vue таким образом, чтобы у меня был компонент AppLayout верхнего уровня, который просто включает в себя компонент меню навигации, представление роутера и который использует v-if для необязательного отображения компонента ErrorDisplay, если установлен элемент данных об ошибках.Я установил это из переменной состояния err в хранилище Vuex.

Вот где я хочу добраться.Однако, я думаю, что проблема более фундаментальная.

В нижнем компоненте у меня есть функция отправки, которая вызывается при нажатии кнопки отправки.Для проверки обработки ошибок я поставил

throw new Error ('Cannot Submit');

В моем файле Main.js у меня есть обработчики

для window.orerror, window.addEventListner, Vue.config.errorhandler, Vue.config.warnhandler

Все они должны просто вызывать функцию errHandler, которая просто вызывает действие для обновления переменной err в состоянии.Есть надежда, что это приведет к тому, что компонент ErrorDisplay отобразится в моем компоненте верхнего уровня.

Однако у меня есть операторы console.log в качестве первого оператора во всех вышеперечисленных обработчиках и в моей функции errHandler.Ни один из этих console.logs не выполняется.

В консоли в Chrome я просто вижу [vue warn]: ошибка в обработчике v-on: «Ошибка: невозможно отправить»

Итак, он получает текст из моего броска,но ни один из обработчиков ошибок, кажется, не фиксирует это?

Answer 1

Vue предоставляет глобальную конфигурацию config.errorHandler для регистрации ошибок внутри компонентов Vue в глобальном масштабе.

Согласно официальным документам

Назначить обработчик для необнаруженных ошибок во время компонента для рендеринга функции и наблюдателей. Обработчик вызывается с ошибкой и экземпляром Vue.

Вот как это можно использовать:

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in. Only available in 2.2.0+
}

Официальный Документы

Надеюсь, это поможет!

Answer 2

Провел больше исследований, и я думаю, что кто-то, возможно, уже поднял сообщение об ошибке с Vue для этого PR на Vue https://github.com/vuejs/vue/pull/5709

Так что, похоже, проблема в том, что способ, которым я пытаюсь проверить это, не обнаружен.