Pular para o conteúdo principal
urql é um cliente GraphQL para aplicações JavaScript. O pacote @appsignal/urql fornece um exchange personalizado que, uma vez adicionado ao seu cliente urql, intercepta automaticamente todos os erros do GraphQL e os relata ao AppSignal.

Instalação

npm ou yarn

Adicione os pacotes @appsignal/urql 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/urql
npm install @appsignal/javascript @appsignal/urql

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/urql à lista de dependências no gerador, depois adicione o import map gerado e o ES module shims ao código da sua aplicação.

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

Uso

Adicionando o exchange ao cliente

O pacote @appsignal/urql fornece um exchange urql personalizado que relata automaticamente os erros do GraphQL ao AppSignal. Esse exchange intercepta todos os resultados de query e mutation e relata quaisquer erros sem exigir alterações em chamadas individuais de useQuery.
import { createClient, fetchExchange } from "urql";
import Appsignal from "@appsignal/javascript";
import { createAppsignalExchange } from "@appsignal/urql";

const appsignal = new Appsignal({
  key: "YOUR FRONTEND API KEY",
});

const client = createClient({
  url: "https://api.example.com/graphql",
  exchanges: [createAppsignalExchange(appsignal), fetchExchange],
});
O exchange irá automaticamente:
  • Relatar todos os erros do GraphQL ao AppSignal
  • Incluir o corpo da query GraphQL como parâmetro (visível nos detalhes do erro do AppSignal)
  • Incluir a URL do endpoint como tag
  • Incluir o nome e o tipo da operação como tags (quando disponíveis)

Detalhes do erro

Quando um erro do GraphQL ocorre, o AppSignal receberá:
  • Mensagem de erro: Uma concatenação de todas as mensagens de erro do GraphQL
  • Tags:
    • endpoint: A URL do endpoint do GraphQL
    • operationName: O nome da operação GraphQL (se especificado)
    • operationType: O tipo de operação (query, mutation, subscription)
  • Parâmetros:
    • query: O corpo completo da query GraphQL
Isso fornece contexto completo para depurar erros do GraphQL na sua aplicação.