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.

Measure Render Performance

Use the PolarisProfiler component to measure the mount and update phases of components in your application.

In this example, we'll measure the performance of the Navigation and DataTable components.

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

export function App() {
  return (
    <>
      <PolarisProfiler id="nav">
        <Navigation />
      </PolarisProfiler>
      <PolarisProfiler id="table">
        <DataTable />
      </PolarisProfiler>
    </>
  );
}

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.