Marks and Measures

It's often useful to measure the duration of certain events in your app. For example, you might want to measure the time it takes to render a component or how long a certain series of user actions takes. These durations are often called "custom metrics" or "traces/tracing" in other monitoring services.

To measure time durations of these events, you can use the measure.start and measure.end() APIs. They provide sub-millisecond precision and are support all modern browsers.

Example

Imagine you have a modal that's often slow to open. You want to measure how long it takes to open the modal.

function onClickOpenModal() {
  measure.start("userClickModalOpenButton");
  // Some logic to open the modal
  measure.end("userClickModalOpenButton");
}

Marks, Measures, and Profiling

Marks and measures are useful for measuring custom metrics. Palette allows you to tie these marks and measures to a profile. This allows you to see the duration of a mark or measure in the context of a profile.

Here's an example of using mark and measure to measure the duration React's initial render:

import { profiler } from "@palette.dev/browser";

profiler.on(["markers.measure"], {
  sampleInterval: 1,
  maxBufferSize: 100_000,
});

measure.start("react.render.start"); // Profiler started
render(<App />, document.getElementById("root"));
measure.end("react.render"); // Profiler stopped