Pull to refresh

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

Website development *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, 0, true]);
	return preventErrorAlert;
};
</script>


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

Последние два параметра (напомнил korzhik):
0 — это счётчик, т. е. можно just for fun передать сюда номер строчки и вычислить на какой в среднем происходит больше всего ошибок, можно и что-то полезное :)
true — не учитывать в показателе отказов. Т. е. событие не будет засчитано, как пользовательское действие. Важно для тех, кто серьёзно занимается аналитикой.

Практически все современные браузеры поддерживают 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, 0, true]);
}


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

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

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

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

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

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

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

Зная, как работают события GA, где они находятся и как выглядят, вы без проблем сможете настроить тот вид отчётов об ошибках, который наиболее подходит под ваш проект.
Tags:
Hubs:
Total votes 124: ↑121 and ↓3 +118
Views 18K
Comments Comments 27