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

# Frontend-fouten opvangen

Om een fout naar AppSignal te rapporteren, vangt u de fout op en geeft u deze door aan de helperfunctie `sendError`.

Als u TypeScript gebruikt, moet het argument van de helperfunctie `sendError` een instantie van `Error` of `ErrorEvent` zijn. Dat komt doordat in TypeScript opgevangen variabelen in strict mode standaard van het type `unknown` zijn sinds versie 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>

## Metadata toevoegen aan fouten

Om aanvullende metadata toe te voegen aan fouten die met `sendError` worden verzonden, gebruikt u het callback-functieargument. Deze callback ontvangt de huidige Span voor de fout als argument en stelt u in staat deze te wijzigen voordat deze naar de AppSignal-servers wordt verzonden.

Zie de [Span API-pagina][span api] voor meer informatie over alle gegevens die op een Span kunnen worden ingesteld.

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

## Niet-opgevangen excepties

Niet-opgevangen excepties worden **niet** standaard vastgelegd. We hebben besloten om deze functionaliteit niet als onderdeel van de kernlibrary op te nemen, vanwege de grote hoeveelheid ruis van browserextensies, adblockers en dergelijke, die libraries zoals deze over het algemeen minder effectief maakt.

We raden aan om een passende [integratie](/front-end/integrations/) te gebruiken als betere manier om excepties af te handelen. Als u liever zelf niet-opgevangen excepties vastlegt, kunt u dat doen door het pakket [`@appsignal/plugin-window-events`](/front-end/plugins/plugin-window-events) naast deze library te gebruiken.

## Een codeblok inkapselen

De library biedt een handige methode om een codeblok in te kapselen en eventuele fouten die daarin worden gegooid direct naar AppSignal te sturen. Dit is de methode `appsignal.wrap()`, een asynchrone functie die een `Promise` retourneert. Geef als argument een functie door met de code die u wilt inkapselen.

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

Als er ergens in deze functie een fout wordt gegooid, retourneren we een rejected promise met de `Error` als argument doorgegeven aan de `catch`-handler.

### Metadata toevoegen aan ingekapselde fouten

Om aanvullende metadata toe te voegen aan fouten die met `wrap` worden opgevangen en verzonden, gebruikt u het callback-functieargument. Deze callback ontvangt de huidige Span voor de fout als argument en stelt u in staat deze te wijzigen voordat deze naar de AppSignal-servers wordt verzonden.

Zie de [Span API-pagina][span api] voor meer informatie over alle gegevens die op een Span kunnen worden ingesteld.

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

## GraphQL-fouten

Als u de `urql` GraphQL-client gebruikt, raadpleeg dan de [`@appsignal/urql`-documentatie](/front-end/integrations/urql) voor instructies over het instellen van foutrapportage vanuit GraphQL.

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