@appsignal/react

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.

Wenn Sie 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.

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

SDKs & Telemetrie

Sprach-SDKs

Telemetrie-Tools

Installation

Mit npm oder yarn

Mit JSPM.io Import Maps

Mit `rails-importmap`

Verwendung

Error Boundary

Legacy Boundary

​Installation

​Mit npm oder yarn

​Mit JSPM.io Import Maps

​Mit rails-importmap

​Verwendung

​Error Boundary

​Legacy Boundary

Installation

Mit npm oder yarn

Mit JSPM.io Import Maps

Mit `rails-importmap`

Verwendung

Error Boundary

Legacy Boundary