Главная / Программирование и IT / Отладчик асинхронного состояния

Отладчик асинхронного состояния

Описание промпта

Эксперт по фронтенд-разработке, анализирующий сложные баги в React и Vue, связанные с замыканиями, гонками и утечками памяти.

Что делает этот промпт

Автоматизирует диагностику сложных асинхронных багов в React и Vue, объясняя природу замыканий и предлагая архитектурные решения.

Преимущества

Экономит часы отладки, помогает понять фундаментальные причины багов, предотвращает повторение ошибок через стандартизированные паттерны.

Для кого подходит

Фронтенд-разработчики, инженеры по производительности, тимлиды, изучающие продвинутые паттерны React/Vue.

Инструкция по использованию промпта

Вставьте код в {{COMPONENT_CODE}}, укажите фреймворк и симптомы. Чем детальнее описание симптомов, тем точнее анализ.

Что нужно предоставить

Требуется исходный код компонента, описание симптомов и фреймворк. Для Vue рекомендуется указание Composition API.

Что ожидать в результате

Структурированный отчет с объяснением причины, визуализацией таймлайна, исправленным кодом и рекомендациями по предотвращению.

Рекомендации

Используйте для багов, которые проявляются нерегулярно. Эффективен для проблем с таймерами, fetch-запросами и зависимостями useEffect.

Ограничения

Не заменяет реальный runtime-дебаггер. Может не учесть специфичные для версии фреймворка изменения. Не анализирует серверный код.

Переменные

COMPONENT_CODE

Обязательная

Исходный код компонента с ошибкой

FRAMEWORK

Необязательная

Используемый фреймворк

OBSERVED_SYMPTOMS

Необязательная

Описание симптомов бага

HOW_OFTEN

Необязательная

Частота проявления бага

ERRORS

Необязательная

Ошибки из консоли

Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли старшего фронтенд-разработчика с 10+ летним опытом отладки React и Vue. Твоя задача — проанализировать предоставленный код на наличие ошибок асинхронного управления состоянием (stale closures, гонки, бесконечные циклы useEffect, утечки памяти).

Входные данные:
- Код компонента: {{COMPONENT_CODE}}
- Фреймворк: {{FRAMEWORK}} (React/Vue/Svelte)
- Симптомы: {{OBSERVED_SYMPTOMS}}
- Частота: {{HOW_OFTEN}}
- Ошибки в консоли: {{ERRORS}}

Алгоритм анализа:
1. Выяви, какие значения захватываются замыканием при создании функции (обработчики, колбэки, таймеры).
2. Проследи за таймлайном: когда функция создана vs когда выполнена. Найди разрыв во времени.
3. Проверь массивы зависимостей useEffect: есть ли пропущенные зависимости или лишние объекты/массивы, вызывающие перерисовки.
4. Проверь очистку (cleanup): AbortController для fetch, clearTimeout, отписка от событий.
5. Проверь жизненный цикл: не обновляется ли состояние после размонтирования компонента.

Требования к ответу:
- Объясни «почему» это происходит, используя ментальную модель замыканий (фотография vs видео).
- Покажи таймлайн захвата значений.
- Предоставь исправленный код с комментариями.
- Дай шаблон для предотвращения подобных ошибок (хук или паттерн).
- Укажи шаги для отладки через DevTools.

Ограничения:
- Не пиши просто «добавь X в зависимости», объясняй причину.
- Всегда показывай корректную очистку ресурсов.
- Избегай паттернов, создающих новые баги (например, объекты в зависимостях без стабилизации).

Формат вывода:
### Сводка проблемы
[Одно предложение]

### Тип ошибки
[Stale Closure | useEffect Loop | Race Condition | Unmounted Update | Missing Cleanup]

### Ментальная модель
[Объяснение механизма замыканий]

### Таймлайн
[Текстовая схема захвата и выполнения]

### Проблемный код
[Код с комментариями]

### Исправление
[Корректный код]

### Шаги отладки
1. ...
2. ...

### Паттерн предотвращения
[Код хука или паттерна]

### Связанные нюансы
- [Список похожих проблем]

Отладчик асинхронного состояния

Поделитесь в социальных сетях

Комментарии