Пользователь
0,0
рейтинг
21 августа 2012 в 00:10

Разработка → Google Analytics для сбора ошибок JavaScript

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, где они находятся и как выглядят, вы без проблем сможете настроить тот вид отчётов об ошибках, который наиболее подходит под ваш проект.
Николай Борисов @kosiasik
карма
67,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (27)

  • –11
    мне кажется или JavaScript стремительно развивается? не говоря уже о недели/месяце js-а на хабре… )
    • +14
      мне кажется, window.onerror уже не первый десяток лет существует ;)
  • +6
    отличная идея! пойду прикручивать у себя, а то от тестеров фиг дождешься репортов по Js ошибкам
    • 0
      Если вы сами пишите код, что вам мешает самостоятельно провести тестирование?
      Пользуясь случаем, хочу дать ссылку на свой инструмент тестирования Suitest
  • +4
    Как раз недавно обдумывал, чем собирать статистику JS ошибок, а тут такой подарок. А казалось бы — очевидные вещи, коллбэк на ошибки и логгирование, но как изящно в итоге.
    • 0
      На самом деле стартап qbaka.net, который, вероятно, упомянут тут, все равно имеет немало плюсов перед этим подходом.
      Группировка однотипных ошибок, различная статистика, подробное окружение в котором они произошли, фильтрация, итд.
      • +1
        Я видел пост про него, но к GA доверия несколько больше. Особенно в том смысле, что они не закроются вдруг через пару лет. Так-то стартап хороший.
        • 0
          В GA отсутствует статический анализ кода.
          • +1
            Можно пойти дальше, взять гугловое апи и фаршировать на своей стороне, как пожелаешь, хоть на мобилку особо критичные события смской сбрасывать. Иной вопрос, что это не коробочное решение, пока, во всяком случае.
          • +1
            В GA будет присутствовать все, что ему отправит клиент.
      • +4
        Похоже, что разработчики забили на этот сервис. «Наш сервис бесплатен до cередины июля.»
        Хотя я могу и ошибаться.
        • +1
          Вот о чем я и говорил… допустим у них отличный функционал, но это не продукт для энтерпрайза, по крайней мере пока.
        • 0
          >Похоже, что разработчики забили на этот сервис.

          Не, мы не забили :) просто забыл про эту строчку. Щас обновлю. Мы активно пилим сервис — просто хотим порадовать единовременным выкатыванием сразу кучи фич.
          • 0
            Раз вы близки к этому сервису, то у меня к вам очень серьёзный вопрос.
            Что происходит когда пользователь выбирает квоту ошибок в день? Дело в том, что для статистики большинству проектов хватит выборки из нескольких тысяч ошибок в день с головой. Они будут закрывать самые частые или самые опасные ошибки и спокойно сидеть дальше. При большой посещаемости программист легко может сделать так, чтобы отправлялись не каждая первая ошибка, а например каждая десятая, ведь на статистике это не скажется, а единичные ошибки не так и критичны.
            Дело в том, что я в своё время хотел стартовать похожую штуку, благо был код для отлова, группировки, анализа и тп и делать пришлось бы не с нуля, но так и не придумал как можно заработать на этом.
  • 0
    Я.Метрику тоже ведь можно использовать?
    Просто я к метрике больше привык :)
    • 0
      почему-то не получается добиться от метрики корректной работы.
      Она не все посещения фиксирует. В GA посещений всегда больше… и конверсий тоже, даже с яндекс директа, хотя казалось бы…
  • +2
    спасибо, добавил во все проекты!
  • –1
    Сервис Muscula бесплатный и предлагает опциональный дополнительный репортинг в GA
  • +2
    Если не ошибаюсь, то из документации следует, что методу "_trackEvent" в нашем случае необходимо передавать необязательный параметр opt_noninteraction=true, иначе сработавшие ошибки будут засчитаны как значимое действие со страницей и не будет засчитан «bounce» даже если он произойдет, что в свою очередь может занизить действительное количество отскоков.
    • 0
      т.е. как то так:
       _gaq.push(['_trackEvent', 'JS Error', msg, navigator.userAgent + ' -> ' + url + " : " + line, 0, true]);
      
    • 0
      Там сложно написано в документации, да.
      На самом деле это влияет лишь на подсчёт показателя отказов. Т.е. по умолчанию, сработавшее событие говорит нам, что пользователь активен и в отказ его не заносить, но на сбор событий это абсолютно никак не влияет.
      Если вы учитываете GA отказы родным способом, то да, имеет смысл поставить true в случае с ошибками. Пожалуй, добавлю в пост. Спасибо.
      • 0
        а как по другому можно учитывать отказы?
  • +1
    Залил к себе на сайт, работает, даволен, спасибо.
    Просто и эффективно, то что нужно!
  • 0
    А никто не знает как можно расшифровать сообщение ScriptError.
    Вот именно так видно без каких либо других наводящих пояснений.
    • 0
      «Скрипт эррор» это действаи по событию, кликни и на него чтоб посмотреть ярлыки событий связанные с этим действием. там будет информация типа:
      «Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0 -> chrome://ffvkbd/content/ikavvklistener.js: 0»
      • 0
        Это я и имел в виду — никаких наводящих пояснений о том что именно случилось.
  • 0
    Как сделать обработчик собственных исключений, думаю уже понятно

    для тех, кто не слишком опытен, дайте плз пару намёков.
    спасибо.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.