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

# AppSignal voor JavaScript installeren

Volg eerst de [installatiehandleiding](/guides/new-application) wanneer u een nieuwe applicatie aan AppSignal toevoegt.

## Een Push API-sleutel aanmaken

Voordat u begint, moet u uw Push API-sleutel opzoeken in de sectie ["Push and deploy"](https://appsignal.com/redirect-to/app?to=info) op de instellingenpagina van uw app. U vindt uw API-sleutel onder "Front-end error monitoring". Zodra u uw sleutel heeft, volgt u de instructies onder de sectie [Installatie](#installation) om deze in uw applicatie te gebruiken.

## Installatie

### Met npm of yarn

Voeg eerst het pakket `@appsignal/javascript` toe aan uw `package.json`. Voer vervolgens `yarn install`/`npm install` uit. U heeft ook een sleutel voor Front-end-foutmonitoring nodig uit de sectie ["Push and deploy"](https://appsignal.com/redirect-to/app?to=info) op de instellingenpagina van uw app.

U kunt deze pakketten ook via de command line aan uw `package.json` toevoegen:

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

### Met JSPM.dev

<Warning>
  Het wordt niet aanbevolen om de JSPM.dev CDN in productie te gebruiken. Voor
  een productieklare opzet zonder buildstap raden we het gebruik van
  [JSPM.io import maps](#with-jspmio-import-maps) aan.
</Warning>

Dankzij de JSPM CDN is het mogelijk om de AppSignal voor JavaScript-integratie te gebruiken zonder een front-end-buildstap voor assets. Uw applicatie kan pakketten direct vanuit de CDN importeren:

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

### Met JSPM.io import maps

Met de [JSPM.io import map generator](https://generator.jspm.io/) kunt u een import map genereren voor de afhankelijkheden van uw applicatie.

Voeg `@appsignal/javascript` toe aan de lijst met dependencies, voeg de gegenereerde import map en ES module shims toe aan de code van uw applicatie.

### Met `rails-importmap`

Gebruik het volgende commando om deze pakketten toe te voegen aan de import maps van uw Rails-applicatie:

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

## Gebruik

Maak een `appsignal.js`-bestand om AppSignal te laden en te configureren. Vanuit dit bestand exporteren we de instantie van het `Appsignal`-object die we vanuit onze applicatie gebruiken. Voor meer informatie over de configuratie zie onze [configuratiesectie](/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>

U kunt het `Appsignal`-object vervolgens in uw app importeren en gebruiken:

<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>
  **LET OP:** Als u uw assets via een CDN aanbiedt, moet u [twee
  wijzigingen](/front-end/troubleshooting) doorvoeren om foutrapportage
  in staat te stellen fouten naar onze API-endpoint te versturen. Lees meer over
  de [vereiste wijzigingen](/front-end/troubleshooting).

  Als u Content Security Policy gebruikt, vergeet dan niet de juiste headers toe
  te voegen zoals [hier
  beschreven](/front-end/troubleshooting#content-security-policy-csp).
</Warning>

## Integraties toevoegen

Uw applicatie maakt mogelijk gebruik van een framework of library die door AppSignal wordt ondersteund.
Bekijk de sectie [integraties](/front-end/integrations) voor elke library die uw applicatie gebruikt en volg de instructies om instrumentatie voor die libraries toe te voegen.

[Voeg integraties toe aan uw applicatie](/front-end/integrations).

## Plug-ins toevoegen

AppSignal biedt ook een aantal plug-ins voor JavaScript-functionaliteit in de browser.
Bekijk de sectie [plug-ins](/front-end/plugins) voor eventuele aanvullende instrumentatie die u aan uw applicatie wilt toevoegen.

[Voeg plug-ins toe aan uw applicatie](/front-end/plugins).

## Aangepaste foutrapportage

Gebruikt u geen framework of library, maar wilt u toch handmatig JavaScript-fouten rapporteren?
Gebruik onze [Span API](/front-end/span) om spans aan te maken waarop u fouten kunt rapporteren, tags kunt toevoegen en aanvullende metadata kunt opnemen.
Lees vervolgens onze [handleiding voor foutafhandeling](/front-end/error-handling) over hoe u fouten naar AppSignal rapporteert.

***

<Note>
  📖 Ga verder met onze [installatiehandleiding](/guides/new-application).
</Note>

## Verwijderen

Verwijder AppSignal uit uw app door de onderstaande stappen te volgen. Wanneer deze stappen zijn voltooid, zal uw app geen gegevens meer naar de AppSignal-servers sturen.

1. Verwijder in de `package.json` van uw app alle regels die verwijzen naar een `appsignal`-pakket: `"*appsignal/*": "*"`.

2. Voer `npm install` of `yarn install` uit om uw `package.lock`/`yarn.lock` bij te werken met de verwijderde pakketten.
   * Of voer `npm uninstall @appsignal/<package name>` of `yarn remove @appsignal/<package name>` uit om een AppSignal-pakket te verwijderen.

3. Verwijder alle AppSignal-[configuratie](/front-end/configuration/) uit uw app.

4. Commit, deploy en herstart uw app.
   * Zo zorgt u ervoor dat de AppSignal-servers geen gegevens van uw app blijven ontvangen.

5. Tot slot kunt u [de app verwijderen](/guides/application/deleting-applications) op AppSignal.com.

<Note>
  📖 Ga verder met onze [verwijderingshandleiding](/guides/application/deleting-applications).
</Note>