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

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

SDKs & telemetria

SDKs de linguagem

Ferramentas de telemetria

Instalação

Com npm ou yarn

Com import maps do JSPM.io

Com `rails-importmap`

Uso

Error Boundary

Legacy Boundary

​Instalação

​Com npm ou yarn

​Com import maps do JSPM.io

​Com rails-importmap

​Uso

​Error Boundary

​Legacy Boundary

Instalação

Com npm ou yarn

Com import maps do JSPM.io

Com `rails-importmap`

Uso

Error Boundary

Legacy Boundary