Installation
Mit npm oder yarn
Fügen Sie die Pakete @appsignal/react und @appsignal/javascript zu Ihrer package.json hinzu. Führen Sie dann npm install/yarn install aus.
Sie können diese Pakete auch auf der Kommandozeile zu Ihrer package.json hinzufügen:
yarn add @appsignal/javascript @appsignal/react
npm install @appsignal/javascript @appsignal/react
Sie können die React-Integration auch mit React Native und Expo verwenden.
Mit JSPM.io Import Maps
Mit dem JSPM.io Import Map Generator können Sie eine Import Map für die Abhängigkeiten Ihrer Anwendung generieren.
Fügen Sie @appsignal/javascript und @appsignal/react zur Liste der Abhängigkeiten im Generator hinzu, und integrieren Sie dann die generierte Import Map sowie ES-Module-Shims in den Code Ihrer Anwendung.
Mit rails-importmap
Verwenden Sie den folgenden Befehl, um diese Pakete zu den Import Maps Ihrer Rails-Anwendung hinzuzufügen:
./bin/importmap pin @appsignal/javascript @appsignal/react
Verwendung
Sie müssen die AppSignal-Client-Instanz als instance-Prop übergeben. Darüber hinaus können sowohl der ErrorBoundary- als auch der LegacyBoundary-Komponente optional die folgenden Props übergeben werden:
| Prop-Name | Beschreibung |
|---|
action | Der Action-Name, für den von dieser Boundary gemeldete Fehler angezeigt werden sollen. Wir empfehlen, den Namen der Komponente zu verwenden. |
tags | Ein Objekt mit den Tags, die für von dieser Boundary gemeldete Fehler gesetzt werden sollen. |
fallback | Eine Funktion, die optional den Fehler als Argument nimmt und eine Fallback-Komponente zurückgibt, die verwendet wird, wenn das Rendern fehlschlägt. |
override | Eine Funktion, die den Fehler-Span und optional den Fehler selbst als Argumente nimmt und einen modifizierten Span zurückgibt. Wird nur aufgerufen, wenn ein Fehler gemeldet wird. Verwenden Sie sie, um Tags, Params oder Breadcrumbs am Fehler-Sample zu setzen. |
tags, fallback oder override verwenden, nutzen Sie useMemo (oder useCallback für fallback und override), um die Werte zu memoisieren. Das verhindert unnötige Re-Renders.
Error Boundary
Wenn Sie React v16 oder höher verwenden, können Sie die ErrorBoundary-Komponente verwenden, um Fehler von beliebiger Stelle im untergeordneten Komponentenbaum abzufangen.
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
Die API, die diese Komponente verwendet, ist zum aktuellen Zeitpunkt der
React-Entwicklung instabil. Wir bieten diese Komponente an, um diejenigen zu unterstützen,
die React v15 verwenden, garantieren jedoch nicht ihre Zuverlässigkeit. Wir empfehlen,
wann immer möglich die ErrorBoundary zu verwenden.
LegacyBoundary funktioniert nahezu identisch zur 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"));
