> ## 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 para Browser com React

<Note>
  Browser monitoring é uma funcionalidade em beta do [AppSignal Labs](/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](https://discord.gg/EjF6ykYx63).
</Note>

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.

<h2 id="catching-render-errors">
  Capturando erros de renderização
</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>

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.

<h3 id="recovering-from-an-error">
  Recuperando de um erro
</h3>

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:

<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">
  Envolvendo um único componente
</h3>

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

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

<h2 id="reporting-the-current-route">
  Relatando a rota atual
</h2>

[Relate a rota atual](/browser/installation#report-the-current-route) 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.

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

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.

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

<h2 id="reporting-errors-from-event-handlers-and-effects">
  Relatando erros de handlers de eventos e effects
</h2>

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:

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