Measure Events

In some cases, you may want to measure event occurrences in your app, but not necessarily the duration or success/failure. To do this, you can use the usePolaris() hook's logMeasurement function.

Let's look at some examples.

Measure User Interactions

In this example, we'll measure the number of times a user clicks on a grid component.

Grid.tsx
export function Grid() {
  const { logMeasurement } = usePolaris();

  const handleClick = useCallback(() => {
    logMeasurement('grid-click');
  }, []);

  return (<></>);
}

Measure Key Performance Indicators

In this example, we'll send an event to Polaris when a user completes a booking.

Booking.tsx
export function Booking() {
  const { logMeasurement } = usePolaris();

  const handleBooking = useCallback(() => {
    logMeasurement('booking-complete');
  }, []);

  return (<></>);
}

The logMeasurement() Function

Let's look at the signature of the logMeasurement function.

logMeasurement( eventName: string, result: MeasurementResult, duration: number, url: string | null, measurementMetadata: object = {}, resultMetadata: object = {}) => void

Let's review each argument:

  • eventName - The name of the event you want to measure. This is the only required argument.
  • result - The result of the event. This can be one of the following values:
    • MeasurementResult.Success - The event was successful.
    • MeasurementResult.Failure - The event failed.
    • MeasurementResult.Aborted - The event was aborted.
  • duration - The duration of the event in milliseconds.
  • url - The URL of the event. This is useful for tracking events that occur on different pages.
  • measurementMetadata - Any additional metadata you want to include about the event.
  • resultMetadata - Any additional metadata you want to include about the result.