Opções de configuração do AppSignal para Browser

Browser monitoring é uma funcionalidade em beta do AppSignal Labs. O pacote @appsignal/browser é publicado sob a tag beta no npm, e sua configuração e API ainda podem mudar entre releases beta. Compartilhe seu feedback na nossa comunidade no Discord.

Passe a configuração para init() como um único objeto. Apenas key é obrigatória. Uma segunda chamada a init() é ignorada até você chamar destroy(). A maioria das aplicações muda as opções no próximo build.

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

init({
  key: "<YOUR_FRONTEND_API_KEY>",
  endpoint: "https://appsignal-endpoint.net",
  active: process.env.NODE_ENV === "production",
  appVersion: "<YOUR_APP_REVISION>",
  tracePropagationTargets: ["api.example.com/**"],
  errors: { sampleRate: 1.0 },
  breadcrumbs: { console: false },
  privacy: {
    queryParamsAllowlist: ["utm_*", "page"],
    networkBlocklist: ["api.stripe.com/**"],
    dom: { blockElement: ["#card-form"] },
  },
});

`key`

Tipo: string
Obrigatória

A Front-end API key da sua aplicação, que é feita para ser exposta publicamente. Não é uma das Push keys que suas integrações de back-end usam.

`endpoint`

Tipo: string
Valor padrão: a origem da página atual

Para onde os dados são enviados. Defina como https://appsignal-endpoint.net. Se você encaminhar o tráfego do AppSignal pelo seu domínio, deixe-o sem definição para usar a origem atual. Uma barra final é removida. Erros são enviados para POST /ingest/browser/errors, e web vitals para POST /ingest/browser. A chave viaja como parâmetro de query api_key, o que vale saber se você mantém uma allowlist de connect-src.

`active`

Tipo: boolean
Valor padrão: true

O interruptor principal para a primeira chamada a init(). Quando é false, a inicialização retorna sem alterar a página, iniciar temporizadores ou fazer requisições. Uma segunda chamada a init() não consegue desligar um SDK que já está em execução. Todas as outras funções também não fazem nada, então você pode chamá-las em qualquer lugar sem verificar antes. Defina isso a partir do seu ambiente de build para que execuções de desenvolvimento, teste e CI não enviem nada:

init({
  key: "<YOUR_FRONTEND_API_KEY>",
  active: process.env.NODE_ENV === "production", // or import.meta.env.PROD
});

`appVersion`

Tipo: string

A tag de release, o SHA de commit ou o ID de deploy do build em execução. Ele marca erros e web vitals para os filtros de versão das visualizações Browser. Ele também seleciona os sourcemaps para backtraces. Leia mais no nosso guia de deploy markers.

`serviceName`

Tipo: string
Valor padrão: "Browser"

O AppSignal usa esse valor como o nome do serviço para erros de navegador em um trace. Por exemplo, serviceName: "Checkout UI" mostra Checkout UI em vez do padrão Browser na linha do tempo do trace. Use um valor diferente para cada front-end que você monitora. O SDK o envia com todo relato de erro. Veja distributed tracing para Browser.

`tracePropagationTargets`

Tipo: string[]
Valor padrão: []

Use essa lista para escolher quais requisições de API carregam um cabeçalho traceparent. Cada padrão precisa de um host e um caminho. Por exemplo, ["api.example.com/**"] corresponde a todo caminho em api.example.com. api.example.com sozinho não corresponde a nada. Se uma requisição correspondente retornar uma resposta 5xx ou expirar, o SDK relata um erro de navegador. Para ver spans de back-end no trace dele, instrumente o serviço que a recebe para que ele leia o cabeçalho. A lista vazia padrão não adiciona nenhum cabeçalho traceparent. Veja distributed tracing para Browser para configuração e exemplos.

`beforeError`

Tipo: (event: IncomingError) => IncomingError | null

Chamado para erros que passam pela amostragem e pelo limite de taxa global, antes que um breadcrumb ou relato de erro seja criado. Retorne null para descartar o erro, ou altere seus campos para ocultá-los. Leia mais em filtrando erros. Esse callback precisa ser síncrono. Uma promise retornada é detectada, registrada como console.error, e o erro é descartado.

`beforeBreadcrumb`

Tipo: (breadcrumb: Breadcrumb) => Breadcrumb | null

Roda uma vez para cada breadcrumb, no momento em que ele é registrado. Retorne null para descartá-lo, ou altere message e data para remover texto sensível. Isso roda com frequência, então mantenha rápido.

`errors.enabled`

Tipo: boolean
Valor padrão: true

Se os erros são relatados ou não. Quando é false, o SDK continua escutando por eles, mas não envia nada.

`errors.sampleRate`

Tipo: number entre 0 e 1
Valor padrão: 1.0

Que parcela dos erros relatar. A escolha é feita aleatoriamente para cada erro, então 0.25 relata cerca de um quarto deles. Isso acontece antes dos limites de taxa e antes de beforeError rodar.

`breadcrumbs.network`

Tipo: boolean
Valor padrão: true

Registra breadcrumbs para chamadas fetch e XMLHttpRequest, exceto requisições canceladas. Essa opção não controla o breadcrumb do carregamento inicial do documento. O SDK não lê corpos de requisição ou resposta.

`breadcrumbs.console`

Tipo: boolean
Valor padrão: true

Registra um breadcrumb para console.warn e console.error. console.log não recebe patch.

`breadcrumbs.clicks`

Tipo: boolean
Valor padrão: true

Registra um breadcrumb quando um usuário seleciona um elemento.

`breadcrumbs.longTasks`

Tipo: boolean
Valor padrão: true

Registra um breadcrumb quando a thread principal fica bloqueada por mais de 50 ms.

`privacy.queryParamsAllowlist`

Tipo: string[]
Valor padrão: []

Os parâmetros de query que devem ser mantidos nas URLs registradas. Use * para corresponder a vários nomes de uma vez, então "utm_*" mantém todos os parâmetros UTM. A lista padrão é vazia, o que remove todos eles. Leia mais em privacidade e filtragem.

`privacy.networkBlocklist`

Tipo: string[]
Valor padrão: []

Padrões glob de URL para chamadas fetch e XMLHttpRequest que não são registradas como breadcrumbs nem como erros de requisição com falha. Comparados com host e caminho. As chamadas continuam acontecendo. Essa opção não filtra o breadcrumb do carregamento inicial do documento.

`privacy.dom.maskText`

Tipo: string[]
Valor padrão: []

Seletores CSS cujo conteúdo de texto é substituído por [masked] em breadcrumbs de click. O breadcrumb continua sendo registrado, então você mantém o fato de que houve uma interação.

`privacy.dom.blockElement`

Tipo: string[]
Valor padrão: []

Seletores CSS cujas interações não são registradas de forma alguma. Use isso para formulários de cartão e outros campos que nunca devem aparecer.

Referência da API

Com exceção de init(), essas funções não fazem nada até o SDK ser inicializado com active: true.

Função	Descrição
`init(config)`	Inicia a coleta. Chame uma vez, o mais cedo possível. Chamadas seguintes são ignoradas.
`captureError(error)`	Relata um erro capturado. O argumento de contexto opcional não é incluído nos relatos de erro comuns nesta beta. Leia mais em error tracking.
`addBreadcrumb({ category, message, data? })`	Adiciona seu próprio breadcrumb à linha do tempo.
`setRouteTemplate(template)`	Declara a rota em que o usuário está, por exemplo `/users/:id`. Passe `null` para limpá-la.
`setTags(tags)`	Anexa tags a todo erro relatado a partir de agora. Mescla com as tags existentes.
`clearTags()`	Remove todas as tags. As tags sobrevivem a um recarregamento, então chame isso no logout.
`flush()`	Envia imediatamente as web vitals em buffer.
`destroy()`	Envia os dados pendentes e interrompe a coleta. Uma nova chamada a `init()` pode reiniciá-la, inclusive na mesma página.

SDKs & telemetria

SDKs de linguagem

Ferramentas de telemetria

Opções de configuração do AppSignal para Browser

`key`

`endpoint`

`active`

`appVersion`

`serviceName`

`tracePropagationTargets`

`beforeError`

`beforeBreadcrumb`

`errors.enabled`

`errors.sampleRate`

`privacy.queryParamsAllowlist`

`privacy.networkBlocklist`

`privacy.dom.maskText`

`privacy.dom.blockElement`

Referência da API

​key

​endpoint

​active

​appVersion

​serviceName

​tracePropagationTargets

​beforeError

​beforeBreadcrumb

​errors.enabled

​errors.sampleRate

​breadcrumbs.network

​breadcrumbs.console

​breadcrumbs.clicks

​breadcrumbs.longTasks

​privacy.queryParamsAllowlist

​privacy.networkBlocklist

​privacy.dom.maskText

​privacy.dom.blockElement

​Referência da API

`key`

`endpoint`

`active`

`appVersion`

`serviceName`

`tracePropagationTargets`

`beforeError`

`beforeBreadcrumb`

`errors.enabled`

`errors.sampleRate`

`breadcrumbs.network`

`breadcrumbs.console`

`breadcrumbs.clicks`

`breadcrumbs.longTasks`

`privacy.queryParamsAllowlist`

`privacy.networkBlocklist`

`privacy.dom.maskText`

`privacy.dom.blockElement`

Referência da API