> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

<CodeGroup>
  ```sh Shell theme={null}
  yarn add @appsignal/javascript @appsignal/react
  npm install @appsignal/javascript @appsignal/react
  ```
</CodeGroup>

<Tip>
  Sie können die React-Integration auch mit React Native und Expo verwenden.
</Tip>

### Mit JSPM.io Import Maps

Mit dem [JSPM.io Import Map Generator](https://generator.jspm.io/) 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:

<CodeGroup>
  ```sh Shell theme={null}
  ./bin/importmap pin @appsignal/javascript @appsignal/react
  ```
</CodeGroup>

## 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](/front-end/span#updating-a-span) 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.

<CodeGroup>
  ```jsx JavaScript theme={null}
  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"));
  ```
</CodeGroup>

### Legacy Boundary

<Warning>
  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.
</Warning>

Die `LegacyBoundary` funktioniert nahezu identisch zur `ErrorBoundary`:

<CodeGroup>
  ```jsx JavaScript theme={null}
  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"));
  ```
</CodeGroup>