From d71da6190a2b20ebf8aa1b833daf1253f6fdcdd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@meta.com>
Date: Mon, 12 Jun 2023 09:11:58 -0700
Subject: [PATCH] Define toJSON method in PerformanceEventTiming to show all
 fields properly when using console.log (#37808)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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
---
 .../WebPerformance/PerformanceEntry.js        | 15 +++++++++------
 .../WebPerformance/PerformanceEventTiming.js  | 19 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/react-native/Libraries/WebPerformance/PerformanceEntry.js b/packages/react-native/Libraries/WebPerformance/PerformanceEntry.js
index bc2cadff20209d..9c855422af86fc 100644
--- a/packages/react-native/Libraries/WebPerformance/PerformanceEntry.js
+++ b/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,
diff --git a/packages/react-native/Libraries/WebPerformance/PerformanceEventTiming.js b/packages/react-native/Libraries/WebPerformance/PerformanceEventTiming.js
index a741f494856657..609f5bc1041857 100644
--- a/packages/react-native/Libraries/WebPerformance/PerformanceEventTiming.js
+++ b/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,
+    };
+  }
 }