instrumentation-user-interaction does not handle removing listeners using AboutController signal #29
Description
Problem Statement
The react-resizable-panels library fails to provide expected resize functionality when used in an environment where opentelemetry-js script are loaded. Users are unable to resize panels using the mouse.
Investigation Summary
opentelemetry-js library modifies core browser APIs like addEventListener and removeEventListener to attach instrumentation and generate spans for tracking various UI events.
When OpenTelemetry is initialized:
It wraps addEventListener and removeEventListener.
It stores and tracks handlers to avoid registering duplicate listeners (same target, event, and handler reference).
https://github.com/open-telemetry/opentelemetry-js-contrib/blob/main/packages/instrumentation-user-interaction/src/instrumentation.ts#L324
Behavior of react-resizable-panels
To implement resizable functionality, this library attaches pointerdown and pointermove event listeners on the document.body.
It uses the same callback reference for these event handlers (i.e., the function reference doesn’t change across invocations).
On each resize interaction, it first removes previous listeners using an AbortController signal, then adds new ones using the same handler reference.
https://github.com/bvaughn/react-resizable-panels/blob/5af2d8d030a034e9295bc31d8229f70004dd2e25/packages/react-resizable-panels/src/PanelResizeHandleRegistry.ts#L345
Root Cause:
OpenTelemetry's internal logic does not register duplicate event listeners (same target, eventType, and callback).
Since react-resizable-panels removes listeners using AbortController and then re-adds with the same reference, OpenTelemetry skips registering the new listeners.
As a result, no active event listeners are attached, and the resize functionality silently breaks.
Expectation:
OpenTelemetry should handle removing eventListners using signals