Buglapse

Трейсинг показывает, на что уходит время: как долго грузится страница, какие запросы и ресурсы её тормозят, сколько занимает ответ бэкенда. Каждая загрузка страницы или переход в SPA — это трейс, а каждый шаг внутри (запрос, загрузка скрипта, ваш код) — спан.

Включить в браузере ​

Script-тег. В Настройки → Скрипт загрузчика включите Трассировку в браузере.

npm:

ts
import { init } from '@buglapse/browser'
import { browserTracingIntegration } from '@buglapse/browser/integrations'

init({
    dsn: '{dsn}',
    integrations: [browserTracingIntegration()],
})

Для Vue с роутером трейсинг включается сам при передаче router в init() — см. Vue Router.

Что попадает в трейс автоматически:

  • загрузка страницы (pageload) с фазами — DNS, соединение, ответ, DOM — и web vitals: TTFB, FCP, LCP, CLS;
  • каждый переход в SPA (navigation);
  • запросы fetch и XHR;
  • скрипты, стили, картинки и шрифты, которые грузились дольше 10 мс.

Включить в Node.js ​

ts
import { init } from '@buglapse/node'
import { httpServerIntegration, httpTracingIntegration } from '@buglapse/node/integrations'

init({
    dsn: process.env.BUGLAPSE_DSN,
    integrations: [
        httpServerIntegration(),   // трейс на каждый входящий запрос
        httpTracingIntegration(),  // исходящие запросы — дочерними спанами
    ],
})

Если фронтенд и бэкенд подключены к Buglapse, запрос со страницы и его обработка на сервере показываются одним трейсом. Для запросов на другой домен добавьте его в tracePropagationTargets и разрешите заголовки traceparent и tracestate в CORS — см. Распределённый трейсинг.

Замерить свой код ​

Оберните код в span() или asyncSpan() — он появится в трейсе отдельным шагом:

ts
await Buglapse.asyncSpan('checkout', async (span) => {
    await chargeCard(order)
    span.metric('order.total', order.total)
})

К спану можно прикрепить числовые метрики (span.metric()), они бесплатны. Подробнее: Трейсинг в браузере, в Node.

Где смотреть ​

Раздел Трейсы проекта показывает по строке на каждую загрузку, переход или запрос. В трейсе виден водопад спанов с длительностями и метриками. Ошибки и логи, произошедшие во время трейса, связаны с ним — из исключения можно перейти в его трейс.

Квота и сэмплирование ​

Каждый спан — одно событие в месячной квоте спанов. Чтобы не тратить её на каждую загрузку:

  • в Настройки → Фильтры → Сэмплирование задайте Долю трейсов, например 10 %. Решение принимается на трейс целиком, изменения применяются сразу без деплоя;
  • в SDK можно также задать tracesSampleRate — так меньше трафика, но менять придётся в коде.

Ошибки и логи из несохранённых трейсов всё равно приходят.