> ## 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 pour Browser avec React

<Note>
  Browser monitoring est une fonctionnalité en beta d'[AppSignal Labs](/labs). Le
  package `@appsignal/browser` est publié sous le tag `beta` sur npm, et sa
  configuration ainsi que son API peuvent encore changer d'une release beta à
  l'autre. Partagez vos retours dans notre
  [communauté Discord](https://discord.gg/EjF6ykYx63).
</Note>

Les erreurs de rendu de React n'atteignent pas de manière fiable le gestionnaire d'erreurs global du navigateur. Encadrez la partie concernée de votre application dans une error boundary pour les rapporter. AppSignal pour Browser en fournit une à `@appsignal/browser/react` ; il n'y a aucun package supplémentaire à installer.

**Optionnel** : React 16.8 ou une version plus récente, si vous souhaitez utiliser l'error boundary fournie avec le package.

<h2 id="catching-render-errors">
  Intercepter les erreurs de rendu
</h2>

<CodeGroup>
  ```jsx JSX theme={null}
  import { captureError } from "@appsignal/browser";
  import { ErrorBoundary } from "@appsignal/browser/react";

  <ErrorBoundary
    captureError={captureError}
    fallback={<p>Something went wrong.</p>}
  >
    <App />
  </ErrorBoundary>
  ```
</CodeGroup>

Passez `captureError` en tant que prop, afin que la boundary puisse rapporter les erreurs qu'elle intercepte.

La boundary rapporte l'erreur interceptée. Son callback `onError` reçoit également la pile de composants de React pour votre propre traitement. Dans cette bêta, cette pile de composants n'est pas incluse dans les rapports d'erreur habituels.

<h3 id="recovering-from-an-error">
  Se remettre d'une erreur
</h3>

Passez une fonction comme `fallback` pour donner à l'utilisateur un moyen de réessayer. Elle reçoit l'erreur et une fonction `reset`, qui efface l'erreur et rend de nouveau les enfants :

<CodeGroup>
  ```jsx JSX theme={null}
  <ErrorBoundary
    captureError={captureError}
    fallback={(error, reset) => (
      <div>
        <p>{error.message}</p>
        <button onClick={reset}>Try again</button>
      </div>
    )}
  >
    <Dashboard />
  </ErrorBoundary>
  ```
</CodeGroup>

<h3 id="wrapping-a-single-component">
  Envelopper un seul composant
</h3>

`withErrorBoundary` enveloppe un composant, ce qui est pratique pour les widgets qui doivent pouvoir échouer sans emporter la page :

<CodeGroup>
  ```jsx JSX theme={null}
  import { captureError } from "@appsignal/browser";
  import { withErrorBoundary } from "@appsignal/browser/react";

  const SafeRevenueWidget = withErrorBoundary(RevenueWidget, {
    captureError,
    fallback: <p>This widget is unavailable.</p>,
  });
  ```
</CodeGroup>

<h3 id="props">
  Props
</h3>

| Prop | Type | Description |
| - | - | - |
| `captureError` | `function` | Obligatoire. La fonction `captureError` de `@appsignal/browser`. |
| `fallback` | node ou `(error, reset) => node` | Ce qui est rendu après une erreur. Ne rend rien si omis. |
| `onError` | `(error, componentStack) => void` | Appelé avant l'envoi de l'erreur à AppSignal. |

Placez des boundaries autour des routes ou des widgets avec un repli utile. Un widget en échec peut alors laisser le reste de la page fonctionner. Une seule boundary à la racine intercepte tout, mais remplace l'application entière par le repli.

<h2 id="reporting-the-current-route">
  Rapporter la route actuelle
</h2>

[Rapportez la route actuelle](/browser/installation#report-the-current-route) au chargement initial et après chaque navigation. Passez un template comme `/orders/:id`, pas l'URL résolue `/orders/42`. Ni les ID de route de React Router ni `usePathname()` de Next.js App Router ne fournissent ce template automatiquement. L'exemple React Router utilise un data router comme `createBrowserRouter` ; rendez `RouteReporter` à l'intérieur.

<CodeGroup>
  ```jsx React Router theme={null}
  import { useEffect } from "react";
  import { useMatches } from "react-router";
  import { setRouteTemplate } from "@appsignal/browser";

  // In your route configuration, add a template to each route's handle:
  // { path: "/orders/:id", element: <OrderPage />,
  //   handle: { routeTemplate: "/orders/:id" } }

  function RouteReporter() {
    const matches = useMatches();
    const template = [...matches].reverse()
      .find((match) => typeof match.handle?.routeTemplate === "string")
      ?.handle.routeTemplate;

    useEffect(() => {
      setRouteTemplate(template ?? null);
    }, [template]);

    return null;
  }
  ```

  ```jsx Next.js App Router theme={null}
  "use client";

  import { useEffect } from "react";
  import { usePathname } from "next/navigation";
  import { setRouteTemplate } from "@appsignal/browser";

  export function RouteReporter({ routeTemplate }) {
    const pathname = usePathname(); // Triggers an update on navigation

    useEffect(() => {
      setRouteTemplate(routeTemplate);
    }, [pathname, routeTemplate]);

    return null;
  }
  ```

  ```jsx Next.js Pages Router theme={null}
  import { useEffect } from "react";
  import { useRouter } from "next/router";
  import { setRouteTemplate } from "@appsignal/browser";

  export function RouteReporter() {
    const { pathname } = useRouter();

    useEffect(() => {
      setRouteTemplate(pathname); // e.g. "/orders/[id]"
    }, [pathname]);

    return null;
  }
  ```
</CodeGroup>

Avec Next.js App Router, rendez `RouteReporter` depuis la route correspondante. Par exemple, passez `routeTemplate="/orders/[id]"` depuis `app/orders/[id]/page.jsx`. `usePathname()` renvoie l'URL résolue, comme `/orders/42`, ne l'utilisez donc pas comme template.

<Note>
  Importez votre configuration AppSignal avant votre routeur. Le SDK et
  certains routeurs modifient tous les deux `history.pushState`, et le SDK se
  compose avec un patch existant au lieu de le remplacer. Charger le routeur en
  premier peut laisser la navigation côté client non rapportée.
</Note>

<h2 id="reporting-errors-from-event-handlers-and-effects">
  Rapporter les erreurs des gestionnaires d'événements et des effets
</h2>

Une error boundary intercepte les erreurs levées pendant le rendu. Elle n'intercepte pas les erreurs levées dans un gestionnaire d'événements, un `setTimeout` ou une promesse rejetée à l'intérieur d'un effet. Celles qui ne sont pas interceptées atteignent `window` et sont rapportées automatiquement. Pour les autres, rapportez-les vous-même :

<CodeGroup>
  ```jsx JSX theme={null}
  import { captureError } from "@appsignal/browser";

  async function onSubmit(order) {
    try {
      await submitOrder(order);
    } catch (error) {
      captureError(error);
      setStatus("failed");
    }
  }
  ```
</CodeGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.