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

# Instalando o AppSignal para JavaScript

Siga primeiro o [guia de instalação](/guides/new-application) ao adicionar uma nova aplicação ao AppSignal.

## Criando uma chave da Push API

Antes de começar, você precisará encontrar sua chave da Push API na [seção "Push and deploy"](https://appsignal.com/redirect-to/app?to=info) da página de configurações do seu app. Você encontrará sua chave de API em "Front-end error monitoring". Assim que tiver sua chave, siga as instruções na seção [Instalação](#installation) para usá-la na sua aplicação.

## Instalação

### Com npm ou yarn

Primeiro, adicione o pacote `@appsignal/javascript` ao seu `package.json`. Em seguida, execute `yarn install`/`npm install`. Você também precisará de uma chave de monitoramento de erros de front-end da [seção "Push and deploy"](https://appsignal.com/redirect-to/app?to=info) da página de configurações do seu app.

Você também pode adicionar esses pacotes ao seu `package.json` pela linha de comando:

<CodeGroup>
  ```bash Bash theme={null}
  yarn add @appsignal/javascript
  npm install @appsignal/javascript
  ```
</CodeGroup>

### Com JSPM.dev

<Warning>
  Não é recomendado usar o CDN JSPM.dev em produção. Para
  uma configuração pronta para produção sem etapa de build, recomendamos usar
  [import maps do JSPM.io](#with-jspmio-import-maps).
</Warning>

Graças ao CDN do JSPM, é possível usar a integração AppSignal para JavaScript sem uma etapa de build de assets do front-end. Sua aplicação pode importar pacotes diretamente do CDN:

<CodeGroup>
  ```js JavaScript theme={null}
  import Appsignal from "https://jspm.dev/@appsignal/javascript";
  ```
</CodeGroup>

### Com import maps do JSPM.io

Usando o [gerador de import maps do JSPM.io](https://generator.jspm.io/), você pode gerar um import map para as dependências da sua aplicação.

Adicione `@appsignal/javascript` à lista de dependências, depois adicione o import map gerado e o ES module shims ao código da sua aplicação.

### Com `rails-importmap`

Use o comando a seguir para adicionar esses pacotes aos import maps da sua aplicação Rails:

<CodeGroup>
  ```sh Shell theme={null}
  ./bin/importmap pin @appsignal/javascript
  ```
</CodeGroup>

## Uso

Crie um arquivo `appsignal.js` para requerer e configurar o AppSignal. Deste arquivo, exportamos a instância do objeto `Appsignal` que usaremos na nossa aplicação. Para mais informações sobre a configuração, veja nossa [seção de configuração](/front-end/configuration).

<CodeGroup>
  ```javascript JavaScript theme={null}
  // For ES Module via npm/yarn, or with import maps
  import Appsignal from "@appsignal/javascript";
  // For CommonJS module via npm/yarn
  const Appsignal = require("@appsignal/javascript").default;
  // With the JSPM.dev CDN
  import Appsignal from "https://jspm.dev/@appsignal/javascript";

  export const appsignal = new Appsignal({
    key: "YOUR FRONTEND API KEY",
  });
  ```
</CodeGroup>

Você pode então importar e usar o objeto `Appsignal` na sua aplicação:

<CodeGroup>
  ```javascript JavaScript theme={null}
  // Place this at the top
  // Import the file created in the previous step
  import { appsignal } from "./appsignal";

  // Place your app code below this
  ```
</CodeGroup>

<Warning>
  **NOTA:** Se você estiver executando um CDN na frente dos seus assets, será necessário
  fazer [duas alterações](/front-end/troubleshooting) para que o relatório de erros
  consiga enviar erros para o nosso endpoint da API. Leia mais sobre as [alterações
  necessárias](/front-end/troubleshooting).

  Se você usa Content Security Policy, certifique-se de adicionar os cabeçalhos corretos como
  [descrito
  aqui](/front-end/troubleshooting#content-security-policy-csp).
</Warning>

## Adicionar integrações

Sua aplicação pode estar usando um framework ou biblioteca que o AppSignal suporta.
Confira a seção de [integrações](/front-end/integrations) para qualquer biblioteca que sua aplicação use e siga as instruções para adicionar instrumentação para essas bibliotecas.

[Adicione integrações à sua aplicação](/front-end/integrations).

## Adicionar plugins

O AppSignal também oferece alguns plugins para funcionalidades JavaScript no navegador.
Confira a seção de [plugins](/front-end/plugins) para qualquer instrumentação adicional que você gostaria de adicionar à sua aplicação.

[Adicione plugins à sua aplicação](/front-end/plugins).

## Relatório personalizado de erros

Não está usando um framework ou biblioteca, mas gostaria de relatar erros JavaScript manualmente?
Use nossa [API de Span](/front-end/span) para criar spans onde relatar erros, adicionar tags e mais metadados.
Em seguida, leia nosso [guia de tratamento de erros](/front-end/error-handling) sobre como relatar erros ao AppSignal.

***

<Note>
  📖 Continue com nosso [guia de instalação](/guides/new-application).
</Note>

## Desinstalação

Desinstale o AppSignal da sua aplicação seguindo os passos abaixo. Quando esses passos forem concluídos, sua aplicação não enviará mais dados para os servidores do AppSignal.

1. No `package.json` da sua aplicação, exclua todas as linhas que referenciam um pacote `appsignal`: `"*appsignal/*": "*"`.

2. Execute `npm install` ou `yarn install` para atualizar seu `package.lock`/`yarn.lock` com o estado dos pacotes removidos.
   * Como alternativa, execute `npm uninstall @appsignal/<package name>` ou `yarn remove @appsignal/<package name>` para desinstalar um pacote do AppSignal.

3. Remova qualquer [configuração](/front-end/configuration/) do AppSignal da sua aplicação.

4. Faça commit, deploy e reinicie sua aplicação.
   * Isso garantirá que os servidores do AppSignal não continuem recebendo dados da sua aplicação.

5. Por fim, [remova a aplicação](/guides/application/deleting-applications) no AppSignal.com.

<Note>
  📖 Continue com nosso [guia de
  desinstalação](/guides/application/deleting-applications).
</Note>