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

## Instalação

### Com npm ou yarn

Adicione os pacotes `@appsignal/react` e `@appsignal/javascript` ao seu `package.json`. Em seguida, execute `npm install`/`yarn install`.

Você também pode adicionar esses pacotes ao seu `package.json` pela linha de comando:

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

<Tip>
  Você também pode usar a integração com React no React Native e no Expo.
</Tip>

### Com import maps do JSPM.io

Usando o [gerador de import maps do JSPM.io](https://generator.jspm.io/), você pode gerar um import map para as dependências da sua aplicação.

Adicione `@appsignal/javascript` e `@appsignal/react` à lista de dependências no gerador, depois adicione o import map gerado e o ES module shims ao código da sua aplicação.

### Com `rails-importmap`

Use o comando a seguir para adicionar esses pacotes aos import maps da sua aplicação Rails:

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

## Uso

Você deve passar a instância do cliente AppSignal como a prop `instance`. Além disso, as seguintes props podem opcionalmente ser passadas para os componentes `ErrorBoundary` e `LegacyBoundary`:

| Nome da prop | Descrição                                                                                                                                                                                                                                                            |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `action`     | O nome da action para a qual mostrar erros relatados por este boundary. Recomendamos usar o nome do componente.                                                                                                                                                      |
| `tags`       | Um objeto contendo as tags a serem definidas para erros relatados por este boundary.                                                                                                                                                                                 |
| `fallback`   | Uma função que opcionalmente recebe o erro como argumento e retorna um componente de fallback para usar quando a renderização falhar.                                                                                                                                |
| `override`   | Uma função que recebe o span do erro e, opcionalmente, o próprio erro como argumentos, e retorna um span modificado. Chamada apenas quando um erro é relatado. Use-a para [definir tags, params ou breadcrumbs](/front-end/span#updating-a-span) na amostra do erro. |

Ao usar `tags`, `fallback` ou `override`, use `useMemo` (ou `useCallback` para `fallback` e `override`) para memoizar os valores. Isso evitará re-renderizações desnecessárias.

### Error Boundary

Se você estiver usando React v16 ou superior, pode usar o componente `ErrorBoundary` para capturar erros de qualquer lugar na árvore de componentes filhos.

<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>
  A API que este componente usa está instável neste momento no desenvolvimento do
  React. Oferecemos este componente como uma forma de dar suporte a quem está
  rodando React v15, mas não garantimos sua confiabilidade. Recomendamos que você
  use o `ErrorBoundary` sempre que possível.
</Warning>

O `LegacyBoundary` funciona de forma quase idêntica ao `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>