PerformanceObserver: default durationThreshold to 104ms (#56506)

Summary:
Pull Request resolved: #56506

React Native's `PerformanceObserver` previously defaulted `durationThreshold` to 0 for `event` entries, while the W3C Event Timing spec
(https://www.w3.org/TR/event-timing/#sec-modifications-perf-timeline) mandates a default of 104ms. The previous default flooded observers with short events
(clicks, pointer up/down) that are not interesting for responsiveness
measurement.

This change brings React Native in line with the spec by making 104ms the
default. The default is applied at the JSI bridge boundary in
`NativePerformance.cpp` (the JS API boundary on the C++ side) when JS does not
provide an explicit `durationThreshold`. The C++ public observer API
(`PerformanceObserverObserveSingleOptions::durationThreshold`) and the global
event buffer (`eventBuffer_.durationThreshold`) keep their `HighResDuration::zero()`
default — applying 104ms to the global buffer would drop sub-104ms events at
the source, breaking observers that explicitly request `durationThreshold: 0`.

Changes in `react-native`:
- `NativePerformance.cpp`: apply 104ms default at the JSI bridge boundary.
- `PerformanceApiExample.js` (rn-tester): pass `durationThreshold: 0` to
  preserve previous behavior.
- `EventTimingAPI-itest.js`: migrate 4 existing call sites to
  `{type: 'event', durationThreshold: 0}` and add a new test verifying the
  104ms default.

Sites using `{entryTypes: ['event']}` were converted to
`{type: 'event', durationThreshold: 0}` since the spec (and existing JS
validation in `PerformanceObserver.js`) disallows `durationThreshold` together
with `entryTypes`.

Changelog: [General][Fixed] - PerformanceObserver: `observe({type: 'event'})` now correctly defaults `durationThreshold` to 104ms per the W3C Event Timing spec instead of reporting all events.

Reviewed By: hoxyq

Differential Revision: D101629586

fbshipit-source-id: 897914e8582a3d16db9e9388606be5d0aebd19ab

Author: rubennorte

packages/react-native/ReactCommon/react/nativemodule/webperformance/NativePerformance.cpp

@@ -34,6 +34,15 @@ namespace facebook::react {
 
 namespace {
 
+/**
+ * Default `durationThreshold` (in milliseconds) applied to `event` entries when
+ * the JS API does not provide an explicit value. Per the W3C Event Timing
+ * spec, observers for `event` entries default to a 104ms threshold:
+ * https://www.w3.org/TR/event-timing/#sec-modifications-perf-timeline
+ */
+constexpr HighResDuration DEFAULT_EVENT_DURATION_THRESHOLD =
+    HighResDuration::fromMilliseconds(104);
+
 class PerformanceObserverWrapper : public jsi::NativeState {
  public:
   explicit PerformanceObserverWrapper(
@@ -337,7 +346,7 @@ void NativePerformance::observe(
   }
 
   auto durationThreshold =
-      options.durationThreshold.value_or(HighResDuration::zero());
+      options.durationThreshold.value_or(DEFAULT_EVENT_DURATION_THRESHOLD);
 
   // observer of type multiple
   if (options.entryTypes.has_value()) {

packages/react-native/src/private/webapis/performance/__tests__/EventTimingAPI-itest.js

@@ -38,7 +38,7 @@ describe('Event Timing API', () => {
     const callback = jest.fn();
 
     const observer = new PerformanceObserver(callback);
-    observer.observe({entryTypes: ['event']});
+    observer.observe({type: 'event', durationThreshold: 0});
 
     const root = Fantom.createRoot();
     Fantom.runTask(() => {
@@ -79,7 +79,7 @@ describe('Event Timing API', () => {
     const callback = jest.fn();
 
     const observer = new PerformanceObserver(callback);
-    observer.observe({entryTypes: ['event']});
+    observer.observe({type: 'event', durationThreshold: 0});
 
     const SIMULATED_PROCESSING_DELAY = 50;
 
@@ -132,7 +132,7 @@ describe('Event Timing API', () => {
     const callback = jest.fn();
 
     const observer = new PerformanceObserver(callback);
-    observer.observe({entryTypes: ['event']});
+    observer.observe({type: 'event', durationThreshold: 0});
 
     function MyComponent() {
       const [count, setCount] = useState(0);
@@ -188,7 +188,7 @@ describe('Event Timing API', () => {
     const callback = jest.fn();
 
     const observer = new PerformanceObserver(callback);
-    observer.observe({entryTypes: ['event']});
+    observer.observe({type: 'event', durationThreshold: 0});
 
     let eventTimeStamp;
 
@@ -341,6 +341,52 @@ describe('Event Timing API', () => {
       expect(callback).toHaveBeenCalledTimes(1);
     });
 
+    it('defaults to 104ms for event entries per W3C spec', () => {
+      const callback = jest.fn();
+
+      const observer = new PerformanceObserver(callback);
+      observer.observe({type: 'event'});
+
+      let forceDelay = false;
+
+      function MyComponent() {
+        const [count, setCount] = useState(0);
+
+        return (
+          <View
+            onClick={event => {
+              if (forceDelay) {
+                sleep(104);
+              }
+              setCount(count + 1);
+            }}>
+            <Text>{count}</Text>
+          </View>
+        );
+      }
+
+      const root = Fantom.createRoot();
+      Fantom.runTask(() => {
+        root.render(<MyComponent />);
+      });
+
+      const element = nullthrows(
+        root.document.documentElement.firstElementChild,
+      );
+
+      expect(callback).not.toHaveBeenCalled();
+
+      Fantom.dispatchNativeEvent(element, 'click');
+
+      expect(callback).toHaveBeenCalledTimes(0);
+
+      forceDelay = true;
+
+      Fantom.dispatchNativeEvent(element, 'click');
+
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
     it('throws when used together with `entryTypes`', () => {
       const observer = new PerformanceObserver(() => {});
 

packages/rn-tester/js/examples/Performance/PerformanceApiExample.js

@@ -143,7 +143,7 @@ function PerformanceObserverEventTimingExample(): React.Node {
       setEntries(newEntries);
     });
 
-    observer.observe({type: 'event'});
+    observer.observe({type: 'event', durationThreshold: 0});
 
     return () => observer.disconnect();
   }, []);