Measure React Performance & Reliability

Polaris allows you to measure the performance and reliability of any event in your React application.

Prerequisites

Before we get started, make sure you have:

• Installed the Polaris SDK in your React application.
• Configured the Polaris Provider with your application's API Key.

Learn how to install the React SDK.

The useInstrument() Hook

The useInstrument() hook provides a reference to an instrument that is determined by the name of the event. Let's take a look.

const instrument = useInstrument('unique-event-name');

The useInstrument() hook returns a reference the Instrument object for the event name provided.

The Instrument object has the following methods:

• start() - Starts the measurement.
• done() - Completes the measurement.
• fail() - Fails the measurement.

Create a Measurement

With Polaris, you can measure the performance and reliability of any event in your React application.

In this example, we'll measure the duration and success rate of authenticating a user. First, we'll start the measurement when the user submits the login form.

import { useInstrument } from '@getpolaris.ai/sdk-react';

export default function() {
  // first, create a new measurement
  const instrument = useInstrument('auth-flow');

  const handleSubmit = useCallback(async (email, password) => {
    try {
      // start the measurement using the `start()` method
      instrument.start();
      await login(email, password);
    } catch (error) {
      // fail the measurement using the `fail()` method
      instrument.fail({ error });
    }
  }, []);

  return (
    <div>...</div>
  );
}

Then, we can complete the measurement when the user successfully logs in and we have displayed the user's reviews.

import { useInstrument } from '@getpolaris.ai/sdk-react';

export default function() {
  // first, get a reference to the auth-flow instrument
  const instrument = useInstrument('auth-flow');

  useEffect(() => {
    getReviews()
      .then((reviews) => {
        setReviews(reviews);
        instrument.done();
      })
      .catch((error) => {
        console.error(error);
        instrument.fail();
      });
  }, []);

  return (
    <div>...</div>
  );
}

A few things to note:

• The useInstrument() hook returns the same Instrument object for the same event name.
• The Instrument object is not tied to a specific component. You can use it anywhere in your application.
• We are measuring both the duration and success rate of the auth-flow event.
• The auth-flow event starts when the user logs into the application.
• The auth-flow event ends when the user's reviews are displayed.