Naar hoofdinhoud gaan

​
Installatie

​
Met npm of yarn

Voeg de pakketten @appsignal/react en @appsignal/javascript toe aan uw package.json. Voer vervolgens npm install/yarn install uit. U kunt deze pakketten ook via de command line aan uw package.json toevoegen: 
yarn add @appsignal/javascript @appsignal/react
npm install @appsignal/javascript @appsignal/react
U kunt de React-integratie ook gebruiken met React Native en Expo.

​
Met JSPM.io import maps

Met de JSPM.io import map generator kunt u een import map genereren voor de afhankelijkheden van uw applicatie. Voeg @appsignal/javascript en @appsignal/react toe aan de lijst met dependencies in de generator, en voeg vervolgens de gegenereerde import map en ES module shims toe aan de code van uw applicatie.

​
Met rails-importmap

Gebruik het volgende commando om deze pakketten toe te voegen aan de import maps van uw Rails-applicatie: 
./bin/importmap pin @appsignal/javascript @appsignal/react

​
Gebruik

U moet de AppSignal-clientinstantie als de instance-prop doorgeven. Daarnaast kunt u optioneel de volgende props doorgeven aan zowel de ErrorBoundary- als de LegacyBoundary-component:
PropnaamBeschrijving
actionDe actienaam waarvoor fouten worden weergegeven die door deze boundary worden gerapporteerd. We raden aan om de naam van de component te gebruiken.
tagsEen object met de tags die voor fouten worden ingesteld die door deze boundary worden gerapporteerd.
fallbackEen functie die optioneel de fout als argument accepteert en een fallback-component retourneert die wordt gebruikt wanneer de rendering mislukt.
overrideEen functie die de error span, en optioneel de fout zelf, als argumenten accepteert en een aangepaste span retourneert. Alleen aangeroepen wanneer er een fout wordt gerapporteerd. Gebruik dit om tags, params of breadcrumbs in te stellen op het foutmonster.
Wanneer u tags, fallback of override gebruikt, gebruik dan useMemo (of useCallback voor fallback en override) om de waarden te memoizen. Dit voorkomt onnodige re-renders.

​
Error Boundary

Als u React v16 of hoger gebruikt, kunt u de ErrorBoundary-component gebruiken om fouten van overal in de boom met onderliggende componenten op te vangen. 
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

De API die deze component gebruikt is op dit moment in de ontwikkeling van React niet stabiel. We bieden deze component aan als manier om gebruikers van React v15 te ondersteunen, maar garanderen de betrouwbaarheid ervan niet. U wordt aangemoedigd om waar mogelijk de ErrorBoundary te gebruiken.
De LegacyBoundary werkt vrijwel op dezelfde manier als de 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"));