DevTools и request timeline

@dubium/query-layer/devtools подключает пассивную диагностику к QueryRuntime. Bridge не меняет порядок запросов, retry, кэш или отмену.

Подключение

import {
    QUERY_LAYER_DEBUG_EVENT,
    createQueryLayerDebugBridge,
} from "@dubium/query-layer/devtools"

const debugBridge = createQueryLayerDebugBridge(runtime, {
    historyLimit: 500,
    emitBrowserEvents: true,
})

const unsubscribe = debugBridge.subscribe((event) => {
    console.debug(event.type, event.request ?? event.query ?? event.mutation)
})

window.addEventListener(QUERY_LAYER_DEBUG_EVENT, (event) => {
    console.debug((event as CustomEvent).detail)
})

// При завершении приложения:
unsubscribe()
debugBridge.dispose()

DevTools подключается явно через отдельный entry point и не увеличивает core bundle приложения, если модуль не импортирован.

Request timeline

Bridge получает два уровня событий:

scope	Что показывает
operation	Полное выполнение RequestExecutor, включая pause, retry и отмену
attempt	Каждую реальную HTTP-попытку и прохождение concurrency-очереди

Основная последовательность:

queued → started → success
queued → started → error → retrying → queued → started → success
queued → cancelled
started → cancelled

event.request содержит:

• operationId, executionId, correlationId и attemptId;
• номер попытки и количество предыдущих ошибок;
• тип операции: direct, query, infinite, mutation или system;
• queryHash, mutationId, mutationKey и направление pagination;
• request group и фактическую concurrency group;
• время ожидания слота, длительность выполнения и retry delay;
• причину и фазу отмены;
• количество активных и ожидающих HTTP-попыток.

URL, headers, body, токены и полный AxiosResponse в timeline не добавляются.

Query и Mutation events

Query cache публикует:

• cache:added;
• cache:updated;
• cache:removed;
• cache:cleared.

Mutation cache публикует отдельный lifecycle:

• mutation:added;
• mutation:updated;
• mutation:removed;
• mutation:cleared.

Mutation получает стабильный mutationId, совпадающий с идентификатором в соответствующих request-attempt событиях.

Безопасность данных

Query data, mutation variables, callback context, metadata и operation context скрыты по умолчанию. Включайте их только локально и обязательно очищайте:

const debugBridge = createQueryLayerDebugBridge(runtime, {
    includeData: (query) => query.queryKey[0] === "public-catalog",
    includeMeta: true,
    includeOperationContext: true,
    sanitizeData: () => ({ redacted: true }),
    sanitizeMeta: (meta) => ({ feature: meta.feature }),
    sanitizeOperationContext: (context) => ({
        correlationId: context.correlationId,
        participantId: context.participantId,
    }),
})

correlationId остаётся в request snapshot даже без раскрытия полного operation context: он нужен для связи событий одной операции.

Память и lifecycle

• История ограничена historyLimit, по умолчанию сохраняется 100 событий.
• historyLimit: 0 полностью отключает накопление истории.
• getSnapshot() возвращает текущее состояние без изменения runtime.
• clearHistory() освобождает сохранённые события.
• dispose() удаляет query, mutation, request и concurrency listeners.
• Ошибка внешнего listener или EventTarget не ломает HTTP-запрос.

Bridge помогает разбирать client data layer, но не заменяет браузерные Network, Performance и Memory инструменты или backend tracing.