ref(perf): Add perf asset collection

static/app/utils/performanceForSentry.tsx

@@ -309,3 +309,82 @@ export const VisuallyCompleteWithData = ({
     </Profiler>
   );
 };
+
+interface OpAssetMeasurementDefinition {
+  key: string;
+}
+
+const OP_ASSET_MEASUREMENT_MAP: Record<string, OpAssetMeasurementDefinition> = {
+  'resource.script': {
+    key: 'script',
+  },
+  'resource.css': {
+    key: 'css',
+  },
+  'resource.link': {
+    key: 'link',
+  },
+  'resource.img': {
+    key: 'img',
+  },
+};
+const ASSET_MEASUREMENT_ALL = 'allResources';
+
+export const MeasureAssetsOnTransaction = ({children}: {children: ReactNode}) => {
+  useEffect(() => {
+    try {
+      const transaction: any = getCurrentSentryReactTransaction(); // Using any to override types for private api.
+      if (!transaction) {
+        return;
+      }
+
+      transaction.registerBeforeFinishCallback((t: Transaction) => {
+        const spans: any[] = (t as any).spanRecorder?.spans;
+        const measurements = (t as any)._measurements;
+
+        if (!spans) {
+          return;
+        }
+
+        if (measurements[ASSET_MEASUREMENT_ALL]) {
+          return;
+        }
+
+        let allTransfered = 0;
+        let allEncoded = 0;
+        let allCount = 0;
+
+        for (const [op, definition] of Object.entries(OP_ASSET_MEASUREMENT_MAP)) {
+          const filtered = spans.filter(s => s.op === op);
+          const count = filtered.length;
+          const transfered = filtered.reduce(
+            (acc, curr) => acc + curr.data['Transfer Size'] ?? 0,
+            0
+          );
+          const encoded = filtered.reduce(
+            (acc, curr) => acc + curr.data['Encoded Body Size'] ?? 0,
+            0
+          );
+
+          if (op === 'resource.script') {
+            t.setMeasurement(`assets.${definition.key}.encoded`, encoded, '');
+            t.setMeasurement(`assets.${definition.key}.transfer`, transfered, '');
+            t.setMeasurement(`assets.${definition.key}.count`, count, '');
+          }
+
+          allCount += count;
+          allTransfered += transfered;
+          allEncoded += encoded;
+        }
+
+        t.setMeasurement(`${ASSET_MEASUREMENT_ALL}.encoded`, allEncoded, '');
+        t.setMeasurement(`${ASSET_MEASUREMENT_ALL}.transfer`, allTransfered, '');
+        t.setMeasurement(`${ASSET_MEASUREMENT_ALL}.count`, allCount, '');
+      });
+    } catch (_) {
+      // Defensive catch since this code is auxiliary.
+    }
+  }, []);
+
+  return <Fragment>{children}</Fragment>;
+};

static/app/views/performance/content.tsx

@@ -13,6 +13,7 @@ import {PageFilters, Project} from 'sentry/types';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
 import {PerformanceEventViewProvider} from 'sentry/utils/performance/contexts/performanceEventViewContext';
+import {MeasureAssetsOnTransaction} from 'sentry/utils/performanceForSentry';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePrevious from 'sentry/utils/usePrevious';
@@ -159,24 +160,26 @@ function PerformanceContent({selection, location, demoMode}: Props) {
               },
             }}
           >
-            <PerformanceLanding
-              eventView={eventView}
-              setError={setError}
-              handleSearch={handleSearch}
-              handleTrendsClick={() =>
-                handleTrendsClick({
-                  location,
-                  organization,
-                  projectPlatforms: getSelectedProjectPlatforms(location, projects),
-                })
-              }
-              onboardingProject={onboardingProject}
-              organization={organization}
-              location={location}
-              projects={projects}
-              selection={selection}
-              withStaticFilters={withStaticFilters}
-            />
+            <MeasureAssetsOnTransaction>
+              <PerformanceLanding
+                eventView={eventView}
+                setError={setError}
+                handleSearch={handleSearch}
+                handleTrendsClick={() =>
+                  handleTrendsClick({
+                    location,
+                    organization,
+                    projectPlatforms: getSelectedProjectPlatforms(location, projects),
+                  })
+                }
+                onboardingProject={onboardingProject}
+                organization={organization}
+                location={location}
+                projects={projects}
+                selection={selection}
+                withStaticFilters={withStaticFilters}
+              />
+            </MeasureAssetsOnTransaction>
           </PageFiltersContainer>
         </MEPSettingProvider>
       </PerformanceEventViewProvider>