> ## 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/react

## Installatie

### Met npm of yarn

Voeg de pakketten `@appsignal/react` en `@appsignal/javascript` toe aan uw `package.json`. Voer vervolgens `npm install`/`yarn install` uit.

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

<CodeGroup>
  ```sh Shell theme={null}
  yarn add @appsignal/javascript @appsignal/react
  npm install @appsignal/javascript @appsignal/react
  ```
</CodeGroup>

<Tip>
  U kunt de React-integratie ook gebruiken met React Native en Expo.
</Tip>

### 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` en `@appsignal/react` toe aan de lijst met dependencies in de generator, en voeg vervolgens 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 @appsignal/react
  ```
</CodeGroup>

## Gebruik

U moet de AppSignal-clientinstantie als de `instance`-prop doorgeven. Daarnaast kunt u optioneel de volgende props doorgeven aan zowel de `ErrorBoundary`- als de `LegacyBoundary`-component:

| Propnaam   | Beschrijving                                                                                                                                                                                                                                                                                        |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `action`   | De actienaam waarvoor fouten worden weergegeven die door deze boundary worden gerapporteerd. We raden aan om de naam van de component te gebruiken.                                                                                                                                                 |
| `tags`     | Een object met de tags die voor fouten worden ingesteld die door deze boundary worden gerapporteerd.                                                                                                                                                                                                |
| `fallback` | Een functie die optioneel de fout als argument accepteert en een fallback-component retourneert die wordt gebruikt wanneer de rendering mislukt.                                                                                                                                                    |
| `override` | Een functie die de error span, en optioneel de fout zelf, als argumenten accepteert en een aangepaste span retourneert. Alleen aangeroepen wanneer er een fout wordt gerapporteerd. Gebruik dit om [tags, params of breadcrumbs in te stellen](/front-end/span#updating-a-span) op het foutmonster. |

Wanneer u `tags`, `fallback` of `override` gebruikt, gebruik dan `useMemo` (of `useCallback` voor `fallback` en `override`) om de waarden te memoizen. Dit voorkomt onnodige re-renders.

### Error Boundary

Als u React v16 of hoger gebruikt, kunt u de `ErrorBoundary`-component gebruiken om fouten van overal in de boom met onderliggende componenten op te vangen.

<CodeGroup>
  ```jsx JavaScript theme={null}
  import React from "react";
  import ReactDOM from "react-dom";
  import { appsignal } from "./appsignal";
  import { ErrorBoundary } from "@appsignal/react";

  const FallbackComponent = () => (
    <div>Uh oh! There was an error :(</div>
  );

  const App = () => (
    const tags = useMemo(() => ({ tag: "value" }), []);
    const fallback = useCallback((error) => <FallbackComponent />, []);
    const override = useCallback((span, error) => {
      span.setParams({ customParams: "123" });
      return span
    }, []);

    <ErrorBoundary
      instance={appsignal}
      action="App"
      tags={tags}
      override={override}
      fallback={fallback}
    >
      { /* Child components here */ }
    </ErrorBoundary>
  );

  ReactDOM.render(<App />, document.getElementById("root"));
  ```
</CodeGroup>

### Legacy Boundary

<Warning>
  De API die deze component gebruikt is op dit moment in de ontwikkeling van
  React niet stabiel. We bieden deze component aan als manier om gebruikers van
  React v15 te ondersteunen, maar garanderen de betrouwbaarheid ervan niet. U
  wordt aangemoedigd om waar mogelijk de `ErrorBoundary` te gebruiken.
</Warning>

De `LegacyBoundary` werkt vrijwel op dezelfde manier als de `ErrorBoundary`:

<CodeGroup>
  ```jsx JavaScript theme={null}
  import React from "react";
  import ReactDOM from "react-dom";
  import { appsignal } from "./appsignal";
  import { LegacyBoundary } from "@appsignal/react";

  const FallbackComponent = () => (
    <div>Uh oh! There was an error :(</div>
  );

  const App = () => (
    const tags = useMemo(() => ({ tag: "value" }), []);
    const fallback = useCallback((error) => <FallbackComponent />, []);
    const override = useCallback((span, error) => {
      span.setParams({ customParams: "123" });
      return span
    }, []);

    <LegacyBoundary
      instance={appsignal}
      action="App"
      tags={tags}
      fallback={fallback}
      override={override}
    >
      { /* Child components here */ }
    </LegacyBoundary>
  );

  ReactDOM.render(<App />, document.getElementById("root"));
  ```
</CodeGroup>