> ## 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 für Browser mit React

<Note>
  Browser monitoring ist ein Beta-Feature von [AppSignal Labs](/labs). Das Paket
  `@appsignal/browser` wird unter dem `beta`-Tag auf npm veröffentlicht, und
  seine Konfiguration und API können sich zwischen Beta-Releases noch ändern.
  Teilen Sie Ihr Feedback in unserer
  [Discord-Community](https://discord.gg/EjF6ykYx63).
</Note>

Render-Fehler in React erreichen den globalen Error-Handler des Browsers nicht zuverlässig. Umschließen Sie den betroffenen Teil Ihrer Anwendung mit einer Error Boundary, um sie zu melden. AppSignal für Browser enthält eine unter `@appsignal/browser/react`; es ist kein zusätzliches Paket zu installieren.

**Optional**: React 16.8 oder neuer, wenn Sie die Error Boundary verwenden möchten, die das Paket mitbringt.

<h2 id="catching-render-errors">
  Render-Fehler abfangen
</h2>

<CodeGroup>
  ```jsx JSX theme={null}
  import { captureError } from "@appsignal/browser";
  import { ErrorBoundary } from "@appsignal/browser/react";

  <ErrorBoundary
    captureError={captureError}
    fallback={<p>Something went wrong.</p>}
  >
    <App />
  </ErrorBoundary>
  ```
</CodeGroup>

Übergeben Sie `captureError` als Prop, damit die Boundary die von ihr abgefangenen Fehler melden kann.

Die Boundary meldet den abgefangenen Fehler. Ihr `onError`-Callback erhält außerdem den React-Component-Stack zur eigenen Verwendung. In dieser Beta ist dieser Component-Stack nicht in den regulären Fehlerberichten enthalten.

<h3 id="recovering-from-an-error">
  Sich von einem Fehler erholen
</h3>

Übergeben Sie eine Funktion als `fallback`, um dem Nutzer einen neuen Versuch zu ermöglichen. Sie erhält den Fehler und eine `reset`-Funktion, die den Fehler löscht und die Children erneut rendert:

<CodeGroup>
  ```jsx JSX theme={null}
  <ErrorBoundary
    captureError={captureError}
    fallback={(error, reset) => (
      <div>
        <p>{error.message}</p>
        <button onClick={reset}>Try again</button>
      </div>
    )}
  >
    <Dashboard />
  </ErrorBoundary>
  ```
</CodeGroup>

<h3 id="wrapping-a-single-component">
  Eine einzelne Komponente umwickeln
</h3>

`withErrorBoundary` umwickelt eine Komponente, was praktisch ist für Widgets, die fehlschlagen sollen, ohne die Seite mitzunehmen:

<CodeGroup>
  ```jsx JSX theme={null}
  import { captureError } from "@appsignal/browser";
  import { withErrorBoundary } from "@appsignal/browser/react";

  const SafeRevenueWidget = withErrorBoundary(RevenueWidget, {
    captureError,
    fallback: <p>This widget is unavailable.</p>,
  });
  ```
</CodeGroup>

<h3 id="props">
  Props
</h3>

| Prop | Typ | Beschreibung |
| - | - | - |
| `captureError` | `function` | Erforderlich. Die Funktion `captureError` aus `@appsignal/browser`. |
| `fallback` | Node oder `(error, reset) => node` | Was nach einem Fehler gerendert wird. Rendert nichts, wenn es weggelassen wird. |
| `onError` | `(error, componentStack) => void` | Wird aufgerufen, bevor der Fehler an AppSignal gesendet wird. |

Platzieren Sie Boundaries um Routen oder Widgets mit einem sinnvollen Fallback. So kann ein fehlgeschlagenes Widget den Rest der Seite weiterhin funktionsfähig lassen. Eine Boundary an der Wurzel fängt alles ab, ersetzt aber Ihre gesamte Anwendung durch den Fallback.

<h2 id="reporting-the-current-route">
  Die aktuelle Route melden
</h2>

[Melden Sie die aktuelle Route](/browser/installation#report-the-current-route) beim ersten Laden und nach jeder Navigation. Übergeben Sie ein Template wie `/orders/:id`, nicht die aufgelöste URL `/orders/42`. Weder die Routen-IDs von React Router noch `usePathname()` von Next.js App Router liefern dieses Template automatisch. Das Beispiel für React Router verwendet einen Data Router wie `createBrowserRouter`; rendern Sie `RouteReporter` darin.

<CodeGroup>
  ```jsx React Router theme={null}
  import { useEffect } from "react";
  import { useMatches } from "react-router";
  import { setRouteTemplate } from "@appsignal/browser";

  // In your route configuration, add a template to each route's handle:
  // { path: "/orders/:id", element: <OrderPage />,
  //   handle: { routeTemplate: "/orders/:id" } }

  function RouteReporter() {
    const matches = useMatches();
    const template = [...matches].reverse()
      .find((match) => typeof match.handle?.routeTemplate === "string")
      ?.handle.routeTemplate;

    useEffect(() => {
      setRouteTemplate(template ?? null);
    }, [template]);

    return null;
  }
  ```

  ```jsx Next.js App Router theme={null}
  "use client";

  import { useEffect } from "react";
  import { usePathname } from "next/navigation";
  import { setRouteTemplate } from "@appsignal/browser";

  export function RouteReporter({ routeTemplate }) {
    const pathname = usePathname(); // Triggers an update on navigation

    useEffect(() => {
      setRouteTemplate(routeTemplate);
    }, [pathname, routeTemplate]);

    return null;
  }
  ```

  ```jsx Next.js Pages Router theme={null}
  import { useEffect } from "react";
  import { useRouter } from "next/router";
  import { setRouteTemplate } from "@appsignal/browser";

  export function RouteReporter() {
    const { pathname } = useRouter();

    useEffect(() => {
      setRouteTemplate(pathname); // e.g. "/orders/[id]"
    }, [pathname]);

    return null;
  }
  ```
</CodeGroup>

Rendern Sie `RouteReporter` beim Next.js App Router aus der passenden Route. Übergeben Sie zum Beispiel `routeTemplate="/orders/[id]"` aus `app/orders/[id]/page.jsx`. `usePathname()` gibt die aufgelöste URL zurück, zum Beispiel `/orders/42`, verwenden Sie sie also nicht als Template.

<Note>
  Importieren Sie Ihr AppSignal-Setup vor Ihrem Router. Das SDK und einige
  Router patchen beide `history.pushState`, und das SDK verträgt sich mit einem
  bestehenden Patch, statt ihn zu ersetzen. Den Router zuerst zu laden kann dazu
  führen, dass clientseitige Navigation nicht gemeldet wird.
</Note>

<h2 id="reporting-errors-from-event-handlers-and-effects">
  Fehler aus Event-Handlern und Effects melden
</h2>

Eine Error Boundary fängt Fehler ab, die beim Rendern ausgelöst werden. Sie fängt keine Fehler ab, die in einem Event-Handler, einem `setTimeout` oder einem abgelehnten Promise innerhalb eines Effects ausgelöst werden. Nicht abgefangene erreichen `window` und werden automatisch gemeldet. Die übrigen melden Sie selbst:

<CodeGroup>
  ```jsx JSX theme={null}
  import { captureError } from "@appsignal/browser";

  async function onSubmit(order) {
    try {
      await submitOrder(order);
    } catch (error) {
      captureError(error);
      setStatus("failed");
    }
  }
  ```
</CodeGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.