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

# Captura de erros no front-end

Para relatar um erro ao AppSignal, capture o erro e passe-o para a função auxiliar `sendError`.

Se você estiver usando TypeScript, para usar a função auxiliar `sendError`, o argumento deve ser uma instância de `Error` ou `ErrorEvent`. Isso porque, no TypeScript, variáveis capturadas são do tipo `unknown` por padrão no modo estrito desde a versão 4.4.

<CodeGroup>
  ```javascript JavaScript theme={null}
  try {
    // do something that might throw an error
  } catch (error) {
    if (error instanceof Error || error instanceof ErrorEvent) {
      appsignal.sendError(error)
      // handle the error
    }
  }

  // You can catch errors asynchronously by listening to Promises...
  asyncActionThatReturnsAPromise().catch(error => appsignal.sendError(error))

  // ...or by using async/await
  async function() {
    try {
      const result = await asyncActionThatReturnsAPromise()
    } catch (error) {
      if (error instanceof Error || error instanceof ErrorEvent) {
        appsignal.sendError(error)
        // handle the error
      }

    }
  }

  // ...or in an event handler or callback function
  events.on("event", (err) => { appsignal.sendError(err) })
  ```
</CodeGroup>

## Adicionando metadados aos erros

Para adicionar metadados adicionais aos erros enviados com `sendError`, use o argumento da função de callback. Esse callback recebe o Span atual do erro como argumento e permite que ele seja modificado antes de ser enviado para os servidores do AppSignal.

Veja a [página da API Span][span api] para mais informações sobre todos os dados que podem ser definidos em um Span.

<CodeGroup>
  ```javascript JavaScript theme={null}
  try {
    // do something that might throw an error
  } catch (error) {
    appsignal.sendError(error, (span) => {
      span.setAction("MyCustomAction");
      span.setNamespace("custom_namespace");
      span.setTags({ tag1: "value 1", tag2: "value 2" });
    });
    // handle the error
  }
  ```
</CodeGroup>

## Exceções não capturadas

Exceções não capturadas **não** são capturadas por padrão. Tomamos a decisão de não incluir essa funcionalidade como parte da biblioteca principal devido à grande quantidade de ruído de extensões de navegador, bloqueadores de anúncios, etc., que geralmente torna bibliotecas como esta menos eficazes.

Recomendamos usar uma [integração](/front-end/integrations/) relevante como uma maneira melhor de lidar com exceções, ou, se você *preferir* capturar exceções não capturadas, pode fazer isso usando o pacote [`@appsignal/plugin-window-events`](/front-end/plugins/plugin-window-events) junto com este.

## Envolvendo um bloco de código

A biblioteca fornece um método de conveniência para envolver um bloco de código e enviar qualquer erro lançado dentro dele diretamente para o AppSignal. Esse é o método `appsignal.wrap()`, uma função assíncrona que retorna uma `Promise`. Uma função deve ser passada como argumento contendo o código que você gostaria de envolver.

<CodeGroup>
  ```javascript JavaScript theme={null}
  try {
    await appsignal.wrap(() => {
      // catch any error from sync or async code here
    });
  } catch (e) {
    // do something else with the error here, the
    // error has already been sent to AppSignal
  }

  // Alternative usage
  appsignal
    .wrap(() => {
      // catch any error from sync or async code here
    })
    .catch((e) => {
      // do something else with the error here, the
      // error has already been sent to AppSignal
    });
  ```
</CodeGroup>

Se um erro for lançado em qualquer lugar dessa função, retornamos uma promise rejeitada com o `Error` passado como argumento para o handler `catch`.

### Adicionando metadados a erros envolvidos

Para adicionar metadados adicionais a erros capturados e enviados com `wrap`, use o argumento da função de callback. Esse callback recebe o Span atual do erro como argumento e permite que ele seja modificado antes de ser enviado para os servidores do AppSignal.

Veja a [página da API Span][span api] para mais informações sobre todos os dados que podem ser definidos em um Span.

<CodeGroup>
  ```javascript JavaScript theme={null}
  appsignal.wrap(
    () => {
      throw new Error("Test error");
    },
    (span) => {
      span.setAction("MyCustomAction");
      span.setNamespace("custom_namespace");
      span.setTags({ tag1: "value 1", tag2: "value 2" });
    },
  );
  ```
</CodeGroup>

## Erros do GraphQL

Se você estiver usando o cliente GraphQL `urql`, consulte a [documentação do `@appsignal/urql`](/front-end/integrations/urql) para instruções sobre como configurar o relatório de erros do GraphQL.

[span api]: /front-end/span.html