add detailed resource loading perf metrics

facebookexperimental · Jun 1, 2024 · 41fc07c · 41fc07c
1 parent eb2fa0d
commit 41fc07c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/front_end/core/host/RNPerfMetrics.ts b/front_end/core/host/RNPerfMetrics.ts
@@ -3,6 +3,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {type ParsedURL} from '../common/ParsedURL';
+
 import {type DeveloperResourceLoaded} from './UserMetrics';
 
 export type RNReliabilityEventListener = (event: DecoratedReactNativeChromeDevToolsEvent) => void;
@@ -126,22 +128,23 @@ class RNPerfMetrics {
     this.sendEvent({eventName: 'Connection.DebuggingTerminated', params: {reason}});
   }
 
-  developerResourceLoadingStarted(url: string): void {
-    const shortUrl = maybeTruncateDeveloperResourceUrl(url);
-    this.sendEvent({eventName: 'DeveloperResource.LoadingStarted', params: {url: shortUrl}});
+  developerResourceLoadingStarted(parsedURL: ParsedURL, loadingMethod: DeveloperResourceLoaded): void {
+    const url = maybeTruncateDeveloperResourceUrl(parsedURL);
+    this.sendEvent({eventName: 'DeveloperResource.LoadingStarted', params: {url, loadingMethod}});
   }
 
-  developerResourceLoadingFinished(url: string, result: {
+  developerResourceLoadingFinished(parsedURL: ParsedURL, loadingMethod: DeveloperResourceLoaded, result: {
     success: boolean,
     errorDescription?: {
       message?: string|null|undefined,
     },
   }): void {
-    const shortUrl = maybeTruncateDeveloperResourceUrl(url);
+    const url = maybeTruncateDeveloperResourceUrl(parsedURL);
     this.sendEvent({
       eventName: 'DeveloperResource.LoadingFinished',
       params: {
-        url: shortUrl,
+        url,
+        loadingMethod,
         success: result.success,
         errorMessage: result.errorDescription?.message,
       },
@@ -165,9 +168,9 @@ function getPerfTimestamp(): DOMHighResTimeStamp {
   return performance.timeOrigin + performance.now();
 }
 
-const IS_HTTP = new RegExp('^https?://');
-function maybeTruncateDeveloperResourceUrl(url: string): string {
-  return IS_HTTP.test(url) ? url : `${url.slice(0, 100)} …(omitted ${url.length - 100} characters)`;
+function maybeTruncateDeveloperResourceUrl(parsedURL: ParsedURL): string {
+  const {url} = parsedURL;
+  return parsedURL.isHttpOrHttps() ? url : `${url.slice(0, 100)} …(omitted ${url.length - 100} characters)`;
 }
 
 type CommonEventFields = Readonly<{
@@ -217,13 +220,15 @@ export type DeveloperResourceLoadingStartedEvent = Readonly<{
   eventName: 'DeveloperResource.LoadingStarted',
   params: Readonly<{
     url: string,
+    loadingMethod: DeveloperResourceLoaded,
   }>,
 }>;
 
 export type DeveloperResourceLoadingFinishedEvent = Readonly<{
   eventName: 'DeveloperResource.LoadingFinished',
   params: Readonly<{
     url: string,
+    loadingMethod: DeveloperResourceLoaded,
     success: boolean,
     errorMessage: string | null | undefined,
   }>,

diff --git a/front_end/core/sdk/PageResourceLoader.ts b/front_end/core/sdk/PageResourceLoader.ts
@@ -251,10 +251,8 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
     this.dispatchEventToListeners(Events.Update);
     try {
       await this.acquireLoadSlot(initiator.target);
-      Host.rnPerfMetrics.developerResourceLoadingStarted(url);
       const resultPromise = this.dispatchLoad(url, initiator);
       const result = await resultPromise;
-      Host.rnPerfMetrics.developerResourceLoadingFinished(url, result);
       pageResource.errorMessage = result.errorDescription.message;
       pageResource.success = result.success;
       if (result.success) {
@@ -297,26 +295,40 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       try {
         if (initiator.target) {
           Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageViaTarget);
+          Host.rnPerfMetrics.developerResourceLoadingStarted(
+              parsedURL, Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageViaTarget);
           const result = await this.loadFromTarget(initiator.target, initiator.frameId, url);
+          Host.rnPerfMetrics.developerResourceLoadingFinished(
+              parsedURL, Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageViaTarget, result);
           return result;
         }
         const frame = FrameManager.instance().getFrame(initiator.frameId);
         if (frame) {
           Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageViaFrame);
+          Host.rnPerfMetrics.developerResourceLoadingStarted(
+              parsedURL, Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageViaFrame);
           const result = await this.loadFromTarget(frame.resourceTreeModel().target(), initiator.frameId, url);
+          Host.rnPerfMetrics.developerResourceLoadingFinished(
+              parsedURL, Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageViaTarget, result);
           return result;
         }
       } catch (e) {
         if (e instanceof Error) {
           Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageFailure);
           failureReason = e.message;
         }
+        Host.rnPerfMetrics.developerResourceLoadingFinished(
+            parsedURL, Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageFailure,
+            {success: false, errorDescription: {message: failureReason}});
       }
       Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageFallback);
+      Host.rnPerfMetrics.developerResourceLoadingStarted(
+          parsedURL, Host.UserMetrics.DeveloperResourceLoaded.LoadThroughPageFallback);
     } else {
       const code = getLoadThroughTargetSetting().get() ? Host.UserMetrics.DeveloperResourceLoaded.FallbackPerProtocol :
                                                          Host.UserMetrics.DeveloperResourceLoaded.FallbackPerOverride;
       Host.userMetrics.developerResourceLoaded(code);
+      Host.rnPerfMetrics.developerResourceLoadingStarted(parsedURL, code);
     }
 
     const result = await MultitargetNetworkManager.instance().loadResource(url);
@@ -328,6 +340,8 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       result.errorDescription.message =
           `Fetch through target failed: ${failureReason}; Fallback: ${result.errorDescription.message}`;
     }
+    Host.rnPerfMetrics.developerResourceLoadingFinished(
+        parsedURL, Host.UserMetrics.DeveloperResourceLoaded.FallbackAfterFailure, result);
     return result;
   }