AppSignal para Browser com React

Browser monitoring é uma funcionalidade em beta do AppSignal Labs. O pacote @appsignal/browser é publicado sob a tag beta no npm, e sua configuração e API ainda podem mudar entre releases beta. Compartilhe seu feedback na nossa comunidade no Discord.

Erros de renderização do React nem sempre chegam de forma confiável ao handler de erros global do navegador. Envolva a parte afetada da sua aplicação em um error boundary para relatá-los. O AppSignal para Browser inclui um em @appsignal/browser/react; não há pacote extra para instalar. Opcional: React 16.8 ou posterior, se você quiser usar o error boundary que acompanha o pacote.

Capturando erros de renderização

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

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

Passe captureError como prop para que o boundary possa relatar os erros que captura. O boundary relata o erro capturado. Seu callback onError também recebe a pilha de componentes do React para seu próprio tratamento. Nesta beta, essa pilha de componentes não é incluída nos relatórios de erro comuns.

Recuperando de um erro

Passe uma função como fallback para dar ao usuário uma forma de tentar de novo. Ela recebe o erro e uma função reset, que limpa o erro e renderiza os filhos novamente:

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

Envolvendo um único componente

withErrorBoundary envolve um componente, o que é conveniente para widgets que devem falhar sem derrubar a página:

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	Tipo	Descrição
`captureError`	`function`	Obrigatória. A função `captureError` de `@appsignal/browser`.
`fallback`	node ou `(error, reset) => node`	O que renderizar depois de um erro. Não renderiza nada quando omitido.
`onError`	`(error, componentStack) => void`	Chamado antes de o erro ser enviado ao AppSignal.

Coloque boundaries em torno de rotas ou widgets com um fallback útil. Um widget que falhar pode então deixar o resto da página funcionando. Um boundary na raiz captura tudo, mas substitui sua aplicação inteira pelo fallback.

Relatando a rota atual

Relate a rota atual no carregamento inicial e após cada navegação. Passe um template como /orders/:id, não a URL resolvida /orders/42. Nem os IDs de rota do React Router nem o usePathname() do Next.js App Router fornecem esse template automaticamente. O exemplo do React Router usa um data router como createBrowserRouter; renderize RouteReporter dentro dele.

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

Com o Next.js App Router, renderize RouteReporter a partir da rota correspondente. Por exemplo, passe routeTemplate="/orders/[id]" a partir de app/orders/[id]/page.jsx. usePathname() retorna a URL resolvida, como /orders/42, então não a use como template.

Importe sua configuração do AppSignal antes do seu roteador. O SDK e alguns roteadores fazem patch em history.pushState, e o SDK se compõe com um patch existente em vez de substituí-lo. Carregar o roteador primeiro pode deixar a navegação no lado do cliente sem ser relatada.

Relatando erros de handlers de eventos e effects

Um error boundary captura erros lançados durante a renderização. Ele não captura erros lançados em um handler de evento, em um setTimeout ou em uma promise rejeitada dentro de um effect. Os não capturados chegam a window e são relatados automaticamente. Para os demais, relate você mesmo:

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

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

SDKs & telemetria

SDKs de linguagem

Ferramentas de telemetria

Capturando erros de renderização

Recuperando de um erro

Envolvendo um único componente

Props

Relatando a rota atual

Relatando erros de handlers de eventos e effects

​Capturando erros de renderização

​Recuperando de um erro

​Envolvendo um único componente

​Props

​Relatando a rota atual

​Relatando erros de handlers de eventos e effects

Capturando erros de renderização

Recuperando de um erro

Envolvendo um único componente

Props

Relatando a rota atual

Relatando erros de handlers de eventos e effects