Skip to main content

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.


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() {
// Some logic to open the modal

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 "";

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
© 2024 Redraw, Inc.