Passer au contenu principal

​
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 : 
yarn add @appsignal/javascript @appsignal/react
npm install @appsignal/javascript @appsignal/react
Vous pouvez également utiliser l’intégration React avec React Native et Expo.

​
Avec les import maps JSPM.io

Avec le générateur d’import maps 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 : 
./bin/importmap pin @appsignal/javascript @appsignal/react

​
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 propDescription
actionLe nom d’action pour laquelle afficher les erreurs signalées par ce boundary. Nous recommandons d’utiliser le nom du composant.
tagsUn objet contenant les tags à définir pour les erreurs signalées par ce boundary.
fallbackUne fonction qui prend optionnellement l’erreur en argument, et renvoie un composant de repli à utiliser lorsque le rendu échoue.
overrideUne 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 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. 
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"));

​
Legacy Boundary

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.
Le LegacyBoundary fonctionne presque exactement de la même manière que ErrorBoundary : 
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"));