onInteraction

Sends the page's interactions to sink, measured from the input to the next paint, so an app can hold them to a budget. It reads the browser's Event Timing (a PerformanceObserver of event entries, grouped by interactionId), and reports an interaction once it ends: at its click or keyup, or, for one with neither, when the next one starts. An interaction is named by its longest event's type unless measureInteraction labelled it. In a browser without Event Timing, only labelled interactions are reported. Returns the function that stops sending to sink.

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

Example

const stop = onInteraction(({ name, durationMs }) => {
  if (durationMs > 100) analytics.track("slow interaction", { name, durationMs });
});

Usage

It costs nothing at idle: no timer and no listener, only the observer, which it starts with the first sink and disconnects after the last one stops. Event Timing reports an event that took 16 ms or longer, so a quicker unlabelled interaction is not reported.

Use instead when

• Use measureInteraction instead when you want a name for one interaction, or a measurement in a browser without Event Timing.

Parameters

sink

Type: InteractionSink

Returns

() => void