SvelteKit Sentry Routing instrumentation PoC

sveltekit-routing-instrumentation.ts

export function svelteKitRoutingInstrumentation<T extends Transaction>(
  customStartTransaction: (context: TransactionContext) => T | undefined,
  startTransactionOnPageLoad?: boolean,
  startTransactionOnLocationChange?: boolean
): void {
  if (!browser) {
    return;
  }

  function createPageloadTxn(): Transaction | undefined {
    if (!startTransactionOnPageLoad) {
      return undefined;
    }

    const ctx: TransactionContext = {
      name: 'initial pageload',
      op: 'pageload',
      description: window.location.pathname
    };

    if (customStartTransaction) {
      return customStartTransaction(ctx);
    }

    return undefined;
  }

  const pageloadTxn = createPageloadTxn();

  let routingSpan: Span | undefined = undefined;

  // getCurrentHub().getScope()?.setSpan(pageloadTxn);

  const pageUnsub = page.subscribe((page) => {
    if (!page) {
      return;
    }

    console.log({ page });

    const routeId = page.route?.id;
    if (pageloadTxn && !pageloadTxn.endTimestamp && routeId) {
      pageloadTxn.setName(routeId, 'route');
      console.log('UPDATED PAGELOAD TXN NAME');
    }

    if (routingSpan && !routingSpan.endTimestamp) {
      routingSpan.finish();
      routingSpan = undefined;
    }
  });

  const navUnsubscribe = navigating.subscribe((navigation) => {
    if (!navigation) {
      // This happens e.g. on the initial pageload
      return;
    }
    if (!startTransactionOnLocationChange) {
      return;
    }

    let activeTxn = getCurrentHub().getScope()?.getTransaction();
    if (!activeTxn) {
      activeTxn = customStartTransaction({
        name: navigation.to?.route.id || 'unknown',
        op: 'navigation',
        metadata: { source: 'route' }
      });
    }

    if (activeTxn) {
      if (routingSpan) {
        routingSpan.finish();
      }
      routingSpan = activeTxn.startChild({
        description: `${navigation.from?.route.id} -> ${navigation.to?.route.id}`,
        op: 'ui.sveltekit.routing',
        tags: {
          'routing.instrumentation': '@sentry/sveltekit'
        }
      });
    }
  });

  window.addEventListener('unload', () => {
    if (routingSpan) {
      routingSpan.finish();
    }
    if (pageloadTxn) {
      pageloadTxn.finish();
    }
    const activeTxn = getCurrentHub().getScope()?.getTransaction();
    if (activeTxn) {
      activeTxn.finish();
    }
    if (pageUnsub) {
      pageUnsub();
    }
    navUnsubscribe();
  });
}