> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Note>
  Browser monitoring é uma funcionalidade em beta do [AppSignal Labs](/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](https://discord.gg/EjF6ykYx63).
</Note>

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.

<CodeGroup>
  ```js appsignal.js theme={null}
  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"] },
    },
  });
  ```
</CodeGroup>

<h2 id="key">
  `key`
</h2>

* **Tipo:** `string`
* **Obrigatória**

A [Front-end API key](/browser/installation#find-your-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.

<h2 id="endpoint">
  `endpoint`
</h2>

* **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`.

<h2 id="active">
  `active`
</h2>

* **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:

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

<h2 id="appversion">
  `appVersion`
</h2>

* **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](/browser/error-tracking#sourcemaps) para backtraces. Leia mais no nosso [guia de deploy markers](/application/markers/deploy-markers).

<h2 id="servicename">
  `serviceName`
</h2>

* **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](/browser/distributed-tracing).

<h2 id="tracepropagationtargets">
  `tracePropagationTargets`
</h2>

* **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](/browser/distributed-tracing#before-you-start) para que ele leia o cabeçalho.

A lista vazia padrão não adiciona nenhum cabeçalho `traceparent`. Veja [distributed tracing para Browser](/browser/distributed-tracing) para configuração e exemplos.

<h2 id="beforeerror">
  `beforeError`
</h2>

* **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](/browser/privacy#filtering-errors-and-breadcrumbs).

Esse callback precisa ser síncrono. Uma promise retornada é detectada, registrada como `console.error`, e o erro é descartado.

<h2 id="beforebreadcrumb">
  `beforeBreadcrumb`
</h2>

* **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.

<h2 id="errors-enabled">
  `errors.enabled`
</h2>

* **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.

<h2 id="errors-samplerate">
  `errors.sampleRate`
</h2>

* **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](/browser/error-tracking#rate-limits) e antes de `beforeError` rodar.

<h2 id="breadcrumbs-network">
  `breadcrumbs.network`
</h2>

* **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.

<h2 id="breadcrumbs-console">
  `breadcrumbs.console`
</h2>

* **Tipo:** `boolean`
* **Valor padrão:** `true`

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

<h2 id="breadcrumbs-clicks">
  `breadcrumbs.clicks`
</h2>

* **Tipo:** `boolean`
* **Valor padrão:** `true`

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

<h2 id="breadcrumbs-longtasks">
  `breadcrumbs.longTasks`
</h2>

* **Tipo:** `boolean`
* **Valor padrão:** `true`

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

<h2 id="privacy-queryparamsallowlist">
  `privacy.queryParamsAllowlist`
</h2>

* **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](/browser/privacy#urls-and-query-parameters).

<h2 id="privacy-networkblocklist">
  `privacy.networkBlocklist`
</h2>

* **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](/browser/distributed-tracing#what-is-reported). Comparados com host e caminho. As chamadas continuam acontecendo. Essa opção não filtra o breadcrumb do carregamento inicial do documento.

<h2 id="privacy-dom-masktext">
  `privacy.dom.maskText`
</h2>

* **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.

<h2 id="privacy-dom-blockelement">
  `privacy.dom.blockElement`
</h2>

* **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.

<h2 id="api-reference">
  Referência da API
</h2>

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](/browser/error-tracking#reporting-errors-manually). |
| `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. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.