measureInteraction

Runs fn in an event handler and names the interaction it belongs to, so the reports onInteraction sends carry name. The report measures from the input to the next paint: the Event Timing entry for this event, or, where none has arrived by the second animation frame after it (in a browser without Event Timing, or for an event quicker than 16 ms), the time from the event to that frame. Each labelled interaction is reported once, its other events included. Event Timing rounds a duration to 8 ms, and the fallback runs to the start of that frame, which can be up to a frame after the paint, so the two are not directly comparable. A fallback is dropped when the page was or became hidden before it ran, since a hidden page draws no frames. Returns what fn returns. Call it inside the handler: outside one, it times from the call, and says so in development. With no sink it only runs fn.

import { measureInteraction } from "@/lib/ouro/measure-interaction";

Example

<Button onClick={() => measureInteraction("open filters", () => setOpen(true))}>Filters</Button>

Use instead when

• Use onInteraction instead to measure every interaction without naming it.

Parameters

name

Type: string

fn

Type: () => T

Returns

T