Мини-коллекция мониторинга исключений программ

внешний интерфейс WeChat GitHub JavaScript

предисловие

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

Из-за сложной онлайн-среды некоторые проблемы будут возникать только в определенных сетевых средах или устройствах.Для таких проблем особенно важен сбор ненормальной информации.Мы не только надеемся собратьТакже требуется неправильная информация о стеке, процессе работы пользователя и информации об устройстве.д., чтобы воспроизвести ошибку.

простая коллекция

Функция onError предоставляется в жизненном цикле апплета App(), а информация об исключении может быть собрана в onError.

App({
  // 监听错误
  onError: function (err) {
    // 上报错误
    wx.request({
      url: "https://url", // 自行定义报告服务器
      method: "POST",
      errMsg: err
    })
  }
})

Коллекция путей операций пользователя

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

Метод 1: Сбор насильственных методов управления

Плюсы: Просто и понятно

Недостатки: загрязняют бизнес-код, что приводит к увеличению количества мусора.

Способ 2: перехват функции (рекомендуется)

Необходимо вставить код мониторинга в жизненный цикл Onlaunch, Onshow и Onhide в функции приложения. Мы делаем это, переписывая функцию жизненного цикла приложений.

App = function(app) {
    ["onLaunch", "onShow", "onHide"].forEach(methodName => {
        app[methodName] = function(options) {
          // 构造访问日志对象
          var breadcrumb = {
            type: "function",
            time: utils.now(),
            belong: "App", // 来源
            method: methodName,
            path: options && options.path, // 页面路径
            query: options && options.query, // 页面参数
            scene: options && options.scene // 场景编号
          };
          self.pushToBreadcrumb(breadcrumb); // 把执行对象加入到面包屑中
    })
}

Но запись таким образом приведет к перезаписи определяемого пользователем содержимого, поэтому нам также необходимо объединить определяемую пользователем функцию с кодом мониторинга.

 var originApp = App // 保存原对象
 App = function(app) {
 	// .... 此处省略监控代码
 	// .... 此处省略监控代码
 	originApp(app) // 执行用户定义的方法
 }

записывать результаты

Из json ниже видно, что пользователь переходит на страницу подробностей, выполняет onLoad => getDetail => onReady => buy и сообщает об ошибке при выполнении метода buy.

[{"method":"onLoad","route":"pages/film/detail","options":{"id":"4206"}},
{"method":"getDetail","route":"pages/film/detail","options":{"id":"4206"}},
{"method":"onReady","route":"pages/film/detail","options":{"id":"4206"}},
{"method":"buy","route":"pages/film/detail","options":{"id":"4206"}}]

Политика эскалации

Учитывая, что в масштабных приложениях количество логов относительно велико, беремвыборка, слияние, фильтрацияТри способа уменьшить вывод лога, реализация кода может ссылаться на lib/report.js

организация кода

В проекте используется объединение в качестве строительных работ для реализации функций загрузки модулей с ES6 на ES5.

Каталог проекта выглядит следующим образом:

config.js  // 配置文件
core.js	 // 劫持小程序核心代码
events.js  // 监听自定义事件
report.js // 上报类
utils.js // 工具类

🌟 Если понравилось, нажмите на звездочку:

https://github.com/zhengguorong/xbossdebug-wechat

использованная литература

fundebug

Приземлилась система мониторинга внешних аномалий