Команда Dandelion недавно разработала интерфейсный инструмент сбора ошибок под названием frontend-tracker. Этот инструмент в основном используется для обнаружения ошибок на интерфейсных веб-страницах и отправки информации об ошибках на назначенный сервер. В духе открытого исходного кода я поделится им с вами сейчас. , Я надеюсь, что это может помочь каждому получить удобство на работе, и вы можете использовать его для общения и делиться им со своими друзьями вокруг вас.

Frontend Tracker

представлять

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

Функции

1. Регистрировать и отправлять ошибки, сгенерированные внешними страницами
2. ошибки скрипта журнала
3. Журнал ошибок запроса XHR
4. Запишите время запроса XHR
5. Регистрировать медленные запросы XHR
6. Записывать XHR-запросы из разных источников
7. Ошибки загрузки ресурсов журнала
8. Журнал загрузки ресурсов из разных источников
9. Конфигурация URL, совместимая с регулярными выражениями

Установить

Код Frontend-Tracker может быть использован с помощью Bower

bower install frontend-tracker --save

или используйте нпм

npm install frontend-tracker --save

Или загрузите ZIP-пакет напрямую, чтобы получить файл .

Просто добавьте его на страницу, где нужно отслеживать ошибки

<script src="path/to/package/dist/tracker.min.js">

настроить

Добавьте следующий код в свой код, чтобы начать Frontend Tracker

<script type="text/javascript">
  window.setTracker({
    endpoint: '',
    xhr: {
      log: {
        crossOrigin: true,
        slowRequest: true,
        timeout: true,
        error: true
      },
      origin: [
        'http://www.pgyer.com',
        /.*\.tracup\.com/,
      ],
      timeLimit: {
        send: 0,
        load: 0,
        total: 0
      },
      exclude: []
    },
    resource: {
      log: {
        crossOrigin: true,
        error: true
      },
      origin: [],
      exclude: []
    },
    script: {
      log: {
        error: true
      },
      exclude: []
    }
  })
  </script>

элемент конфигурации

endpoint

String
Required

xhr

Object
Required

Для поведения при ошибке конфигурации XHR

имя	Типы	Описание функции
log	Required, Object
log.crossOrigin	Required, Boolean, Default: false	При установкеtrueПри регистрации междоменных запросов XHR
log.slowRequest	Required, Boolean, Default: false	когда установлено наtrueмедленные запросы XHR при регистрации
log.timeout	Required, Boolean, Default: false	когда установлено наtrueКогда тайм-аут запроса на запись XHR
log.error	Required, Boolean, Default: false	когда установлено наtrueОшибка регистрации запроса XHR
origin	Optional, Array	Установите URI внутри домена, поддерживает регулярные выражения
timeLimit	Optional, Object	Значение с привязкой ко времени, используемое для описания медленных запросов XHR.
timeLimit.send	int, Default: 0	Время (мс) до отправки запроса до начала приема данных,0Нет предела
timeLimit.load	int, Default: 0	Время получения содержимого ответа (мс),0значит без ограничений
timeLimit.total	int, Default: 0	общее время нахождения запроса (мс),0значит без ограничений
exclude	Optional, Array

resource

Object
Required

имя	Типы	Описание функции
log	Required, Object	Настройка поведения журнала ошибок ресурсов
log.crossOrigin	Required, Boolean, Default: false	когда установлено наtrueПри регистрации запросов ресурсов из разных источников
log.error	Required, Boolean, Default: false	когда установлено наtrueПлохие запросы ресурсов регистрируются, когда
origin	Optional, Array	Установите URI внутри домена, поддерживает регулярные выражения
exclude	Optional, Array	Установить игнорирование неправильного URI, поддержка регулярных выражений

script

Object Required

Используется для настройки поведения скрипта при возникновении ошибок

name	type	description
log	Required, Object	Настройка поведения журнала ошибок ресурсов
log.error	Required, Boolean, Default: false	когда установлено наtrueОшибка сценария записи
exclude	Optional, Array	Установить игнорирование URI файла сценария ошибки, поддержка регулярных выражений

Обработка сообщений об ошибках

Информация об ошибке будет отправлена ​​(POST) в виде JSON в заданную конечную точку.

поле

имя	стоимость	описывать
type	String	тип ошибкиXHR, RESOURCE, SCRIPTтипа
data	Object	Подробное сообщение об ошибке
currentURL	string	Произошла ошибка URL
userAgent	string	User-Agent браузера, в котором произошла ошибка

data.messageПолученная подробная информация нуждается в анализеdata.detailполучить

Типы	data.detailСтруктура	описывать
XHR	{request: String, response: {status: int, response: String},timing: {send: int, load: int, total: int}}	request: запрошенный URL,status: код состояния,response: содержание ответа,send: время отправки (мс),load: время приема (мс),total: Общее время (MS)
RESOURCE	{tagname: String, resourceURL: String}	tagname: Этикетка,resourceURL: URI ресурса
SCRIPT	{file: String, line: int, column: int, trace: String}	file: имя файла сценария,line: номер строки,column: номер столбца,trace: стек вызовов

Способ авторизации

Внешний трекер сGPL-3 licensedРазрешенное использование.

Кодовую базу и более подробную информацию можно найти здесь: [GitHub.com/PGbaby/front…]