Function createTracingMixins

packages/vue/src/tracing.ts:61–161

(options: Partial<TracingOptions> = {})

}

export const createTracingMixins = (options: Partial<TracingOptions> = {}): Mixins => {
  const hooks = (options.hooks || [])
    .concat(DEFAULT_HOOKS)
    // Removing potential duplicates
    .filter((value, index, self) => self.indexOf(value) === index);

  const mixins: Mixins = {};

  const rootComponentSpanFinalTimeout = options.timeout || 2000;

  for (const operation of hooks) {
    // Retrieve corresponding hooks from Vue lifecycle.
    // eg. mount => ['beforeMount', 'mounted']
    const internalHooks = HOOKS[operation];
    if (!internalHooks) {
      DEBUG_BUILD && debug.warn(`Unknown hook: ${operation}`);
      continue;
    }

    for (const internalHook of internalHooks) {
      mixins[internalHook] = function (this: VueSentry) {
        const isRootComponent = this.$root === this;

        // 1. Root Component span creation
        if (isRootComponent) {
          this.$_sentryRootComponentSpan =
            this.$_sentryRootComponentSpan ||
            startInactiveSpan({
              name: 'Application Render',
              op: `${VUE_OP}.render`,
              attributes: {
                [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.vue',
              },
              onlyIfParent: true,
            });

          // call debounced end function once directly, just in case no child components call it
          maybeEndRootComponentSpan(this, timestampInSeconds(), rootComponentSpanFinalTimeout);
        }

        // 2. Component tracking filter
        const componentName = formatComponentName(this, false);

        const shouldTrack =
          isRootComponent || // We always want to track the root component
          (Array.isArray(options.trackComponents)
            ? findTrackComponent(options.trackComponents, componentName)
            : options.trackComponents);

        // We always want to track root component
        if (!shouldTrack) {
          // even if we don't track `this` component, we still want to end the root span eventually
          maybeEndRootComponentSpan(this, timestampInSeconds(), rootComponentSpanFinalTimeout);
          return;
        }

        this.$_sentryComponentSpans = this.$_sentryComponentSpans || {};