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

## Installation

### Avec npm ou yarn

Ajoutez les packages `@appsignal/react` et `@appsignal/javascript` à votre `package.json`. Ensuite, exécutez `npm install`/`yarn install`.

Vous pouvez également ajouter ces packages à votre `package.json` en ligne de commande :

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

<Tip>
  Vous pouvez également utiliser l'intégration React avec React Native et Expo.
</Tip>

### Avec les import maps JSPM.io

Avec le [générateur d'import maps JSPM.io](https://generator.jspm.io/), vous pouvez générer une import map pour les dépendances de votre application.

Ajoutez `@appsignal/javascript` et `@appsignal/react` à la liste des dépendances dans le générateur, puis ajoutez l'import map générée et les shims des modules ES au code de votre application.

### Avec `rails-importmap`

Utilisez la commande suivante pour ajouter ces packages aux import maps de votre application Rails :

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

## Utilisation

Vous devez passer l'instance du client AppSignal en tant que prop `instance`. De plus, les props suivantes peuvent éventuellement être passées aux composants `ErrorBoundary` et `LegacyBoundary` :

| Nom de prop | Description                                                                                                                                                                                                                                                                                         |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `action`    | Le nom d'action pour laquelle afficher les erreurs signalées par ce boundary. Nous recommandons d'utiliser le nom du composant.                                                                                                                                                                     |
| `tags`      | Un objet contenant les tags à définir pour les erreurs signalées par ce boundary.                                                                                                                                                                                                                   |
| `fallback`  | Une fonction qui prend optionnellement l'erreur en argument, et renvoie un composant de repli à utiliser lorsque le rendu échoue.                                                                                                                                                                   |
| `override`  | Une fonction qui prend le span d'erreur, et éventuellement l'erreur elle-même, en arguments, et renvoie un span modifié. Appelée uniquement lorsqu'une erreur est signalée. Utilisez-la pour [définir des tags, params ou breadcrumbs](/front-end/span#updating-a-span) sur l'échantillon d'erreur. |

Lorsque vous utilisez `tags`, `fallback` ou `override`, utilisez `useMemo` (ou `useCallback` pour `fallback` et `override`) pour mémoriser les valeurs. Cela évitera les re-rendus inutiles.

### Error Boundary

Si vous utilisez React v16 ou supérieur, vous pouvez utiliser le composant `ErrorBoundary` pour intercepter les erreurs depuis n'importe où dans l'arborescence des composants enfants.

<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>
  L'API utilisée par ce composant est instable à ce stade du développement de React.
  Nous proposons ce composant comme un moyen de prendre en charge ceux qui utilisent React
  v15, mais nous ne garantissons pas sa fiabilité. Nous vous encourageons à utiliser
  `ErrorBoundary` chaque fois que possible.
</Warning>

Le `LegacyBoundary` fonctionne presque exactement de la même manière que `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>