Лучшая практика для сообщения об ошибках клиента с помощью window.onerror?

Я бы хотел уловить все ошибки JavaScript на стороне клиента на нашем сайте и зарегистрировать их. Каковы некоторые рекомендации для этого?

Мысли:

  • Я могу легко добавить обработчик /log/ в наш webapp, проанализировать параметры GET/POST и использовать нашу существующую систему ведения журнала на стороне сервера. Это слишком очевидно?
  • Работает ли window.onerror везде? Что делать, если в обработчике возникает ошибка?
  • Должен ли я прикреплять тег <img> к странице или создавать XmlHttpRequest? Что делать, если XHR не удается?
  • Что можно сказать о сломанных изображениях и ошибках JQuery Ajax - могу ли я их поймать?

ОТВЕТЫ

Ответ 1

Все предложения, сделанные Jbecwar и dgvid, классные, я бы добавил:

  • обратите внимание, что Opera не поддерживает событие ошибки, см. событие ошибки quirksmode
  • сбор stacktraces с stacktrace.js может помочь устранить ошибки
  • если обработчик ошибок не может отправить отчет об ошибке на сервер, откажитесь от использования файлов cookie: установите cookie для errors.yourdomain.com с зашифрованным сообщением об ошибке с ошибкой base64 (сжато?) и запросите пустое изображение размером 1x1 из этого домена на каждой странице
  • или использовать локальное хранилище HTML5 и загрузить его, когда сможете

Ответ 2

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

Кроме того, window.onerror не будет работать для iframe, и я бы сделал xmlhttprequest, не хотите ли вы возиться с dom, если у вас уже есть проблемы.

TL; DR; Ограничьте запросы на стороне клиента и применяйте ограничения на сервере. window.onerror не подходит для iframes и использует xmlhttprequest.

Ответ 3

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

Вы можете поймать ошибку загрузки img, связав обработчик ошибок с элементом img, а затем установив атрибут src. Например, используя jQuery:

$("img#my-image").error(onImgError).prop("src", "images/my-image.jpg");

Вы не получите много информации таким образом, просто тот факт, что при попытке загрузить указанный элемент произошла ошибка.

Вы можете обрабатывать сбои в запросах jQuery.ajax, включая функцию обратного вызова ошибки в объекте настроек, переданном в $.ajax. Обязательно оберните код как функциями успеха, так и функцией обратного вызова ошибки в try-catch.

Как правило, вы захотите защитить свой код с помощью блоков try-catch, чтобы вы могли ловить и регистрировать ошибки. Обработка window.onerror должна быть последним средством - для вещей, которые проскальзывают.

В обработчике window.onerror оберните все в блок try-catch и убедитесь, что вы не будете выбрасывать из кода в блоке catch (при необходимости используйте вложенные try-ловли).

Ответ 4

Недавно мы начали сообщать о необработанных ошибках в виде просмотров страниц в google-analytics. Основная идея заключается в том, что обработчик window.onerror преобразует информацию об ошибке (script путь к файлу, номер строки и сообщение об ошибке) в URL-адрес виртуальной ошибки-страницы и сообщает об этом как просмотр страницы. Вы можете применить логику к любому механизму отслеживания страниц.

Простой код, который мы используем, доступен на github в https://github.com/shyam-habarakada/js-watson

Со всей аналитической способностью аналитики Google и этой простой техникой мы добились больших успехов в выявлении частых и критических ошибок и смогли быстро их решить. Вы также можете использовать мощность GA для анализа тенденций общих ошибок, конкретных ошибок в определенных файлах и т.д. И т.д. Очень рекомендуется.