How to use @shopify/performance - 10 common examples

function getAnomalousNavigationDurationTag(
  navigation: Navigation,
  anomalousNavigationDurationThreshold: number,
) {
  return {
    anomalous: navigation.duration > anomalousNavigationDurationThreshold,
  };
}

const EVENT_METRIC_MAPPING = {
  [EventType.TimeToFirstByte]: LifecycleMetric.TimeToFirstByte,
  [EventType.TimeToFirstContentfulPaint]:
    LifecycleMetric.TimeToFirstContentfulPaint,
  [EventType.TimeToFirstPaint]: LifecycleMetric.TimeToFirstPaint,
  [EventType.DomContentLoaded]: LifecycleMetric.DomContentLoaded,
  [EventType.FirstInputDelay]: LifecycleMetric.FirstInputDelay,
  [EventType.Load]: LifecycleMetric.Load,
};

function eventMetricName(event: LifecycleEvent) {
  return EVENT_METRIC_MAPPING[event.type] || event.type;
}

}[] = [];

      const additionalTags = getAdditionalTags
        ? getAdditionalTags(body, userAgent)
        : {};

      const tags = {
        browserConnectionType: connection.effectiveType,
        ...additionalTags,
      };

      statsLogger.log(`Adding event tags: ${JSON.stringify(tags)}`);

      for (const event of events) {
        const value =
          event.type === EventType.FirstInputDelay
            ? event.duration
            : event.start;

        metrics.push({
          name: eventMetricName(event),
          value: Math.round(value),
          tags,
        });
      }

      for (const {details, metadata} of navigations) {
        const navigation = new Navigation(details, metadata);

        const additionalNavigationTags = getAdditionalNavigationTags
          ? getAdditionalNavigationTags(navigation)
          : {};

function logOperation(result: FetchResult | Error) {
      const end = now();
      const duration = end - start;
      const success =
        result != null && !(result instanceof Error) && result.data != null;

      const errors =
        result != null && !(result instanceof Error) && result.errors
          ? result.errors.map(({message, path}) => ({
              message,
              path: path && Array.isArray(path) ? path.join(',') : undefined,
            }))
          : undefined;

      const {response} = operation.getContext();

      const requestId =
        response instanceof Response

return new ApolloLink((operation, forward) => {
    if (forward == null) {
      return null;
    }

    const start = now();

    function logOperation(result: FetchResult | Error) {
      const end = now();
      const duration = end - start;
      const success =
        result != null && !(result instanceof Error) && result.data != null;

      const errors =
        result != null && !(result instanceof Error) && result.errors
          ? result.errors.map(({message, path}) => ({
              message,
              path: path && Array.isArray(path) ? path.join(',') : undefined,
            }))
          : undefined;

      const {response} = operation.getContext();

function getAnomalousNavigationDurationTag(
  navigation: Navigation,
  anomalousNavigationDurationThreshold: number,
) {
  return {
    anomalous: navigation.duration > anomalousNavigationDurationThreshold,
  };
}

const EVENT_METRIC_MAPPING = {
  [EventType.TimeToFirstByte]: LifecycleMetric.TimeToFirstByte,
  [EventType.TimeToFirstContentfulPaint]:
    LifecycleMetric.TimeToFirstContentfulPaint,
  [EventType.TimeToFirstPaint]: LifecycleMetric.TimeToFirstPaint,
  [EventType.DomContentLoaded]: LifecycleMetric.DomContentLoaded,
  [EventType.FirstInputDelay]: LifecycleMetric.FirstInputDelay,
  [EventType.Load]: LifecycleMetric.Load,
};

function eventMetricName(event: LifecycleEvent) {
  return EVENT_METRIC_MAPPING[event.type] || event.type;
}

navigation: Navigation,
  anomalousNavigationDurationThreshold: number,
) {
  return {
    anomalous: navigation.duration > anomalousNavigationDurationThreshold,
  };
}

const EVENT_METRIC_MAPPING = {
  [EventType.TimeToFirstByte]: LifecycleMetric.TimeToFirstByte,
  [EventType.TimeToFirstContentfulPaint]:
    LifecycleMetric.TimeToFirstContentfulPaint,
  [EventType.TimeToFirstPaint]: LifecycleMetric.TimeToFirstPaint,
  [EventType.DomContentLoaded]: LifecycleMetric.DomContentLoaded,
  [EventType.FirstInputDelay]: LifecycleMetric.FirstInputDelay,
  [EventType.Load]: LifecycleMetric.Load,
};

function eventMetricName(event: LifecycleEvent) {
  return EVENT_METRIC_MAPPING[event.type] || event.type;
}

Array.isArray(value.navigations) &&
    typeof value.pathname === 'string'
  );
}

function getAnomalousNavigationDurationTag(
  navigation: Navigation,
  anomalousNavigationDurationThreshold: number,
) {
  return {
    anomalous: navigation.duration > anomalousNavigationDurationThreshold,
  };
}

const EVENT_METRIC_MAPPING = {
  [EventType.TimeToFirstByte]: LifecycleMetric.TimeToFirstByte,
  [EventType.TimeToFirstContentfulPaint]:
    LifecycleMetric.TimeToFirstContentfulPaint,
  [EventType.TimeToFirstPaint]: LifecycleMetric.TimeToFirstPaint,
  [EventType.DomContentLoaded]: LifecycleMetric.DomContentLoaded,
  [EventType.FirstInputDelay]: LifecycleMetric.FirstInputDelay,
  [EventType.Load]: LifecycleMetric.Load,
};

function eventMetricName(event: LifecycleEvent) {
  return EVENT_METRIC_MAPPING[event.type] || event.type;
}

typeof value.pathname === 'string'
  );
}

function getAnomalousNavigationDurationTag(
  navigation: Navigation,
  anomalousNavigationDurationThreshold: number,
) {
  return {
    anomalous: navigation.duration > anomalousNavigationDurationThreshold,
  };
}

const EVENT_METRIC_MAPPING = {
  [EventType.TimeToFirstByte]: LifecycleMetric.TimeToFirstByte,
  [EventType.TimeToFirstContentfulPaint]:
    LifecycleMetric.TimeToFirstContentfulPaint,
  [EventType.TimeToFirstPaint]: LifecycleMetric.TimeToFirstPaint,
  [EventType.DomContentLoaded]: LifecycleMetric.DomContentLoaded,
  [EventType.FirstInputDelay]: LifecycleMetric.FirstInputDelay,
  [EventType.Load]: LifecycleMetric.Load,
};

function eventMetricName(event: LifecycleEvent) {
  return EVENT_METRIC_MAPPING[event.type] || event.type;
}

}

function getAnomalousNavigationDurationTag(
  navigation: Navigation,
  anomalousNavigationDurationThreshold: number,
) {
  return {
    anomalous: navigation.duration > anomalousNavigationDurationThreshold,
  };
}

const EVENT_METRIC_MAPPING = {
  [EventType.TimeToFirstByte]: LifecycleMetric.TimeToFirstByte,
  [EventType.TimeToFirstContentfulPaint]:
    LifecycleMetric.TimeToFirstContentfulPaint,
  [EventType.TimeToFirstPaint]: LifecycleMetric.TimeToFirstPaint,
  [EventType.DomContentLoaded]: LifecycleMetric.DomContentLoaded,
  [EventType.FirstInputDelay]: LifecycleMetric.FirstInputDelay,
  [EventType.Load]: LifecycleMetric.Load,
};

function eventMetricName(event: LifecycleEvent) {
  return EVENT_METRIC_MAPPING[event.type] || event.type;
}

for (const event of events) {
        const value =
          event.type === EventType.FirstInputDelay
            ? event.duration
            : event.start;

        metrics.push({
          name: eventMetricName(event),
          value: Math.round(value),
          tags,
        });
      }

      for (const {details, metadata} of navigations) {
        const navigation = new Navigation(details, metadata);

        const additionalNavigationTags = getAdditionalNavigationTags
          ? getAdditionalNavigationTags(navigation)
          : {};

        const anomalousNavigationDurationTag = anomalousNavigationDurationThreshold
          ? getAnomalousNavigationDurationTag(
              navigation,
              anomalousNavigationDurationThreshold,
            )
          : {};

        const navigationTags = {
          ...tags,
          ...additionalNavigationTags,
          ...anomalousNavigationDurationTag,