Как мы искали тормоза в киосках — и пришли к FPS

• Did Launch App — холодный старт приложения. «Впервые» его запускают в двух случаях — в начале дня и после того, как оно крашнулось;
  
• App was terminated — перезапуск WebView. Он может произойти из-за ошибки, нехватки памяти или по другой причине.

// В нативном Swift-коде — обработка сообщения от фронтенда
case .reportMemoryFootprint:
    return (Memory().formattedMemoryFootprint(), nil)

const TRACK_MEMORY_MS = 1000; // 1 sec
const takeMetricsAndSaveInStorage = async (): Promise<void> => {
    const memory = await window.webkit?.messageHandlers
        .reportMemoryFootprint?.postMessage({});
    LocalStorage.set(MEMORY_USAGE_KEY, memory || ``);
};

const LOG_MEMORY_INTERVAL_MS = 1 * 60 * 1000; // 1 min
export const MEMORY_USAGE_KEY = `ios_memory_usage`;
export const collectIosMemory = (logger: ILoggerInstanceRef): void => {
    const deviceOs = detectDeviceOsByUserAgent();
    if (deviceOs !== `iOS`) {
        return;
    }
    setInterval(() => {
        const memoryUsage = LocalStorage.get(MEMORY_USAGE_KEY);
        if (!memoryUsage) {
            return;
        }
        logger.current.info(`iOS Memory footprint`, {
            memoryUsage,
            metricLabel: `iosMemory`,
        });
    }, LOG_MEMORY_INTERVAL_MS);
};

export const PlatformMetricsProvider: FC<PropsWithChildren> = ({ children }) => {
    useAndroidMetricsLog();
    useCacheMetricsLog();
    useResizeLog();
    useSendHeartbeat();
    useCollectRendererProcessMetrics();
    useIOSMemoryLog(); // <-- вот тут
    // ...
};

• Не было никакой связи с предыдущей метрикой App was terminated.
  
• Также не было связи и с ивентами. То есть на одном киоске один и тот же ивент на одном и том же планшете показывал разные цифры.

app.getAppMetrics().forEach(({ cpu, memory, type }) => {
    logger.current.info(`App metrics hardware snapshot`, {
        cpu,
        memory,
        type,
    });
});

• type — тип процесса: Browser, Tab, GPU, Utility и т.д. По сути, виден тип каждого процесса, как в диспетчере задач Chrome.
  
• cpu — объект CPUUsager с полем percentCPUUsage и idleWakeupsPerSecond. Тут видим процент использования CPU с момента последнего вызова. Первый вызов всегда возвращает 0;
  
• memory — объект MemoryInfo с workingSetSize и peakWorkingSetSize. Первый — аналог RSS, который показывает объём физической RAM в килобайтах, а второй — отражает максимально потребляемый объём памяти за всё время жизни процесса.

• process.getSystemMemoryInfo() — общая и свободная системная память (total/free);
  
• process.memoryUsage() — память main-процесса: rss, heapTotal, heapUsed, external (C++ объекты, привязанные к JS);
  
• process.getCPUUsage() — CPU текущего процесса;
  
• process.getHeapStatistics() — подробная статистика V8-кучи из renderer-процесса (через preload bridge): totalHeapSize, usedHeapSize, heapSizeLimit, mallocedMemory, peakMallocedMemory и др;
  
• systeminformation (si.graphics()) — информация о GPU (видеокарты, дисплеи).

export const startLoggingMemory = (): void => {
    setInterval(() => {
        const systemMemoryInfo = process.getSystemMemoryInfo();
        const totalSystemMemoryGb = systemMemoryInfo.total / 1024;
        const freeSystemMemoryGb = systemMemoryInfo.free / 1024;
        const usedSystemMemoryGb = totalSystemMemoryGb - freeSystemMemoryGb;
        const processMemoryUsage = process.memoryUsage();
        const processResidentSetSizeMb = (processMemoryUsage.rss / 1024 / 1024).toFixed(2);
        const processHeapTotalMb = (processMemoryUsage.heapTotal / 1024 / 1024).toFixed(2);
        const processHeapUsedMb = (processMemoryUsage.heapUsed / 1024 / 1024).toFixed(2);
        const processExternalMemoryUsedMb = (processMemoryUsage.external / 1024 / 1024).toFixed(2);
        const cpuUsage = process.getCPUUsage();
        const percentCpuUsage = cpuUsage.percentCPUUsage;
        logger.current.info(`Memory hardware snapshot`, {
            totalSystemMemoryGb,
            freeSystemMemoryGb,
            usedSystemMemoryGb,
            processResidentSetSizeMb,
            processHeapTotalMb,
            processHeapUsedMb,
            processExternalMemoryUsedMb,
            percentCpuUsage,
            metricLabel: `kiosk-desktop-memory`,
        });
    }, publishIntervalMs);
};

startLoggingMemory();
void getCpuManufacturer();
void collectGraphics();
logSystemUptimeEveryHour();

export const getCpuManufacturer = async (): Promise<void> => {
    try {
        const cpu = await si.cpu();
        logger.current.info(`CPU Manufacture log`, { ...cpu, metricLabel: `kiosk-desktop-cpu` });
    } catch (error) {
        /* empty */
    }
};

export const exposeHardwareBridge = async (): Promise<void> => {
    try {
        const cpu = await si.cpu();
        contextBridge.exposeInMainWorld(cpuManufactureKey, {
            cpuBrand: cpu.brand,
        });
    } catch (error) {
        /* empty */
    }
};

• LCP (Largest Contentful Paint) — когда на экране появляется основной визуальный контент.
  
• FID / INP (First Input Delay / Interaction to Next Paint) — насколько быстро интерфейс реагирует на первое действие пользователя. Мы использовали современный INP, который фиксирует задержки взаимодействий и отправляет их в лог через onINP.
  
• CLS (Cumulative Layout Shift) — насколько стабильно элементы остаются на своих местах и не «скачут» при загрузке.
  
• TTFB (Time to First Byte) — время до первого байта, которое показывает, как быстро сервер отвечает на запрос, собирается через onTTFB.

export const startCollectWebVitals = (): void => {
    onINP(data => sample(() => logger.current.info(`onINP`, { ...data, metricLabel: `web-vitals` }), 1), {
        reportAllChanges: true,
    });
    onTTFB(data => sample(() => logger.current.info(`onTTFB`, { ...data, metricLabel: `web-vitals` }), 1), {
        reportAllChanges: true,
    });
    onLCP(data => sample(() => logger.current.info(`onLCP`, { ...data, metricLabel: `web-vitals` }), 1), {
        reportAllChanges: true,
    });
    onCLS(data => sample(() => logger.current.info(`onCLS`, { ...data, metricLabel: `web-vitals` }), 1), {
        reportAllChanges: true,
    });
};

export const useFps = (windowWidth: number): Returns => {
  const frames = useRef(0);
  const prevTime = useRef(performance.now());
  const animRef = useRef(0);
  const calcFps = useCallback(() => {
    const t = performance.now();
    frames.current += 1;
    if (t > prevTime.current + 1000) {
      const elapsedTime = t - prevTime.current;
      const currentFps = Math.round((frames.current * 1000) / elapsedTime);
      // ...
    }
    animRef.current = requestAnimationFrame(calcFps);
  }, [windowWidth]);
  // ...
};
export const useLogFps = (): void => {
    const { fps, reset } = useFps(1000);
    const lastUpdateMs = useRef<number>(Date.now());
    const { logInfo } = useLogger(__filename);
    useEffect(() => {
        if (Date.now() - lastUpdateMs.current > 1000 * 60) {
            const payload = calculatePerformanceMetrics(fps);
            logInfo(`FPS log`, {
                ...payload,
            });
            reset();
            lastUpdateMs.current = Date.now();
        }
    }, [fps, logInfo, reset]);
};
export const FPSTracker: FC = () => {
    useLogFps();
    return null;
};

// фрагмент, отвечающий за заполнение нулями пропущенных секунд
if (elapsedTime > 1500) {
  for (let i = 1; i <= (elapsedTime - 1000) / 1000; i++) {
    lastFpsValues.current = lastFpsValues.current.concat(0);
  }
}

• мы видим, как часто браузер пытается отрисовать кадр;
  
• но не знаем, были ли кадры реально скомпозированы GPU и показаны на дисплее;
  
• не детектим напрямую dropped frames, GPU stalls и compositing-проблемы.

• requestAnimationFrame вместо setInterval — коллбэк вызывается, только когда браузер готов отрисовать следующий кадр. Он не создаёт дополнительной нагрузки поверх обычного render loop, а «паразитирует» на уже существующем цикле отрисовки.
  
• Минимальная работа на каждый кадр — пока секунда не прошла, выполняются только performance.now(), инкремент счётчика и одно сравнение. Это наносекунды.
  
• Обновление стейта происходит раз в ~1 секунду, а не на каждый кадр. При этом компонент FPSTracker рендерит null — у него нет DOM-дерева, а значит React при ре-рендере просто сравнивает null с null. Reconciliation пустого компонента раз в секунду — это пренебрежимо мало работы. Для сравнения: любая CSS-анимация на странице заставляет браузер делать layout/paint 60 раз в секунду — это на два порядка дороже.
  
• Нет тяжёлых вычислений — одно деление, один Math.round, один .slice().
  
• Массив ограничен скользящим окном — старые значения отбрасываются через .slice(), поэтому память не растёт со временем.

• добавил метрику аптайма, узнал что киоски работают без перезагрузки по полгода;
  
• посмотрел корреляцию с FPS и увидел её(!);
  
• добавил автоматическую перезагрузку системы раз в 24 часа. Это снизило процент тормозящих киосков с 10% до 0.1%. Да, релоад не решает проблему, которая приводит к тому, что киоск тормозит, а лишь лечит симптом, но от этого точно стало лучше.

• работает одинаково на всех платформах;
  
• не зависит от пользовательских действий;
  
• сразу показывает проблему без интерпретаций.

• начали видеть деградации сразу после релиза;
  
• смогли ввести алёрты;
  
• получили численную оценку масштаба проблемы (например, % киосков с низким FPS).