AppSignal für Browser mit React

Browser monitoring ist ein Beta-Feature von AppSignal 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.

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.

Render-Fehler abfangen

import { captureError } from "@appsignal/browser";
import { ErrorBoundary } from "@appsignal/browser/react";

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

Ü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.

Sich von einem Fehler erholen

Ü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:

<ErrorBoundary
  captureError={captureError}
  fallback={(error, reset) => (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )}
>
  <Dashboard />
</ErrorBoundary>

Eine einzelne Komponente umwickeln

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

import { captureError } from "@appsignal/browser";
import { withErrorBoundary } from "@appsignal/browser/react";

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

Props

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.

Die aktuelle Route melden

Melden Sie die aktuelle 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.

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;
}

"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;
}

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;
}

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.

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.

Fehler aus Event-Handlern und Effects melden

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:

import { captureError } from "@appsignal/browser";

async function onSubmit(order) {
  try {
    await submitOrder(order);
  } catch (error) {
    captureError(error);
    setStatus("failed");
  }
}

SDKs & Telemetrie

Sprach-SDKs

Telemetrie-Tools

Render-Fehler abfangen

Sich von einem Fehler erholen

Eine einzelne Komponente umwickeln

Props

Die aktuelle Route melden

Fehler aus Event-Handlern und Effects melden

​Render-Fehler abfangen

​Sich von einem Fehler erholen

​Eine einzelne Komponente umwickeln

​Props

​Die aktuelle Route melden

​Fehler aus Event-Handlern und Effects melden

Render-Fehler abfangen

Sich von einem Fehler erholen

Eine einzelne Komponente umwickeln

Props

Die aktuelle Route melden

Fehler aus Event-Handlern und Effects melden