Pular para o conteúdo principal

​
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: 
yarn add @appsignal/javascript @appsignal/react
npm install @appsignal/javascript @appsignal/react
Você também pode usar a integração com React no React Native e no Expo.

​
Com import maps do JSPM.io

Usando o gerador de import maps do 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: 
./bin/importmap pin @appsignal/javascript @appsignal/react

​
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 propDescrição
actionO nome da action para a qual mostrar erros relatados por este boundary. Recomendamos usar o nome do componente.
tagsUm objeto contendo as tags a serem definidas para erros relatados por este boundary.
fallbackUma função que opcionalmente recebe o erro como argumento e retorna um componente de fallback para usar quando a renderização falhar.
overrideUma 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 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. 
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"));

​
Legacy Boundary

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.
O LegacyBoundary funciona de forma quase idêntica ao ErrorBoundary: 
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"));