Перейти к содержимому

Передайте экземпляр vue-router в init() — и каждое событие будет знать, где был пользователь, а каждый переход станет трейсом.

Контекст маршрута ​

Когда роутер готов, и после каждого перехода, каждое событие (ошибки, логи, спаны) несёт:

тег routeНазвание маршрута
route.namename маршрута, если он есть
route.pathПолный путь. Значения query заменяются на [Filtered], если не включён sendDefaultPii
route.params.*Его параметры

Пока переход разрешается — от первого guard'а роутера до того, как он состоялся или провалился, — контекст navigation так же содержит цель (navigation.name, navigation.path, navigation.params.*). Ошибка, брошенная guard'ом или лениво загружаемым маршрутом, говорит и где был пользователь (route.*), и куда шёл (navigation.*).

Тег route, заданный вами (setTag('route', …), область), сохраняется.

С router вызов init() добавляет browserTracingIntegration, передав переходы роутеру:

  • Загрузка страницы. Когда роутер готов, спан pageload переименовывается из сырого пути в название маршрута.
  • Переход. Спан navigation начинается в первом beforeEach роутера, до выполнения guard'ов и до загрузки чанка маршрута, в новом трейсе. Изменение query — переход; изменение одного только hash — нет.
  • Guard'ы. Дочерний спан router.guards (op: navigation.guards) покрывает время от первого guard'а до подтверждения перехода.
  • Редиректы. Когда guard перенаправляет, тот же спан продолжается под названием нового маршрута, а navigation.redirect содержит путь, на который перенаправили.
  • Отменённые переходы. Переход, который guard отклонил или в котором guard или чанк бросили исключение, заканчивает спан со статусом cancelled (idle.finish_reason: cancelled).

После того как переход состоялся, спан заканчивается как любой корневой: когда страница затихнет. Запросы, ваши спаны и ресурсы, которые загружает новая страница, — его дочерние.

Опции интеграции передаются в tracing:

ts
init({
    app,
    router,
    dsn: '{dsn}',
    tracesSampleRate: 0.2,
    tracing: {
        idleTimeout: 2000,
        instrumentResume: true,
        onSpanEnd: (span, { reason }) => { /* … */ },
    },
})

tracing: false выключает трейсинг; ошибки и контекст маршрута остаются.

Названия маршрутов ​

Маршрут называется так, по порядку: его name, path совпавшей записи (/users/:id), его путь. Это название — тег route и имя спана pageload / navigation, так что профили всех пользователей группируются под одним названием.

Передайте routeLabel, чтобы выбирать самим:

ts
init({
    app,
    router,
    dsn: '{dsn}',
    routeLabel: (route) => route.matched.at(-1)?.path ?? route.path,
})