Не так давно на Хабре была статья про навороченный стартап, заточенный на сбор ошибок 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 в наш проект, выбираем «Стандартные отчёты»:
В панели слева находим «Содержание» → «События» → «Обзор»:
Видим график событий и снизу справа сами типы событий:
Выбираем нужное нам событие «JS Error»:
Переходим в «Действие по событию»:
Выбираем интересующую нас ошибку и наблюдаем отладочную информацию. Уходить глубже смысла особого не имеет:
Зная, как работают события GA, где они находятся и как выглядят, вы без проблем сможете настроить тот вид отчётов об ошибках, который наиболее подходит под ваш проект.
Автор: kosiasik
