Define toJSON method in PerformanceEventTiming to show all fields pro…

…perly when using console.log (#37808)

Summary:
Pull Request resolved: #37808

When passing entries of type "event" to `console.log` we only see the fields defined in the base `PerformanceEntry` class because it defines a `toJSON` method but the `PerformanceEventTiming` subclass doesn't.

This implements the method in that class too to improve debuggability (while also making it more spec compliant).

Changelog: [internal]

Reviewed By: rshest

Differential Revision: D46597764

fbshipit-source-id: ca6fba3fdbb74a4f767eebc647681e5b65ba65d8

packages/react-native/Libraries/WebPerformance/PerformanceEntry.js

@@ -11,6 +11,14 @@
 export type HighResTimeStamp = number;
 export type PerformanceEntryType = 'mark' | 'measure' | 'event';
 
+export type PerformanceEntryJSON = {
+  name: string,
+  entryType: PerformanceEntryType,
+  startTime: HighResTimeStamp,
+  duration: HighResTimeStamp,
+  ...
+};
+
 export const ALWAYS_LOGGED_ENTRY_TYPES: $ReadOnlyArray<PerformanceEntryType> = [
   'mark',
   'measure',
@@ -34,12 +42,7 @@ export class PerformanceEntry {
     this.duration = init.duration;
   }
 
-  toJSON(): {
-    name: string,
-    entryType: PerformanceEntryType,
-    startTime: HighResTimeStamp,
-    duration: HighResTimeStamp,
-  } {
+  toJSON(): PerformanceEntryJSON {
     return {
       name: this.name,
       entryType: this.entryType,

packages/react-native/Libraries/WebPerformance/PerformanceEventTiming.js

@@ -8,10 +8,18 @@
  * @flow strict
  */
 
-import type {HighResTimeStamp} from './PerformanceEntry';
+import type {HighResTimeStamp, PerformanceEntryJSON} from './PerformanceEntry';
 
 import {PerformanceEntry} from './PerformanceEntry';
 
+export type PerformanceEventTimingJSON = {
+  ...PerformanceEntryJSON,
+  processingStart: HighResTimeStamp,
+  processingEnd: HighResTimeStamp,
+  interactionId: number,
+  ...
+};
+
 export class PerformanceEventTiming extends PerformanceEntry {
   processingStart: HighResTimeStamp;
   processingEnd: HighResTimeStamp;
@@ -35,4 +43,13 @@ export class PerformanceEventTiming extends PerformanceEntry {
     this.processingEnd = init.processingEnd ?? 0;
     this.interactionId = init.interactionId ?? 0;
   }
+
+  toJSON(): PerformanceEventTimingJSON {
+    return {
+      ...super.toJSON(),
+      processingStart: this.processingStart,
+      processingEnd: this.processingEnd,
+      interactionId: this.interactionId,
+    };
+  }
 }