Function instrumentVueRouter

packages/vue/src/router.ts:41–141

(
  router: VueRouter,
  options: {
    /**
     * What to use for route labels.
     * By default, we use route.name (if set) and else the path.
     *
     * Default: 'name'
     */
    routeLabel: 'name' | 'path';
    instrumentPageLoad: boolean;
    instrumentNavigation: boolean;
  },
  startNavigationSpanFn: (context: StartSpanOptions) => void,
)

 * Instrument the Vue router to create navigation spans.
 */
export function instrumentVueRouter(
  router: VueRouter,
  options: {
    /**
     * What to use for route labels.
     * By default, we use route.name (if set) and else the path.
     *
     * Default: 'name'
     */
    routeLabel: 'name' | 'path';
    instrumentPageLoad: boolean;
    instrumentNavigation: boolean;
  },
  startNavigationSpanFn: (context: StartSpanOptions) => void,
): void {
  let hasHandledFirstPageLoad = false;

  // Detect Vue Router 3 by checking for the `mode` property which only exists in VR3.
  // Vue Router 4+ uses `options.history` instead and does not expose `mode`.
  const isLegacyRouter = 'mode' in router;

  router.onError(error => captureException(error, { mechanism: { handled: false } }));

  // Use rest params to capture `next` without declaring it as a named parameter.
  // This keeps Function.length === 2, which tells Vue Router 4+/5+ to use the
  // modern return-based resolution (no deprecation warning in Vue Router 5.0.3+).
  router.beforeEach((to: Route, _from: Route, ...rest: [(() => void)?]) => {
    // We avoid trying to re-fetch the page load span when we know we already handled it the first time
    const activePageLoadSpan = !hasHandledFirstPageLoad ? getActivePageLoadSpan() : undefined;

    const attributes: SpanAttributes = {};

    for (const key of Object.keys(to.params)) {
      attributes[`url.path.parameter.${key}`] = to.params[key];
      attributes[`params.${key}`] = to.params[key]; // params.[key] is an alias
    }
    for (const key of Object.keys(to.query)) {
      const value = to.query[key];
      if (value) {
        attributes[`query.${key}`] = value;
      }
    }

    // Determine a name for the routing transaction and where that name came from
    let spanName: string = to.path;
    let transactionSource: TransactionSource = 'url';
    if (to.name && options.routeLabel !== 'path') {
      spanName = to.name.toString();
      transactionSource = 'custom';
    } else if (to.matched.length > 0) {
      const lastIndex = to.matched.length - 1;
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      spanName = to.matched[lastIndex]!.path;
      transactionSource = 'route';
    }

    getCurrentScope().setTransactionName(spanName);