Передайте экземпляр vue-router в init() — и каждое событие будет знать, где был пользователь, а каждый переход станет трейсом.
Контекст маршрута
Когда роутер готов, и после каждого перехода, каждое событие (ошибки, логи, спаны) несёт:
тег route | Название маршрута |
route.name | name маршрута, если он есть |
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,
})