Capture todos os erros de JavaScript e envie-os para o servidor

232

Gostaria de saber se alguém tinha experiência em lidar com erros de JavaScript globalmente e enviá-los do navegador do cliente para um servidor.

Acho que meu argumento é bem claro: quero saber todas as exceções, erros, erros de compilação etc. que acontecem no lado do cliente e enviá-los ao servidor para relatá-los.

Estou usando principalmente o MooTools e head.js(para o lado JS) e o Django para o lado do servidor.

Olivier Girardot
fonte
20
Não vejo por que essa pergunta não é clara.
Michael Hilus
3
Votou duas vezes para reabrir a pergunta, mas sem sorte. Não está totalmente claro por que essa pergunta é encerrada como incerta.
Muhammad Usman
7
@ andrew-barbeiro - se tantos usuários acham essa pergunta relevante o suficiente para aprová-la, então talvez se não esteja claro para você o problema está com você?
Isapir 28/05
5
Esta questão não é apenas claro, também é subestimado :)
Teoman shipahi

Respostas:

16

Testei recentemente o Sentry na produção e funciona bem (JS e outras linguagens como PHP)

1 - É de código aberto (você pode instalá-lo em seu próprio servidor) 2 - Você pode usar o plano gratuito (100 relatórios / dia)

Ou instale-o no seu servidor: github.com/getsentry

Tarek
fonte
Note-se que eles têm um plano gratuito ilimitado para instituições educacionais
christianvuerings
8
Não parece mais ser open source, todas as opções são pagas?
precisa saber é o seguinte
4
@DavidCumps Eles ainda oferecem o serviço gratuito (Trial), mas você só tem 7 dias de histórico de bugs ou pode instalá-lo em seu próprio servidor desde seu código-fonte aberto ( github.com/getsentry )
Tarek:
1
Google Tag Manager tem um erro de Listener Javascript, talvez vale a pena conferir, especialmente se você já estiver usando GA
Adrian Gunawan
Você também deve verificar o TrackJS para isso. É um serviço pago, mas fornece uma tonelada de contexto sobre como o usuário entrou na situação de erro para depuração. Estou em um dos desenvolvedores e têm toneladas fixos de erros com ele :)
Todd Gardner
318

Gostaria de verificar window.onerror

Exemplo:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Lembre-se de que retornar true impedirá o acionamento do manipulador padrão e retornar false permitirá que o manipulador padrão seja executado.

Mike Lewis
fonte
9
Você deseja atribuir window.onerror preferencialmente antes que qualquer outra coisa seja executada. Portanto, onde quer que você queira colocá-lo, verifique se ele é executado antes de qualquer outro código / arquivo js.
Mike Lewis
17
Observe que a Mozilla recomenda: 'Observe que alguns / muitos eventos de erro não acionam window.onerror, você deve ouvi-los especificamente.'
Adam Naylor
88
Sim, eu amo como ele diz alguns / muitos , muito descritivo - obrigado Mozilla.
Daniel Mendel
5
Mozilla expõe GlobalEventHandlers.onerror: developer.mozilla.org/pt-BR/docs/Web/API/GlobalEventHandlers/…
roland
1
O que acontece se o código que lida com o próprio window.onerror gera um erro. Existe a possibilidade de um loop infinito?
Martin Brown
15

Se o seu site estiver usando o Google Analytics, você poderá fazer o que eu faço:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

Alguns comentários sobre o código acima:

  • Para navegadores modernos, o rastreamento de pilha completa é registrado.
  • Para navegadores mais antigos que não capturam o rastreamento de pilha, a mensagem de erro é registrada. (Principalmente versão iOS anterior na minha experiência).
  • A versão do navegador do usuário também é registrada, para que você possa ver quais versões do SO / navegador estão lançando quais erros. Isso simplifica a priorização e o teste de erros.
  • Esse código funciona se você usar o Google Analytics com "analytics.js", assim . Se você estiver usando o "gtag.js", assim , precisará ajustar a última linha da função. Veja aqui para detalhes .

Depois que o código estiver em vigor, é assim que você visualiza os erros de Javascript dos seus usuários:

  1. No Google Analytics, clique na Behaviorseção e depois no Top Eventsrelatório.
  2. Você receberá uma lista de categorias de eventos. Clique window.onerrorna lista.
  3. Você verá uma lista de rastreamentos de pilha Javascript e mensagens de erro. Adicione uma coluna ao relatório para as versões do sistema operacional / navegador dos usuários clicando no Secondary dimensionbotão e inserindo Event Labela caixa de texto exibida.
  4. O relatório será semelhante à captura de tela abaixo.
  5. Para converter as seqüências de sistema operacional / navegador em descrições mais legíveis por humanos, eu as copio e colo em https://developers.whatismybrowser.com/useragents/parse/

insira a descrição da imagem aqui

Martin Omander
fonte
3
Isso não prende todos os erros, apenas bloqueia o try-catch, embora seja uma coisa legal de explicar e eu não acho que você mereça votos negativos.
31518 Nick Steele
Obrigado Nick! Atualizei minha resposta com código testado em batalha que funciona bem no meu site e captura todos os erros, não apenas os que você prende com a tentativa ... captura.
Martin Omander 9/09/18
2

Não tente usar serviços de terceiros, tente por conta própria.

Os manipuladores de erros podem capturar os cenários abaixo,

  1. O TypeError não capturado não pode ser capturado
  2. O ReferenceError não capturado não pode ser capturado, por exemplo: var.click ()
  3. TypeError pode ser capturado
  4. Erro de sintaxe pode ser capturado
  5. O erro ReferenceError pode ser capturado

Para capturar erros de Javascript:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

Para capturar erros do AngularJS:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})
Sam Ruben
fonte
0

Além disso, o serviço http://jslogger.com pode ajudar com isso:

Registrar erros e eventos Javascript na nuvem

em http://jslogger.com/features :

A partir de agora, você poderá espionar todos os erros que prejudicam a experiência do usuário do seu site. Todo erro de Javascript será capturado e trazido a você para depuração posterior.

AVISO LEGAL: não afiliado ao serviço / empresa.

Ivan Kurmanov
fonte
1
Serviço 503 indisponível
Rax
0

Você pode experimentar o Atatus - é um novo serviço de rastreamento de erros JavaScript, juntamente com o Real User Monitoring (RUM) para aplicativos da web modernos.

Não capturamos apenas os erros, mas também os eventos do usuário que acionaram o erro. Isso fornece etapas para reproduzir o erro no final.

Além da captura de erro, também capturamos o tempo de carregamento da página e o mostramos em diferentes perspectivas - geografia, navegador, detalhamento de página, histograma de página, monitoramento de Ajax e monitoramento de transações.

https://www.atatus.com/

Documentos disponíveis: https://www.atatus.com/docs

Isenção de responsabilidade: Sou desenvolvedor da Atatus.

Fizer Khan
fonte
1
Integrei o Ataus e tentei algo como foo.bar = '', que causou exceção. Mas não consigo ver nada no painel do Atatus.
vmachacek
Poderia nos enviar um email?
Fizer Khan #
5
Plugue sem vergonha. Os anúncios devem ser limitados ao lado direito.
Será
0

A biblioteca não capturada é uma boa maneira livre de capturar todos os erros de JS, incluindo rejeições não tratadas.

LeeGee
fonte
-2

Você pode querer conferir este novo serviço, http://rescuejs.com/ . https://bugsnag.com/

Permite registrar todos os seus erros de javascript sem escrever o código do servidor. Ele também rastreia as versões do navegador e assim por diante.

Não tenho certeza se os consideraria 100% "prontos para empresas", mas definitivamente vale a pena conferir.

Lillesand
fonte
8
Foi fechado. Se você tentar se inscrever agora, receberá a mensagem "Obrigado pelo seu interesse, infelizmente o Rescue.js não está mais sendo trabalhado ativamente".
Dia