Перейти к содержимому
Star

Effects ​

Вкладка Effects — список всех вызовов эффектов в духе вкладки Network и место, где можно управлять тем, что эффекты делают.

Вкладка Effects: четыре вызова suggestFx, signupFx и greetLaterFx со статусом, временем и водопадомВкладка Effects: четыре вызова suggestFx, signupFx и greetLaterFx со статусом, временем и водопадом

Водопад ​

По строке на вызов: номер вызова, эффект, его params, статус (pending, done, fail), длительность и полоска на общей оси времени. Полоски незавершённых вызовов растут в реальном времени.

Вызов, который завершился позже следующего вызова того же эффекта, подсвечен — «завершился позже следующего вызова». Это классическая гонка: медленный ответ на старый запрос перезаписывает результат нового. В демо быстро печатайте в поле email и смотрите на suggestFx.

При наведении видно, кто вызвал эффект («вызван из #3») и что он вернул; клик открывает транзакцию в логе (ту, где вызов завершился, если он завершился).

Подмена эффектов ​

Раскрытая «Подмена эффектов»: для signupFx задана задержка 2000 мс, она видна в «Активных подменах»

Раскройте Подмена эффектов, чтобы изменить поведение эффекта, не трогая код:

РежимЧто происходит
держать в pendingвызовы никогда не завершаются — проверьте спиннеры и заблокированные кнопки
вернуть значениевызовы завершаются введённым JSON-значением
вернуть ошибкувызовы завершаются ошибкой с этим значением (для сообщения об ошибке подойдёт обычный текст)
добавить задержкувызовы ждут заданное число мс, потом выполняют настоящий хендлер
свой хендлерваша функция: async (params) => …, где original(params) вызывает настоящий хендлер

Выберите эффект и режим, заполните значение и нажмите Подменить. Активные подмены перечислены с кнопкой Снять у каждой и Снять все; у подменённых эффектов в водопаде бейдж подменён, а в заголовке раздела — число активных подмен.

Как это работает: подмена заменяет хендлер эффекта по умолчанию (его используют все scope и глобальный граф), а для эффектов с sid — ещё и хендлер в каждом известном scope, иначе хендлер из fork({ handlers }) взял бы верх. Подмена «действует во всех scope страницы». Вызовы, удержанные в держать в pending, продолжатся настоящим хендлером, когда подмену снимут.

Свой хендлер и CSP

Код своего хендлера компилируется в странице через new Function. Страница, у которой Content Security Policy запрещает unsafe-eval, его не выполнит; остальные режимы работают везде.

Сами подмены в трейс не записываются: трейс хранит результаты эффектов, и при воспроизведении используются именно они.