@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 :

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

SDK & télémétrie

SDK de langage

Outils de télémétrie

Installation

Avec npm ou yarn

Avec les import maps JSPM.io

Avec `rails-importmap`

Utilisation

Error Boundary

Legacy Boundary

​Installation

​Avec npm ou yarn

​Avec les import maps JSPM.io

​Avec rails-importmap

​Utilisation

​Error Boundary

​Legacy Boundary

Installation

Avec npm ou yarn

Avec les import maps JSPM.io

Avec `rails-importmap`

Utilisation

Error Boundary

Legacy Boundary