@atlaskit/editor-plugin-interactivity 0.1.0 → 0.2.0

package/dist/es2019/collector/interactivity-collector.js

@@ -0,0 +1,228 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getDocument } from '@atlaskit/browser-apis';
+import { InteractionObserver } from './interaction-observer';
+import { InteractivitySession } from './interactivity-session';
+import { SCHEMA_VERSION } from './bucket-boundaries';
+import { LifecycleObserver } from './lifecycle-observer';
+import { SnapshotScheduler } from './snapshot-scheduler';
+/**
+ * Collects interaction latencies for one editor mount and emits session-to-date snapshots.
+ *
+ * `start` and `stop` bound the collecting, which happens once. Within it there can be several
+ * sessions, because a session covers one document in one mode: a Confluence live page
+ * navigates and switches between reading and editing without ever remounting the editor, and
+ * each of those closes the current session and opens the next.
+ */
+export class InteractivityCollector {
+  constructor(options) {
+    _defineProperty(this, "started", false);
+    _defineProperty(this, "stopped", false);
+    this.emit = options.emit;
+    this.getEditorDomSize = options.getEditorDomSize;
+    this.getNodeSize = options.getNodeSize;
+    this.getObjectId = options.getObjectId;
+    this.getSessionMode = options.getSessionMode;
+    this.interactionObserver = new InteractionObserver(entries => this.recordEntries(entries));
+    this.snapshotScheduler = new SnapshotScheduler(() => this.onTimer());
+    this.lifecycleObserver = new LifecycleObserver({
+      onHidden: () => this.onHidden(),
+      onVisible: () => this.onVisible(),
+      onPageHide: () => this.onPageHide(),
+      onPageShow: () => this.onPageShow()
+    });
+    this.session = this.createSession(0);
+  }
+
+  /**
+   * Starts collecting. Calling it again while collecting changes nothing.
+   *
+   * @returns whether collecting is running; `false` when the browser cannot support it, or
+   * when it has already been stopped.
+   */
+  start() {
+    // Collecting is over for good once stopped: the session it covered has been reported.
+    if (this.stopped) {
+      return false;
+    }
+    if (this.started) {
+      return true;
+    }
+    if (!InteractionObserver.isSupported()) {
+      return false;
+    }
+
+    // Opened again so the session's timings start with the collecting, not with whenever
+    // this object was constructed.
+    this.session = this.createSession(0);
+    this.interactionObserver.start();
+    this.snapshotScheduler.start();
+    this.lifecycleObserver.start();
+    this.started = true;
+    return true;
+  }
+
+  /** Reports the session as ended by the editor unmounting, and stops collecting. */
+  stop() {
+    if (this.stopped) {
+      return;
+    }
+    this.takeSnapshot('unmount');
+    this.stopped = true;
+    this.interactionObserver.stop();
+    this.snapshotScheduler.stop();
+    this.lifecycleObserver.stop();
+  }
+
+  /**
+   * Rotates the session when the editor is pointed at different content.
+   *
+   * An unknown object id is no information, never a change. The provider resolves
+   * asynchronously after mount, and `contextIdentifierPlugin` resets its state to the
+   * configured provider on transactions that do not carry a new one, so the id read here goes
+   * missing for a moment on a document that never changed.
+   */
+  onObjectIdChanged() {
+    if (this.stopped) {
+      return;
+    }
+    const objectId = this.getObjectId();
+    if (objectId === undefined || objectId === this.session.objectId) {
+      return;
+    }
+    if (this.session.objectId === undefined) {
+      this.session.objectId = objectId;
+      return;
+    }
+    this.rotateSession('navigation');
+  }
+
+  /**
+   * Rotates the session when the editor switches between reading and editing. Interactions
+   * with a read-only page are a different population from interactions while editing, so one
+   * session never covers both.
+   */
+  onViewModeChanged() {
+    if (this.stopped) {
+      return;
+    }
+    const mode = this.getSessionMode();
+    if (mode === undefined || mode === this.session.mode) {
+      return;
+    }
+    if (this.session.mode === undefined) {
+      this.session.mode = mode;
+      return;
+    }
+    this.rotateSession('modeChange');
+  }
+
+  /**
+   * @param startsAfterInteractionId the highest interaction the previous session saw, so
+   * entries still arriving for it are not counted here as well.
+   */
+  createSession(startsAfterInteractionId) {
+    var _getDocument;
+    return new InteractivitySession({
+      objectId: this.getObjectId(),
+      mode: this.getSessionMode(),
+      hidden: ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.visibilityState) === 'hidden',
+      startsAfterInteractionId
+    });
+  }
+
+  /** Reports the current session as ended by `reason` and puts a new one in its place. */
+  rotateSession(reason) {
+    this.takeSnapshot(reason);
+    this.session = this.createSession(this.session.tracker.lastInteractionId);
+    this.snapshotScheduler.restart();
+  }
+  onTimer() {
+    this.takeSnapshot('timer');
+  }
+  onHidden() {
+    if (this.session.hiddenSince === undefined) {
+      this.session.hiddenSince = performance.now();
+    }
+    this.takeSnapshot('hidden');
+  }
+  onVisible() {
+    if (this.session.hiddenSince !== undefined) {
+      this.session.hiddenMs += performance.now() - this.session.hiddenSince;
+      this.session.hiddenSince = undefined;
+    }
+    this.session.lifecycleSnapshotEmitted = false;
+  }
+  onPageHide() {
+    this.takeSnapshot('pagehide');
+  }
+
+  /**
+   * The page came back from the back/forward cache, which never raises a visibility change.
+   * The session continues, and the signal that suspended it has been reported, so the next
+   * one is due.
+   */
+  onPageShow() {
+    this.session.lifecycleSnapshotEmitted = false;
+  }
+  recordEntries(entries) {
+    const {
+      tracker,
+      page
+    } = this.session;
+    for (const entry of entries) {
+      const update = tracker.merge(entry);
+      if (!update) {
+        continue;
+      }
+      if (update.type === 'new') {
+        page.add(update.latencyMs);
+      } else {
+        page.remeasure(update.fromMs, update.toMs);
+      }
+      this.session.revision += 1;
+    }
+  }
+  takeSnapshot(reason) {
+    if (this.stopped) {
+      return;
+    }
+    const session = this.session;
+
+    // Checked before anything is consumed: `visibilitychange` and `pagehide` fire back to
+    // back on the same transition and it is reported once, and draining first would take
+    // entries out of the browser's queue only to suppress the snapshot carrying them.
+    const lifecycleSignal = reason === 'hidden' || reason === 'pagehide';
+    if (lifecycleSignal && session.lifecycleSnapshotEmitted) {
+      return;
+    }
+
+    // Must run before the change check: the browser may be holding entries that have not
+    // reached the observer callback yet, and on `pagehide` there is no later chance to
+    // pick them up.
+    this.interactionObserver.drain();
+    if (session.revision === session.emittedRevision) {
+      return;
+    }
+    if (lifecycleSignal) {
+      session.lifecycleSnapshotEmitted = true;
+    }
+    session.seq += 1;
+    session.emittedRevision = session.revision;
+    const now = performance.now();
+    const hiddenMs = session.hiddenMs + (session.hiddenSince === undefined ? 0 : now - session.hiddenSince);
+    const totalCount = InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
+    this.emit({
+      schema: SCHEMA_VERSION,
+      interactivitySessionId: session.id,
+      objectId: session.objectId,
+      seq: session.seq,
+      reason,
+      sessionMode: session.mode,
+      activeMs: Math.round(Math.max(0, now - session.startedAt - hiddenMs)),
+      hiddenMs: Math.round(hiddenMs),
+      nodeSize: this.getNodeSize(),
+      editorDomSize: this.getEditorDomSize(),
+      page: session.page.snapshot(totalCount)
+    });
+  }
+}

package/dist/es2019/collector/interactivity-session.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { InteractionObserver } from './interaction-observer';
+import { InteractionTracker } from './interaction-tracker';
+import { InteractionGroup } from './interaction-group';
+function createSessionId() {
+  if (typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('');
+}
+/**
+ * Everything that belongs to one session.
+ *
+ * Nothing here is reset — the next session is a new instance — so a field added here cannot
+ * be left carrying the previous session's value.
+ */
+export class InteractivitySession {
+  constructor(start) {
+    _defineProperty(this, "id", createSessionId());
+    _defineProperty(this, "startedAt", performance.now());
+    /** Page interaction count when the session opened, subtracted to get its own total. */
+    _defineProperty(this, "interactionCountAtStart", InteractionObserver.readPageInteractionCount());
+    _defineProperty(this, "page", new InteractionGroup());
+    /** Increments per snapshot; a query takes the highest one per session. */
+    _defineProperty(this, "seq", 0);
+    _defineProperty(this, "hiddenMs", 0);
+    /**
+     * Bumped on every change to the accumulated data. A snapshot is emitted only when this
+     * has moved past `emittedRevision`, so identical snapshots are never sent twice.
+     */
+    _defineProperty(this, "revision", 0);
+    _defineProperty(this, "emittedRevision", 0);
+    /** One lifecycle snapshot per hidden episode; cleared when the page comes back. */
+    _defineProperty(this, "lifecycleSnapshotEmitted", false);
+    this.objectId = start.objectId;
+    this.mode = start.mode;
+    this.hiddenSince = start.hidden ? this.startedAt : undefined;
+    this.tracker = new InteractionTracker(start.startsAfterInteractionId);
+  }
+}

package/dist/es2019/collector/lifecycle-observer.js

@@ -0,0 +1,46 @@
+import { bind } from 'bind-event-listener';
+import { getDocument } from '@atlaskit/browser-apis';
+/**
+ * Reports the page lifecycle signals that force an extra snapshot: the tab being hidden or
+ * shown again, and the page being unloaded or restored from the back/forward cache.
+ *
+ * None of them is guaranteed to arrive — a mobile browser being killed raises nothing at all.
+ * Snapshots carry session-to-date values, so losing the last one costs only the tail of that
+ * session.
+ */
+export class LifecycleObserver {
+  constructor(handlers) {
+    this.handlers = handlers;
+  }
+  start() {
+    const doc = getDocument();
+    const unbindVisibilityChange = doc ? bind(doc, {
+      type: 'visibilitychange',
+      listener: () => {
+        if (doc.visibilityState === 'hidden') {
+          this.handlers.onHidden();
+        } else {
+          this.handlers.onVisible();
+        }
+      }
+    }) : undefined;
+    const unbindPageHide = bind(window, {
+      type: 'pagehide',
+      listener: () => this.handlers.onPageHide()
+    });
+    const unbindPageShow = bind(window, {
+      type: 'pageshow',
+      listener: () => this.handlers.onPageShow()
+    });
+    this.unbind = () => {
+      unbindVisibilityChange === null || unbindVisibilityChange === void 0 ? void 0 : unbindVisibilityChange();
+      unbindPageHide();
+      unbindPageShow();
+    };
+  }
+  stop() {
+    var _this$unbind;
+    (_this$unbind = this.unbind) === null || _this$unbind === void 0 ? void 0 : _this$unbind.call(this);
+    this.unbind = undefined;
+  }
+}

package/dist/es2019/collector/snapshot-scheduler.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * Snapshots are taken 10 s, 30 s and 60 s after the session starts, then every 60 s. The
+ * first three come close together so that short sessions, which are the common case, are
+ * still reported.
+ */
+const INITIAL_OFFSETS_MS = [10_000, 30_000, 60_000];
+const INTERVAL_MS = 60_000;
+
+/**
+ * Fires `onTick` on the snapshot cadence. Timings are offsets from `start()`, so a
+ * restart (a new session in the same editor) restarts the cadence too.
+ */
+export class SnapshotScheduler {
+  constructor(onTick) {
+    _defineProperty(this, "tickIndex", 0);
+    this.onTick = onTick;
+  }
+  start() {
+    this.tickIndex = 0;
+    this.scheduleNext();
+  }
+  restart() {
+    this.stop();
+    this.start();
+  }
+  stop() {
+    if (this.timeoutId !== undefined) {
+      window.clearTimeout(this.timeoutId);
+      this.timeoutId = undefined;
+    }
+  }
+  scheduleNext() {
+    this.timeoutId = window.setTimeout(() => {
+      this.tickIndex += 1;
+      this.onTick();
+      this.scheduleNext();
+    }, this.delayForNextTick());
+  }
+  delayForNextTick() {
+    const offset = INITIAL_OFFSETS_MS[this.tickIndex];
+    if (offset === undefined) {
+      return INTERVAL_MS;
+    }
+    const previousOffset = this.tickIndex === 0 ? 0 : INITIAL_OFFSETS_MS[this.tickIndex - 1];
+    return offset - previousOffset;
+  }
+}

package/dist/es2019/interactivityPlugin.js

@@ -1,10 +1,79 @@
+import { useEffect } from 'react';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { fireInteractivityEvent } from './analytics/fire-interactivity-event';
+import { InteractivityCollector } from './collector/interactivity-collector';
 /**
- * Reports interaction latency distributions for full page editor sessions as the
- * `editor interactivity` operational event.
+ * Reports session-to-date interaction latency distributions for full page editor sessions
+ * as the `editor interactivity` operational event.
  *
- * A stub for now: the plugin only registers itself. The collector and the event land in
- * EDITOR-8553.
+ * The session runs for as long as the plugin's hook stays mounted, which is one editor
+ * mount: `MountPluginHooks` in editor-core keys hook fibers by plugin name, so a preset
+ * reconfigure — which destroys and recreates ProseMirror plugin views — leaves this hook,
+ * and the session, in place.
  */
-export const interactivityPlugin = () => ({
-  name: 'interactivity'
+export const interactivityPlugin = ({
+  api
+}) => ({
+  name: 'interactivity',
+  usePluginHook({
+    editorView
+  }) {
+    useEffect(() => {
+      // Nothing measured here is worth an editor. This effect runs inside the plugin slot's
+      // error boundary, which also renders every plugin's content components, so a throw
+      // from instrumentation would take that UI down with it.
+      try {
+        var _api$contextIdentifie4, _api$editorViewMode2;
+        const collector = new InteractivityCollector({
+          emit: snapshot => {
+            var _api$analytics;
+            return fireInteractivityEvent(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, snapshot);
+          },
+          getObjectId: () => {
+            var _api$contextIdentifie, _api$contextIdentifie2, _api$contextIdentifie3;
+            return api === null || api === void 0 ? void 0 : (_api$contextIdentifie = api.contextIdentifier) === null || _api$contextIdentifie === void 0 ? void 0 : (_api$contextIdentifie2 = _api$contextIdentifie.sharedState.currentState()) === null || _api$contextIdentifie2 === void 0 ? void 0 : (_api$contextIdentifie3 = _api$contextIdentifie2.contextIdentifierProvider) === null || _api$contextIdentifie3 === void 0 ? void 0 : _api$contextIdentifie3.objectId;
+          },
+          getSessionMode: () => {
+            var _api$editorViewMode, _api$editorViewMode$s;
+            const mode = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
+            if (mode === undefined) {
+              return undefined;
+            }
+            return mode === 'view' ? 'reading' : 'editing';
+          },
+          // A destroyed view still answers, with the document it was destroyed with, so
+          // both report nothing rather than a size the editor no longer has.
+          getNodeSize: () => editorView.isDestroyed ? undefined : editorView.state.doc.nodeSize,
+          // `getElementsByTagName` counts descendants in the browser engine, so this
+          // cannot overflow the stack on very large documents.
+          getEditorDomSize: () => editorView.isDestroyed ? undefined : editorView.dom.getElementsByTagName('*').length
+        });
+        if (!collector.start()) {
+          return;
+        }
+
+        // Confluence live pages navigate and switch between reading and editing without
+        // remounting the editor. A session covers one document in one mode, so either
+        // change ends it and starts the next.
+        const unsubscribeFromObjectId = api === null || api === void 0 ? void 0 : (_api$contextIdentifie4 = api.contextIdentifier) === null || _api$contextIdentifie4 === void 0 ? void 0 : _api$contextIdentifie4.sharedState.onChange(() => collector.onObjectIdChanged());
+        const unsubscribeFromViewMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.onChange(() => collector.onViewModeChanged());
+        return () => {
+          unsubscribeFromObjectId === null || unsubscribeFromObjectId === void 0 ? void 0 : unsubscribeFromObjectId();
+          unsubscribeFromViewMode === null || unsubscribeFromViewMode === void 0 ? void 0 : unsubscribeFromViewMode();
+          collector.stop();
+        };
+      } catch (error) {
+        // Instrumentation must not fail the editor around it, but a failure that hits every
+        // browser of one engine would be invisible without this.
+        void logException(error, {
+          location: 'editor-plugin-interactivity/start'
+        });
+        return;
+      }
+      // `api` is deliberately not a dependency: a preset reconfigure hands out a new
+      // proxy object, but the one captured here keeps resolving plugins from the same
+      // live registry, and restarting the session on a reconfigure would split one
+      // editor session in two.
+    }, [editorView]);
+  }
 });

package/dist/esm/analytics/fire-interactivity-event.js

@@ -0,0 +1,33 @@
+import { ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics/types/enums';
+/** The reasons that mean the page may not be around long enough to deliver a queued event. */
+var REASONS_THE_PAGE_MAY_NOT_OUTLIVE = ['hidden', 'pagehide', 'unmount'];
+
+/**
+ * The `editor interactivity` operational event.
+ *
+ * `editorSessionId` arrives without being set here: `@atlaskit/analytics-listeners` merges
+ * the editor analytics context into the attributes of every event on the editor channel.
+ * `objectId` comes both from that context and from the snapshot, which carries the value
+ * the session was collected against.
+ */
+
+/**
+ * Sends a snapshot as the `editor interactivity` event.
+ *
+ * Does nothing without the analytics plugin: an editor without it has nowhere to send events,
+ * and the collector keeps measuring either way.
+ */
+export function fireInteractivityEvent(analytics, snapshot) {
+  analytics === null || analytics === void 0 || analytics.fireAnalyticsEvent({
+    action: 'interactivity',
+    actionSubject: ACTION_SUBJECT.EDITOR,
+    eventType: EVENT_TYPE.OPERATIONAL,
+    attributes: snapshot
+  }, undefined,
+  // Events are queued into an idle callback by default, which a page being unloaded never
+  // runs and a backgrounded tab throttles. The snapshots taken because the page is going
+  // away go immediately; the rest can wait their turn.
+  {
+    immediate: REASONS_THE_PAGE_MAY_NOT_OUTLIVE.includes(snapshot.reason)
+  });
+}

package/dist/esm/collector/bucket-boundaries.js

@@ -0,0 +1,130 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Bucket boundaries for the interaction latency buckets, version 1.
+ *
+ * Two ranges:
+ * - 16 ms to 200 ms — a boundary every 8 ms: 16, 24, 32, … 200. Event Timing rounds
+ *   durations to 8 ms, so nothing finer is measurable.
+ * - above 200 ms — each boundary ~15% above the previous one, five of them per doubling:
+ *   222, 256, 294, 337, 388, 445, 512, … A 40 ms difference matters at 100 ms and is
+ *   noise at 4 seconds, so buckets grow with the latency instead of staying 8 ms wide.
+ *
+ * 500 ms — the Google INP "poor" threshold — falls inside the 445…512 bucket, so that one
+ * bucket is split at 500 to count the threshold instead of interpolating it. 200 ms, the
+ * "good" threshold, is already a boundary.
+ *
+ * Bump SCHEMA_VERSION whenever any boundary moves; queries group by it.
+ */
+export var SCHEMA_VERSION = 1;
+
+/**
+ * Event Timing reporting threshold. Faster interactions are never delivered to the
+ * observer, so they reach no bucket at all — `performance.interactionCount` is what counts
+ * them, as `totalCount - observedCount`. This bucket holds the interactions reported at
+ * exactly the threshold.
+ */
+export var REPORTING_THRESHOLD_MS = 16;
+
+/**
+ * Exceptions to the grid: latencies that must be a boundary of their own so that they are
+ * counted exactly rather than read off a bucket that spans them. Each one splits the bucket it
+ * falls inside. 500 ms is the Google INP "poor" threshold; the "good" one, 200 ms, needs no
+ * exception because the evenly spaced range already ends there.
+ *
+ * Every entry has to sit above that range, and adding one changes the reported keys, so bump
+ * SCHEMA_VERSION with it.
+ */
+var EXACT_THRESHOLDS_MS = [500];
+var EVENLY_SPACED_MAX_MS = 200;
+/**
+ * Keep this a multiple of 8 (8, 16, 24, …). Event Timing reports durations in 8 ms steps, so a
+ * step that is not a multiple of 8 leaves buckets no interaction can ever land in.
+ */
+var EVENLY_SPACED_STEP_MS = 8;
+var BOUNDARIES_PER_DOUBLING = 5;
+
+/**
+ * The first boundary at or above `latencyMs`, for the range above 200 ms.
+ *
+ * Five boundaries per doubling is the same as saying the nth boundary sits at `2^(n/5)` ms —
+ * boundary 40 at 256 ms, 45 at 512 ms, 50 at 1024 ms. So this turns the latency into a
+ * boundary number, rounds that up, and turns it back into milliseconds.
+ *
+ * Boundaries are floored to whole milliseconds, which keeps each one at or below the exact
+ * value it stands for. That is what makes `bucketKeyForMs(boundary) === boundary` hold.
+ */
+function firstBoundaryAtOrAbove(latencyMs) {
+  // `Math.log2(latencyMs) * 5` is the boundary number: log2 answers how many doublings of
+  // 1 ms reach this latency, and five boundaries cover each doubling.
+  //
+  // A latency sitting on a boundary makes that a whole number, which `Math.ceil` has to
+  // keep. ECMA-262 only requires `Math.log2` to be approximate, so 9.0000000000000002 for
+  // `log2(512)` would round up to boundary 46 and report 512 ms as 588 ms. EPSILON is
+  // larger than such imprecision and far smaller than the gap between two boundaries.
+  var EPSILON = 1e-9;
+  var boundaryNumber = Math.ceil(BOUNDARIES_PER_DOUBLING * Math.log2(latencyMs) - EPSILON);
+
+  // One `Math.pow` over the whole exponent, so the result is rounded once. Multiplying the
+  // ratio between neighbouring boundaries (2^(1/5) ≈ 1.1487) by itself instead accumulates
+  // the rounding of every step, reaching 512.0000000000018 by boundary 45.
+  return Math.floor(Math.pow(2, boundaryNumber / BOUNDARIES_PER_DOUBLING));
+}
+
+/** The bucket each exact threshold splits — 500 ms splits the one ending at 512 ms. */
+var EXACT_THRESHOLD_BUCKETS = EXACT_THRESHOLDS_MS.map(function (thresholdMs) {
+  return {
+    thresholdMs: thresholdMs,
+    bucketMs: firstBoundaryAtOrAbove(thresholdMs)
+  };
+});
+
+/**
+ * The bucket a latency belongs to, identified by the bucket's upper boundary in whole
+ * milliseconds — which is also its key in the reported buckets.
+ *
+ * Every latency gets a bucket, however slow: the boundaries continue upwards, so there is no
+ * overflow bucket. Expects the whole-millisecond durations Event Timing reports; boundaries
+ * are floored, so a fractional latency can land in a bucket whose key reads up to a
+ * millisecond below it. Non-finite latencies never reach here — `InteractionTracker` drops
+ * them as it reads the entry.
+ */
+export function bucketKeyForMs(latencyMs) {
+  if (latencyMs <= REPORTING_THRESHOLD_MS) {
+    return REPORTING_THRESHOLD_MS;
+  }
+  if (latencyMs <= EVENLY_SPACED_MAX_MS) {
+    // How many 8 ms steps above the threshold the latency is, rounded up: 17 ms is 0.125
+    // steps up and lands on the boundary one step up, 24 ms. Rounding up is what keeps the
+    // set of keys fixed when a latency is not a multiple of 8 ms.
+    //
+    // No EPSILON here, unlike the branch below: subtracting whole numbers gives a whole
+    // number, and dividing by a power of two shifts a binary float's exponent without
+    // touching its digits, so a latency on a boundary cannot come out just above a whole
+    // number of steps.
+    var steps = Math.ceil((latencyMs - REPORTING_THRESHOLD_MS) / EVENLY_SPACED_STEP_MS);
+    return REPORTING_THRESHOLD_MS + steps * EVENLY_SPACED_STEP_MS;
+  }
+  var boundary = firstBoundaryAtOrAbove(latencyMs);
+
+  // A latency in the lower part of a split bucket is reported as the threshold itself, so the
+  // threshold is counted exactly.
+  var _iterator = _createForOfIteratorHelper(EXACT_THRESHOLD_BUCKETS),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _step.value,
+        thresholdMs = _step$value.thresholdMs,
+        bucketMs = _step$value.bucketMs;
+      if (boundary === bucketMs && latencyMs <= thresholdMs) {
+        return thresholdMs;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return boundary;
+}