встраиваемый рекордер опыта · Experience Package

Наблюдаемая проблема →
проверяемый инженерный артефакт

BugFlow AI восстанавливает сценарий из жалобы пользователя, собирает объективные технические свидетельства и превращает наблюдение в структурированный пакет: отчёт, воспроизведённый сценарий, задачу для ИИ-агента и — для автоматизируемых случаев — регрессионный Playwright-тест red→green.

▶ Открыть живое демо Как это работает // демо-витрина с заложенными дефектами

Это не очередной session recorder. BugFlow превращает наблюдаемую проблему в артефакт, который можно проверить тестом.

Конвейер

От клика репортёра до готового пакета

Ключевое решение: всё детерминированное — фильтрация, классификация, класс верификации, уровень автономности — происходит до любого обращения к LLM. Модель пишет только артефакты для человека, а не принимает решения.

01Recorder SDK — кольцевой буфер событий, маскирование приватных данных на этапе захвата, виджет «Сообщить о проблеме»
↓
02Backend API — валидация схемы (Zod) + серверная повторная проверка приватности
↓
03Детерминированный препроцессинг — классификация, корреляция ошибок, детект auth-гейта, класс верификации, уровень автономности
↓
04Генерация ИИ — сценарий, отчёт, задача для агента и опциональный Playwright-тест
↓
05Дашборд + экспорт — Experience Package готов к передаче в разработку или ИИ-агенту
Playwright-тест — опциональный результат: он генерируется только для автоматизируемых случаев. Всё, что нельзя надёжно проверить автоматически, остаётся структурированным отчётом с техническим контекстом.

Что внутри

Технические детали

Каждый слой отвечает за одну задачу; общие схемы — единый источник истины для клиента и сервера.

◉ Recorder SDK

Браузерный захват в кольцевой буфер — постоянная память под контролем, без бесконечного роста.

  • клики, навигация, отправки форм (только безопасные метаданные полей)
  • console-ошибки и необработанные rejection'ы
  • упавшие fetch-запросы (HTTP 4xx/5xx)
  • контекст: браузер, URL, viewport, таймстемпы
  • генерация локаторов элементов для воспроизведения

⛨ Приватность в два рубежа

Маскирование чувствительных данных на этапе захвата в браузере, затем независимая серверная повторная проверка приватности перед обработкой.

⚙ Детерминированный препроцессинг

До LLM: классификация наблюдения, корреляция ошибок со сценарием, детект auth-гейта, определение класса верификации и уровня автономности.

✦ Генерация ИИ · 3 режима

Провайдер выбирается через BUGFLOW_AI_PROVIDER:

anthropic · Claude openai-совместимый mock · офлайн
  • openai — OpenAI, Azure, OpenRouter, Groq, Mistral, DeepSeek, Together или self-hosted (Ollama / vLLM / LM Studio)
  • mock — детерминированный вывод без ключа и сети, для демо / e2e / CI

▤ Experience Package

Единый экспортируемый артефакт: отчёт об опыте, воспроизведённый сценарий, технический контекст, задача для ИИ-агента и — где применимо — регрессионный тест.

⌘ IDE-расширение

Для VS Code / Cursor: наблюдение → задача агенту → тест прямо в редакторе, без переключения контекста.

Флагманское демо

Регрессия red → green — работает офлайн

Демо-приложение содержит заложенные дефекты (например, результат вычисления рендерится ниже видимой области). Сгенерированный тест сначала падает на баге, затем проходит после фикса.

● RED — баг воспроизведён
$ npx playwright test \
    calculator-below-fold.spec.ts

  ✗ результат вне viewport
  1 failed
● GREEN — после фикса
$ npx playwright test \
    calculator-below-fold.spec.ts

  ✓ результат виден на экране
  1 passed
Тот же поток red→green демонстрируют три функциональных дефекта корзины. Провайдер mock позволяет получить полный Experience Package без ключа и без сети.

Архитектура

Монорепо, TypeScript, единые схемы

npm workspaces. Общие runtime-схемы на Zod валидируют данные и на клиенте, и на сервере.

◱ apps/web

Дашборд на Next.js + backend API: проекты, наблюдения, генерация артефактов.

◲ apps/demo-app

Демо-витрина с заранее заложенными дефектами — то, что открывается по кнопке ниже.

◳ apps/ide-extension

Расширение для VS Code / Cursor.

▩ packages/recorder-sdk

Браузерный SDK: захват, буфер, приватность, виджет отчёта.

▦ packages/artifact-generator

Препроцессинг + пайплайн генерации ИИ.

▥ event-schema · shared-types

Общие Zod-схемы, валидаторы и типы TypeScript.

Next.js 14 TypeScript 5 Zod better-sqlite3 SQLite/WAL Playwright e2e Jest Node 20+ Docker

Кому

Для тех, кто ловит и чинит проблемы

QA-инженерыНаблюдение сразу приходит с воспроизведённым сценарием и регрессионным тестом.
РазработчикиТехнический контекст, локаторы, ошибки и сеть — вместо «у меня не работает».
Product-менеджерыОдна фраза + указание на место → структурированное, приоритизируемое наблюдение.
Поддержка и дизайнФиксация неудобства без технических знаний; объективные свидетельства собираются автоматически.

Посмотрите поток на живом демо

Откройте демо-витрину, сообщите о «проблеме» через встроенный виджет и посмотрите, как наблюдение превращается в Experience Package.

▶ Открыть демо Перейти в дашборд