AppSignal pour Browser avec React

Browser monitoring est une fonctionnalité en beta d’AppSignal 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.

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.

Intercepter les erreurs de rendu

import { captureError } from "@appsignal/browser";
import { ErrorBoundary } from "@appsignal/browser/react";

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

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.

Se remettre d’une erreur

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 :

<ErrorBoundary
  captureError={captureError}
  fallback={(error, reset) => (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <Dashboard />
</ErrorBoundary>

Envelopper un seul composant

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

import { captureError } from "@appsignal/browser";
import { withErrorBoundary } from "@appsignal/browser/react";

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

Props

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.

Rapporter la route actuelle

Rapportez la route actuelle 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.

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

"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;
}

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

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.

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.

Rapporter les erreurs des gestionnaires d’événements et des effets

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 :

import { captureError } from "@appsignal/browser";

async function onSubmit(order) {
  try {
    await submitOrder(order);
  } catch (error) {
    captureError(error);
    setStatus("failed");
  }
}

SDK & télémétrie

SDK de langage

Outils de télémétrie

Intercepter les erreurs de rendu

Se remettre d’une erreur

Envelopper un seul composant

Props

Rapporter la route actuelle

Rapporter les erreurs des gestionnaires d’événements et des effets

​Intercepter les erreurs de rendu

​Se remettre d’une erreur

​Envelopper un seul composant

​Props

​Rapporter la route actuelle

​Rapporter les erreurs des gestionnaires d’événements et des effets

Intercepter les erreurs de rendu

Se remettre d’une erreur

Envelopper un seul composant

Props

Rapporter la route actuelle

Rapporter les erreurs des gestionnaires d’événements et des effets