deffector

Русский

English

Русский

English

Тема

Star

Быстрый старт ​

Три шага для React-приложения с fork(). В других фреймворках отличается только адаптер — см. Фреймворки.

1. Импортируйте агента первым ​

ts
// src/main.tsx — самый первый импорт
import '@deffector/agent';

Агент должен видеть юниты в момент создания. Юниты, созданные до импорта, всё равно найдутся, когда выполнятся, но без информации о фабрике и регионе.

2. Используйте DeffectorProvider ​

Замените Provider из effector-react на DeffectorProvider:

tsx
import '@deffector/agent';
import { createRoot } from 'react-dom/client';
import { fork } from 'effector';
import { DeffectorProvider } from '@deffector/agent/react';
import { App } from './App';

const scope = fork();

createRoot(document.getElementById('root')!).render(
  <DeffectorProvider value={scope} name="client">
    <App />
  </DeffectorProvider>,
);

name — то, что панель покажет в списке scope. Провайдер позволяет deffector отрисовать приложение с другим scope: благодаря этому перемещение во времени безопасно (настоящее не трогается), а воспроизведение трейса вообще возможно.

3. Откройте DevTools → deffector ​

Поработайте с приложением: каждое действие появится в логе одной строкой. Затем попробуйте:

  • двойной клик по строке — приложение покажет этот момент; Esc возвращает в настоящее;
  • Ctrl+[ / Ctrl+] — шаг назад и вперёд;
  • Stores — выберите стор, введите значение в JSON, нажмите Применить;
  • Health — что deffector счёл подозрительным, и у каждого пункта есть исправление;
  • Ctrl+S — экспорт трейса, чтобы отправить его коллеге.

Если панель пишет «Ждём агента deffector», на странице нет агента: проверьте, что импорт действительно первый, и перезагрузите страницу. См. FAQ.

DevTools открыты позже ​

Пока DevTools закрыты, агент пишет первые 10 секунд после загрузки, а потом встаёт на паузу (на паузе он почти ничего не стоит). Когда вы открываете панель, запись продолжается с текущего состояния, а Health сообщает, что предыдущая история не записана. Чтобы записать всё с самого начала, откройте DevTools и перезагрузите страницу — или включите запись всегда:

ts
import { attachDeffector } from '@deffector/agent';

attachDeffector({ whileClosed: 'record' });

Все опции — в разделе Настройки.

Без fork() ​

Если приложение работает с глобальным графом (без fork() и без Provider), достаточно одного импорта. Перемещение во времени тогда записывает значения на месте, и watchers на это реагируют — см. глобальный режим.

Демо ​

В репозитории одна и та же модель во всех фреймворках, с кнопками, которые воспроизводят типичные ошибки:

sh
npm install && npm run build
npm run dev:react   # http://localhost:5171

Все демо перечислены в разделе Демо.