Browser error tracking

• Erros que seu código lança e nunca captura, pelo evento error.
• Promises que falham sem nada para tratar a falha, pelo evento unhandledrejection.

​

O que é relatado

• Nome e mensagem do erro. O tipo de erro, por exemplo TypeError, e a mensagem que veio com ele.
• Backtrace. O stack trace, uma linha por frame. Vazio se o navegador não fornecer nenhum.
• Action. A rota em que o erro aconteceu. Os erros são agrupados por ela.
• Revisão. A appVersion que você definiu. Usada para filtrar por versão e para encontrar os sourcemaps corretos.
• Tags. Tudo que você definiu com setTags().
• Nome do serviço. O serviceName que você definiu, ou Browser. Ele identifica o front-end entre os serviços de um trace.
• Breadcrumbs. Até 25 breadcrumbs recentes que ajudam a explicar o erro.
• URL e user agent. A página em que o erro aconteceu, com os parâmetros de query removidos conforme a sua allowlist, e o user agent do navegador.

​

Como os erros são agrupados

import { setRouteTemplate } from "@appsignal/browser";

// Every error on this route now groups under "/orders/:id"
setRouteTemplate("/orders/:id");

​

Relatando erros manualmente

import { captureError } from "@appsignal/browser";

try {
  await submitOrder(order);
} catch (error) {
  captureError(error);
}

​

Requisições com falha

​

Tags

import { setTags, clearTags } from "@appsignal/browser";

// After authentication, once the values are known
setTags({ plan: user.plan, org_id: user.orgId });

// On sign-out. Tags survive a reload, so clear them explicitly
clearTags();

​

Limites de taxa

• O mesmo erro repetidas vezes. A mensagem e a primeira linha de stack trace determinam se dois erros são repetições. O AppSignal o relata no máximo cinco vezes a cada 10 segundos.
• Erros demais de uma vez. No total, não são relatados mais de 100 erros a cada 10 segundos. Isso pega uma página que lança muitos erros diferentes, o que o primeiro limite deixaria passar.

​

Sourcemaps

​

Erros que não são relatados

​

Filtrando ruído do navegador

import { init } from "@appsignal/browser";

const IGNORED = [
  /ResizeObserver loop/,
  /^Script error\.?$/,
  /-extension:\/\//,
  /webkit-masked-url/,
];

init({
  key: "<YOUR_FRONTEND_API_KEY>",
  beforeError: (error) => {
    const text = [error.message, error.stack, error.filename].join(" ");
    return IGNORED.some((pattern) => pattern.test(text)) ? null : error;
  },
});

• ResizeObserver loop: um aviso do navegador de que notificações de redimensionamento foram adiadas para o próximo frame. Geralmente inofensivo.
• Script error.: um erro de um script em outro domínio, sem detalhes para depurar. O SDK já descarta os que chegam sem stack trace.
• -extension://: um erro de uma extensão de navegador, como um script chrome-extension:// ou moz-extension://.
• webkit-masked-url: o endereço que o Safari exibe no lugar do script de uma extensão.

​

Analisando erros no AppSignal