Javascript debug simples com Google AnalyticsDebuging Javascript with Google Analytics

Javascript é a linguagem mais utilizada em sites e aplicações na Internet. Infelizmente, sempre foi difícil debugar códigos em Javascript. Isso porque o código precisa funcionar em todos os navegadores e sistemas operacionais e cada um tem seu próprio motor de execução de código Javascript. Diferenças entre estes motores podem causar efeitos imprevisíveis, uma vez que é impraticável testar bem seu código em cada um deles.

Atualmente, as opções mais interessantes são testes unitários usando ferramentas como o FireUnity. John Resig (um  dos maiores ninjas em Javascript) está trabalhando em um projeto interessante para testar Javascript que é o Test Swarm. Cada um tem suas vantagens, porém eu gostaria de propor uma nova abordagem.

Javascript is the most widely used language on web sites and web apps. Unfortunately it’s been always hard to debug, since Javascript must work in all browsers and OSs out there. Every browser has it’s own Javascript engine and they don’t always behave the same (yes IE I’m looking at you). Even if you test and debug your code in all major browser you never know if the user is using something different or a nasty mobile browser.

Currently the most interesting options are unity test using tools like FireUnity. John Resig (a well known Javascript ninja) has been working in a interesting project called TestSwarm. Each has it’s own advantages but I propose a different track.

Even with the test tools above you never knows what happens when your code is free in the wild. Someone can update the code and forget to run a few tests. When you see it your shopping cart may be broken for 2 weeks. And those users are not getting any more happy.

You can use Google Analytics to log Javascript errors when they happen for your users. Once you identified the error you can hurry and fix it. Of course you could log those errors anywhere else, the advantage of using Google Analytics is that it already provide you with browser and OS metrics that you can combine with javascript errors, this information will prove useful when you’re trying to squash that bug.

google-analytics-js-error-report

Clicking in the error you can drilldown to exactly the error message that was attached to that exception.

google-analytics-js-error-messages

Clicking again you’ll have a report showing the pages where that error was triggered.

google-analytics-js-error-pages

You can go further and measure impact on conversions and user engagement caused by those Javascript errors, and plan witch bug you’re gonna squash first. As time goes you’ll see how valuable it is to have this info integrated with you Analytics tools.

It’s easy to implement this error tracking. All you have to do is add the function track_error_event() to your tracking snippet and then call it when a Javascript Exception raises.
eg:

<!-- GA Code Start -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
	['_setAccount','UA-XXXXX-X'],
	['_trackPageview']
);
function track_error_event (exception) {
	_gaq.push(['_trackEvent',
		'Exception ' + (exception.name || 'Error'), //event category
		exception.message || exception, //event action
		document.location.href //event label
	]);
}
(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>
<!-- GA Code End -->

<script type="text/javascript">
try{
	//Javascript Code goes here
	//Raises Division by zero exception
	var i = 1/0;
}
catch(e){
	track_error_event(e);
}
</script>

Done. Now this error will show up in Google Analytics in a nice report.

Happy tracking.

Mesmo usando as metodologias citadas, não é possível prever o que vai acontecer quando seu código for para produção. As vezes, podem ocorrer alterações que vão para produção sem passar pelos testes e até você descobrir que o script que adiciona produtos no seu carrinho de compras não está funcionando, já perdeu muitos clientes em potencial.

Você pode utilizar o Google Analytics para fazer um log de erros Javascript que aconteçam com seus usuários. Uma vez que você identificou um erro, pode ir lá e corrigi-lo. A vantagem de usar o Google Analytics para fazer este monitoramento é que você já vai ter os dados de navegadores e sistemas operacionais nos quais ocorreram aquele erro, o que vai ajudar na hora de soluciona-los.

google-analytics-js-error-report

Clicando no erro você faz drilldown para exatamente qual foi a mensagem de erro.

google-analytics-js-error-messages

Clicando novamente você faz drilldown para um relatório de páginas onde exatamente ocorreu aquele erro.

google-analytics-js-error-pages

Você pode ir mais longe e medir o impacto que esses erros causam na interação e conversão dos seus usuários e planejar quais bugs você vai esmagar primeiro e qual o impacto que eles causaram no seu negócio. Com o tempo fica mais notável todas as vantages que se tem com um log de erros integrado a sua ferramenta de Web Analytics.

Para implementar é fácil. Adicione a função track_error_event() ao seu tracking script do Google Analytics, agora basta adicionar um bloco de try catch ao redor do seu código e dispare um evento no momento do erro. Por exemplo:

<!-- GA Code Início -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
	['_setAccount','UA-XXXXX-X'],
	['_trackPageview']
);
function track_error_event (exception) {
	_gaq.push(['_trackEvent',
		'Exception ' + (exception.name || 'Error'), //event category
		exception.message || exception, //event action
		document.location.href //event label
	]);
}
(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>
<!-- GA Code Fim -->

<script type="text/javascript">
try{
	//Código Javascript
	//Este código gera um erro de Divisão por zero
	var i = 1/0;
}
catch(e){
	track_error_event(e);
}
</script>

Pronto. Agora esse erro vai aparecer de forma clara no Google Analytics.

Boas Medições.

"nhom nhom nhom" Área: Inovação Especialidade: Desenvolvimento de ferramentas para auxiliar processos.

6 Responses so far.

  1. Brian Katz says:

    This is a great idea.
    Have you dealt with errors that will occur within track_error_event() such as either ga.js not loading properly or _gaq.push not returning 0?
    Brian Katz Analytics VKI

    • Eduardo Cereto Eduardo Cereto says:

      Hi Brian, it’s great to hear from you here in our blog.

      if ga.js doesn’t load for some reason we’re unable to tell. Since our tech tracks errors to GA and in that case it will be unable to contact GA.

      We also don’t test if _gaq returns 0 or not. But as far as I’m concerned it will always return zero no matter if you pushing something that is correct or not. That’s mainly because of the fact that the way _gaq is implemented it’s just a regular js array. If it doesn’t you are probably not correctly declaring it.
      var _gaq = _qaq || [];

  2. What a simple but awesome solution. I’m definitely going to use that for all our clients. Thanks.

  3. Rubens Santos says:

    Excelente! Ovo de Colombo.

  4. [...] link for the article is http://www.dp6.com.br/javascript-debug-simples-com-google-analytics. Sorry for it’s in Portuguese‚ but if you don’t speak my language you have Google [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>