Tracking - Performance Tracer

This library helps you measure the organic time our users spent in their journey while accesing our web. For example, you might want to know how long a user had waited since they clicked on the "Search" button until they got the results they wanted.

import React, { useEffect } from 'react';
import { usePerformanceTracer } from '@traveloka/core';
import { MDSButton } from '@traveloka/web-components';

function Page() {
  const [startTraceHotelSearch, stopTraceHotelSearch] = usePerformanceTracer(
    'hotel_search'
  );
  const [startTraceViewPage, stopTraceViewPage] = usePerformanceTracer(
    'view_page'
  );

  useEffect(() => {
    startTraceHotelSearch({ source: 'page-load' });
    startTraceViewPage();
    fetchHotelSearch();
    return () => stopTraceViewPage();
  }, []);

  function fetchHotelSearch() {
    fetch().then(response => stopTraceHotelSearch());
  }

  return (
    <>
      <MDSButton
        variant="primary"
        text="Refresh search"
        onPress={() => {
          startTraceHotelSearch({ source: 'search-button-click' });
          fetchHotelSearch();
        }}
      />
    </>
  );
}

How it works

usePerformanceTracer(traceName) returns a pair of these functions.

startTrace(additionalData)

startTrace(additionalData) marks the start a user journey associated with traceName. You can call this more than once if there are multiple possible start points, and we will normally only consider the first startTrace call in the journey.

additionalData is an optional object to give context to the start event. Normally, you would supply this with { source: '...' } to mark the different start points, but you can also add additional fields or supply none at all.

The reason why we allow calling startTrace more than once is because the starting point of a journey isn't always clear. For instance, a user can access a hotel detail page by:

• Clicking from a search result item, getting navigated to the hotel detail page, and then waiting for the page to load — the client will have called startTrace({source: 'result-click'}) when the user clicked on the search result item, and then startTrace({source: 'page-load'}) when the detail page begins loading.

• Entering the hotel detail page's URL directly or visiting the detail page from search engine — the client will only call startTrace({source: 'page-load'}) in the journey.

stopTrace()

stopTrace() marks the end of user journey associated with traceName. It measures the time since the first associated startTrace() in the journey, and sends the duration along with additionalData to our tracking API.

Restarting journey

Generally, the state when you start/stop an event is persisted during the user's journey. This means you can call startTrace and stopTrace in different pages, as long as they are considered to be "in the same journey".

There are certain occasions, however, where we consider the user has aborted their old journey and started a new one:

• The user refreshes the page — we consider the user gave up on the old journey. All records of previous startTrace calls will be ignored.

• The user continues their journey in the new tab — we track tracing events on each tab separately (the current tab will retain all of its data, but we will create a new store on the new tab)

• You call startTrace with the same additionalData.source twice in the current journey — we consider the user restarted the journey; all old data about traceName is discarded and we create a new record for traceName using the latest startTrace.