Depuração e inspeção
Depuração com agents
Para muitas tarefas de depuração, o caminho mais rápido é usar um agent que já conheça o fluxo de depuração do
@data-client/react.
Instale a skill data-client-react
no seu agent de código e então peça a ele que inspecione a página atual ou o estado do app.
Como funciona a depuração com agents
No modo de desenvolvimento, o DevToolsManager expõe instâncias ativas de Controller para que um agent possa inspecionar
o estado do cache, os metadados dos endpoints e as actions despachadas diretamente do app em execução.
Tecnicamente, esses controllers ficam armazenados em globalThis.__DC_CONTROLLERS__, que é um
Map global do navegador. Você pode pensar nele como um registro temporário do modo de desenvolvimento que permite que ferramentas
e agents localizem os stores ativos do DataProvider da página atual.
Em alto nível, o agent pode:
- descobrir os controllers ativos do
DataProvider - ler o estado do cache normalizado ou desnormalizado
- inspecionar fetches, respostas, erros e invalidações recentes
- correlacionar mudanças no store com a atividade de rede do navegador
- acionar operações seguras do controller, como invalidação ou expiração, para investigação
Isso é útil quando você quer uma resposta rápida para perguntas como "por que isso não fez refetch?", "o que há no cache agora?" ou "qual action atualizou esta entity?" sem precisar navegar manualmente por cada painel do inspetor.
A skill faz isso por meio do Chrome DevTools MCP.
Depuração manual
Se você prefere inspecionar tudo por conta própria, o fluxo de devtools do navegador abaixo continua sendo o caminho manual padrão.
Instalação
Adicione a extensão do navegador para Chrome ou Firefox
Abrir as devtools
Depois de instalar e carregar seu site no modo de desenvolvimento, você pode clicar no logo do Data Client (por padrão no canto inferior direito da janela) ou no logo do redux-devtool na barra de endereço.
Isso abrirá o inspetor, que permite observar as actions despachadas, seu efeito no estado do store, bem como o estado atual do store.
O logo do Data Client só aparece no modo de desenvolvimento. No entanto, sua posição pode ser alterada ou ele pode ser totalmente desativado definindo a prop devButton do DataProvider.
O Controller despacha actions, o que torna essa página útil para entender quais actions você está vendo. Aqui observamos as actions comuns de fetch e setResponse.
Por padrão, a integração com as devtools filtra actions de fetch duplicadas. Isso pode ser alterado com a opção skipLogging.
Fluxo de controle
O Data Client usa o padrão de flux store, tornando a depuração simples, já que cada mudança é rastreável e descritiva.
Inspeção de estado
Quando schemas são usados, as respostas são normalizadas nas tabelas entities
e endpoints. Isso traz vantagens automáticas de desempenho em relação a caches de fetch simples de chave-valor, especialmente
benéficas com dados dinâmicos (que mudam). Isso também elimina bugs de inconsistência de dados.
Clique na aba 'state' nas devtools para ver todo o estado do store. Isso pode ser útil para determinar exatamente onde os dados estão. Há também uma seção 'meta' do cache com informações como quando a requisição ocorreu (útil para TTL).
Diff de estado
Para monitorar a resposta de um fetch específico, pode ser mais útil ver como o store é atualizado. Clique na aba 'Diff' para ver o que mudou.
Aqui alternamos o status 'completed' de um todo usando uma atualização otimista.
Rastreamento de actions
O rastreamento não vem habilitado por padrão, pois é computacionalmente muito custoso. No entanto, pode ser muito útil
para descobrir de onde as actions são despachadas. Personalize o DevToolsManager
definindo a opção trace como true com getDefaultManagers:
import { DataProvider, getDefaultManagers } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';
const managers = getDefaultManagers({
devToolsManager: { trace: true },
});
createRoot(document.body).render(
<DataProvider managers={managers}>
<App />
</DataProvider>,
);