Схема сбора журнала ошибок внешнего интерфейса

внешний интерфейс JavaScript
Схема сбора журнала ошибок внешнего интерфейса

предисловие

После того, как проект компании выходит в онлайн, найти ошибку сложно, после изучения существующей схемы мониторинга ошибок она может настроить только собственную схему сбора ошибок из-за особых условий.

Основываясь на вышеизложенном, я придумал схему сбора журнала ошибок —Ohbug.

Приветствую всех, звезда ~

Ошибки мониторинга

Говоря о перехвате ошибок, первое, что приходит на ум, этоtry catch,пройти черезcatchДальнейшая обработка после отлова ошибки

try {
  undefined.map(v => v);
} catch(e) {
  console.log(e); // TypeError: Cannot read property 'map' of undefined
}

Однакоtry catchОтсутствие осведомленности об асинхронных ошибках

try {
  setTimeout(() => {
    undefined.map(v => v);
  }, 1000)
} catch(e) {
  console.log(e); // TypeError: Cannot read property 'map' of undefined
}

И я не могу добавить все коды в реальной работе.try catch, так можно ли ловить глобальные ошибки?

react componentDidCatch

React 16имеет встроенную функциюcomponentDidCatch, используйте его, чтобы очень легко получить информацию об ошибке.

componentDidCatch(error, info) {     
  console.log(error, info);
}

Обработка исключений/ошибок в React 16

vue errorHandler

Указывает обработчик необработанных ошибок во время рендеринга и просмотра компонента. Когда этот обработчик вызывается, он получает сообщение об ошибке и экземпляр Vue.

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

errorHandler

onerror vs addEventListener

Для проектов, которые не используют реакцию или vue, вы можете передатьonerrorилиaddEventListenerМониторить глобальные ошибки (конечно, проекты, использующие React или Vue, тоже могут)

onerrorилиaddEventListenerОба могут обнаруживать некоторые неизвестные ошибки, но в чем разница между ними?

window.onerror = (msg, url, row, col, error) => {
  console.log({msg, url, row, col, error});
};
setTimeout(() => {
  undefined.map(v => v);
}, 1000);

onerror

window.addEventListener('error', (e) => {
  console.log(e);
}, true);

addEventListener

Помимо,addEventListenerТакже может перехватывать ошибки загрузки ресурсов, неперехваченные ошибки промисов.

img

// 捕获未 catch 的 promise 错误
window.addEventListener("unhandledrejection", e => {
  e.preventDefault();
  console.log(e);
});
Promise.reject('promiseError');

promise

мониторинг ошибок ajax/fetch

Если вы хотите отслеживать сбои запросов, описанный выше метод определенно не рекомендуется.

использоватьaxiosНебольшие партнеры могут реализовать мониторинг ошибок, настроив перехватчик.

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

Здесь я использую переупаковкуXMLHttpRequest/fetchМетоды объекта реализуют мониторинг сетевых запросов.

XMLHttpRequest

const AJAX = {
  // 记录请求的 url
  reqUrl: '',
  // 记录请求的方法
  reqMethod: '',
  // 保存原生的 open 方法
  xhrOpen: window.XMLHttpRequest.prototype.open,
  // 保存原生的 send 方法
  xhrSend: window.XMLHttpRequest.prototype.send,
  init() {
    const that = this;

    window.XMLHttpRequest.prototype.open = function () {
      that.reqUrl = arguments[1];
      that.reqMethod = arguments[0];
      that.xhrOpen.apply(this, arguments);
    };

    window.XMLHttpRequest.prototype.send = function () {
      this.addEventListener('readystatechange', function () {
        if (this.readyState === 4) {
          if (!this.status || this.status >= 400) {
            // 错误收集
          }
        }
      });

      that.xhrSend.apply(this, arguments);
    };
  },
};
AJAX.init();

fetch

const FETCH = {
  backup: window.fetch,
  init() {
    window.fetch = function (url, conf) {
      return (
        FETCH.backup.apply(this, arguments)
          .then((res) => {
            if (!res.status || res.status >= 400) {
              // 错误收集
            }
            return res;
          })
      );
    };
  },
};
FETCH.init();

функция, которая должна быть реализована

  1. Поймать ошибки веб-сокета
  2. Установить скорость приобретения
  3. sourcemap находит конкретное место ошибки кода сжатия

Справочная статья

Категории