Google Analytics для сбора ошибок JavaScript

в 20:10, , рубрики: error, google analytics, javascript, jquery, Веб-разработка, метки: , , ,

image
Не так давно на Хабре была статья про навороченный стартап, заточенный на сбор ошибок JavaScript. Далеко не всегда нужно столько возможностей, но оказалось, что многие просто не знают про старый бородатый способ с Google Analytics. Про него я и попытаюсь кратенько рассказать.

Первое, что вам нужно, это сам установленный Google Analytics (далее просто GA) на сайте, здесь всё стандартно и менять ничего не надо:

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX']);
_gaq.push(['_trackPageview']);

(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Далее, желательно ещё до подгрузки каких-либо скриптов, т. е. в head, выше всех поставить следующее:

<script>
var _gaq = window._gaq || [];
window.onerror = function(msg, url, line) {
	var preventErrorAlert = true;
	_gaq.push(['_trackEvent', 'JS Error', msg, navigator.userAgent + ' -> ' + url + " : " + line]);
	return preventErrorAlert;
};
</script>

preventErrorAlert — возвращая true, мы предотвращаем появление раздражающего окна с ошибками в старых версиях IE и Opera.
msg — сообщение об ошибке.
url — файл скрипта в котором произошла ошибка.
line — на какой строчке произошла ошибка.
navigator.userAgent — простенькие данные браузера, чтобы понятно было где копать.

Практически все современные браузеры поддерживают onerror:

  • Chrome 13+
  • Firefox 6.0+
  • Internet Explorer 5.5+
  • Opera 11.60+
  • Safari 5.1+

Таким образом, можно смело собирать критические ошибки. Но ошибки бывают разные, если вы используете jQuery, то рекомендую добавить ещё следующий код, после её инициализации:

jQuery.error = function (message) {
	_gaq.push(['_trackEvent', 'jQuery Error', message, navigator.userAgent]);
}

Как сделать обработчик собственных исключений, думаю уже понятно. И пара скриншотов, где всё это дело потом найти и как оно будет выглядеть.

Заходим в GA в наш проект, выбираем «Стандартные отчёты»:
image

В панели слева находим «Содержание» → «События» → «Обзор»:
image

Видим график событий и снизу справа сами типы событий:
image

Выбираем нужное нам событие «JS Error»:
image

Переходим в «Действие по событию»:
image

Выбираем интересующую нас ошибку и наблюдаем отладочную информацию. Уходить глубже смысла особого не имеет:
image

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

Автор: kosiasik

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js