Overview

When a click or key press takes too long to handle, the page feels frozen. Chrome points this out in DevTools ([Violation] 'click' handler took 312ms), but only on your own machine.

slowHandlerIntegration uses the browser's Event Timing API to spot the same thing on real users' devices: every user interaction that takes longer than durationThreshold to process and paint is sent as a warn-level log, with the event type, its duration and startTime as attributes:

'click' handler took 312ms

Interactions that happened before the integration was registered are reported too. In browsers without Event Timing support the integration does nothing.

Usage

import { use } from '@buglapse/browser'
import { slowHandlerIntegration } from '@buglapse/browser/integrations'

use(slowHandlerIntegration())

// only report really slow interactions:
use(slowHandlerIntegration({ durationThreshold: 250 }))

Options

Option	Type	Default	Description
durationThreshold	number	100	Minimum interaction duration, in milliseconds, that's reported. The browser rounds it to a multiple of 8 and won't go below 16