Move screenshot Base64 encoding to trace serialization (facebook#55803)

Summary:
Pull Request resolved: facebook#55803

Refactor Android FrameTimings to reduce memory usage in trace buffer. Binary data instead of Base64 should be ~25% smaller, and eliminates string copies during JNI transfer.

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D94657907

fbshipit-source-id: c4a183ff00c519fd1545992340fd445530abab99

Author: huntie

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/inspector/FrameTimingSequence.kt

@@ -12,5 +12,5 @@ internal data class FrameTimingSequence(
     val threadId: Int,
     val beginTimestamp: Long,
     val endTimestamp: Long,
-    val screenshot: String? = null,
+    val screenshot: ByteArray? = null,
 )

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/inspector/FrameTimingsObserver.kt

@@ -12,7 +12,6 @@ import android.os.Build
 import android.os.Handler
 import android.os.Looper
 import android.os.Process
-import android.util.Base64
 import android.view.FrameMetrics
 import android.view.PixelCopy
 import android.view.Window
@@ -109,7 +108,7 @@ internal class FrameTimingsObserver(
   }
 
   // Must be called from the main thread so that PixelCopy captures the current frame.
-  private fun captureScreenshot(callback: (String?) -> Unit) {
+  private fun captureScreenshot(callback: (ByteArray?) -> Unit) {
     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
       callback(null)
       return
@@ -143,7 +142,12 @@ internal class FrameTimingsObserver(
     )
   }
 
-  private fun encodeScreenshot(window: Window, bitmap: Bitmap, width: Int, height: Int): String? {
+  private fun encodeScreenshot(
+      window: Window,
+      bitmap: Bitmap,
+      width: Int,
+      height: Int,
+  ): ByteArray? {
     var scaledBitmap: Bitmap? = null
     return try {
       val density = window.context.resources.displayMetrics.density
@@ -155,9 +159,9 @@ internal class FrameTimingsObserver(
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) Bitmap.CompressFormat.WEBP_LOSSY
           else Bitmap.CompressFormat.JPEG
 
-      ByteArrayOutputStream().use { outputStream ->
+      ByteArrayOutputStream(SCREENSHOT_OUTPUT_SIZE_HINT).use { outputStream ->
         scaledBitmap.compress(compressFormat, SCREENSHOT_QUALITY, outputStream)
-        Base64.encodeToString(outputStream.toByteArray(), Base64.NO_WRAP)
+        outputStream.toByteArray()
       }
     } catch (e: Exception) {
       null
@@ -170,5 +174,10 @@ internal class FrameTimingsObserver(
   companion object {
     private const val SCREENSHOT_SCALE_FACTOR = 0.75f
     private const val SCREENSHOT_QUALITY = 80
+
+    // Capacity hint for the ByteArrayOutputStream used during bitmap
+    // compression. Sized slightly above typical compressed output to minimise
+    // internal buffer resizing.
+    private const val SCREENSHOT_OUTPUT_SIZE_HINT = 65536 // 64 KB
   }
 }

packages/react-native/ReactAndroid/src/main/jni/react/runtime/jni/JReactHostInspectorTarget.h

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <fbjni/ByteBuffer.h>
 #include <fbjni/fbjni.h>
 
 #include <jsinspector-modern/HostTarget.h>
@@ -98,13 +99,17 @@ struct JFrameTimingSequence : public jni::JavaClass<JFrameTimingSequence> {
         std::chrono::steady_clock::time_point(std::chrono::nanoseconds(getFieldValue(field))));
   }
 
-  std::optional<std::string> getScreenshot() const
+  std::optional<std::vector<uint8_t>> getScreenshot() const
   {
-    auto field = javaClassStatic()->getField<jstring>("screenshot");
+    auto field = javaClassStatic()->getField<jbyteArray>("screenshot");
     auto javaScreenshot = getFieldValue(field);
     if (javaScreenshot) {
-      auto jstring = jni::static_ref_cast<jni::JString>(javaScreenshot);
-      return jstring->toStdString();
+      auto size = static_cast<size_t>(javaScreenshot->size());
+      if (size > 0) {
+        std::vector<uint8_t> result(size);
+        javaScreenshot->getRegion(0, javaScreenshot->size(), reinterpret_cast<jbyte *>(result.data()));
+        return result;
+      }
     }
     return std::nullopt;
   }

packages/react-native/ReactCommon/jsinspector-modern/tests/TracingTest.cpp

@@ -103,7 +103,7 @@ TEST_F(TracingTest, EmitsScreenshotEventWhenScreenshotValuePassed) {
           11, // threadId
           now,
           now + HighResDuration::fromNanoseconds(50),
-          "base64EncodedScreenshotData"));
+          std::vector<uint8_t>{}));
 
   auto allTraceEvents = endTracingAndCollectEvents();
   EXPECT_THAT(allTraceEvents, Contains(AtJsonPtr("/name", "Screenshot")));

packages/react-native/ReactCommon/jsinspector-modern/tracing/CMakeLists.txt

@@ -22,6 +22,7 @@ target_link_libraries(jsinspector_tracing
         jsinspector_network
         oscompat
         react_timing
+        react_utils
 )
 target_compile_reactnative_options(jsinspector_tracing PRIVATE)
 target_compile_options(jsinspector_tracing PRIVATE -Wpedantic)

packages/react-native/ReactCommon/jsinspector-modern/tracing/FrameTimingSequence.h

@@ -11,6 +11,10 @@
 
 #include <react/timing/primitives.h>
 
+#include <cstdint>
+#include <optional>
+#include <vector>
+
 namespace facebook::react::jsinspector_modern::tracing {
 
 using FrameSequenceId = uint64_t;
@@ -26,7 +30,7 @@ struct FrameTimingSequence {
       ThreadId threadId,
       HighResTimeStamp beginTimestamp,
       HighResTimeStamp endTimestamp,
-      std::optional<std::string> screenshot = std::nullopt)
+      std::optional<std::vector<uint8_t>> screenshot = std::nullopt)
       : id(id),
         threadId(threadId),
         beginTimestamp(beginTimestamp),
@@ -49,9 +53,9 @@ struct FrameTimingSequence {
   HighResTimeStamp endTimestamp;
 
   /**
-   * Optional screenshot data (base64 encoded) captured during the frame.
+   * Optional screenshot data captured during the frame.
    */
-  std::optional<std::string> screenshot;
+  std::optional<std::vector<uint8_t>> screenshot;
 };
 
 } // namespace facebook::react::jsinspector_modern::tracing

packages/react-native/ReactCommon/jsinspector-modern/tracing/React-jsinspectortracing.podspec

@@ -47,6 +47,7 @@ Pod::Spec.new do |s|
   s.dependency "React-jsi"
   s.dependency "React-oscompat"
   s.dependency "React-timing"
+  add_dependency(s, "React-utils", :additional_framework_paths => ["react/utils/platform/ios"])
 
   if use_hermes()
     s.dependency "hermes-engine"

packages/react-native/ReactCommon/jsinspector-modern/tracing/TraceEventGenerator.cpp

@@ -9,6 +9,8 @@
 #include "Timing.h"
 #include "TracingCategory.h"
 
+#include <react/utils/Base64.h>
+
 namespace facebook::react::jsinspector_modern::tracing {
 
 /* static */ TraceEvent TraceEventGenerator::createSetLayerTreeIdEvent(
@@ -70,14 +72,19 @@ TraceEventGenerator::createFrameTimingsEvents(
 /* static */ TraceEvent TraceEventGenerator::createScreenshotEvent(
     FrameSequenceId frameSequenceId,
     int sourceId,
-    std::string&& snapshot,
+    std::vector<uint8_t>&& snapshot,
     HighResTimeStamp expectedDisplayTime,
     ProcessId processId,
     ThreadId threadId) {
-  folly::dynamic args = folly::dynamic::object("snapshot", std::move(snapshot))(
-      "source_id", sourceId)("frame_sequence", frameSequenceId)(
-      "expected_display_time",
-      highResTimeStampToTracingClockTimeStamp(expectedDisplayTime));
+  // Convert binary data to string for Base64 encoding
+  std::string snapshotBytes(snapshot.begin(), snapshot.end());
+  std::string base64Snapshot = base64Encode(snapshotBytes);
+
+  folly::dynamic args =
+      folly::dynamic::object("snapshot", std::move(base64Snapshot))(
+          "source_id", sourceId)("frame_sequence", frameSequenceId)(
+          "expected_display_time",
+          highResTimeStampToTracingClockTimeStamp(expectedDisplayTime));
 
   return TraceEvent{
       .name = "Screenshot",

packages/react-native/ReactCommon/jsinspector-modern/tracing/TraceEventGenerator.h

@@ -12,7 +12,9 @@
 #include <jsinspector-modern/tracing/FrameTimingSequence.h>
 #include <react/timing/primitives.h>
 
+#include <cstdint>
 #include <utility>
+#include <vector>
 
 namespace facebook::react::jsinspector_modern::tracing {
 
@@ -49,7 +51,7 @@ class TraceEventGenerator {
   static TraceEvent createScreenshotEvent(
       FrameSequenceId frameSequenceId,
       int sourceId,
-      std::string &&snapshot,
+      std::vector<uint8_t> &&snapshot,
       HighResTimeStamp expectedDisplayTime,
       ProcessId processId,
       ThreadId threadId);