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

Summary:

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]

Differential Revision: D94657907

Author: huntie

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

@@ -7,10 +7,12 @@
 
 package com.facebook.react.devsupport.inspector
 
+import java.nio.ByteBuffer
+
 internal data class FrameTimingSequence(
     val id: Int,
     val threadId: Int,
     val beginTimestamp: Long,
     val endTimestamp: Long,
-    val screenshot: String? = null,
+    val screenshot: ByteBuffer? = null,
 )

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

@@ -12,12 +12,12 @@ 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
 import com.facebook.proguard.annotations.DoNotStripAny
 import java.io.ByteArrayOutputStream
+import java.nio.ByteBuffer
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
@@ -109,7 +109,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: (ByteBuffer?) -> Unit) {
     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {
       callback(null)
       return
@@ -143,7 +143,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,
+  ): ByteBuffer? {
     var scaledBitmap: Bitmap? = null
     return try {
       val density = window.context.resources.displayMetrics.density
@@ -155,9 +160,15 @@ internal class FrameTimingsObserver(
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) Bitmap.CompressFormat.WEBP_LOSSY
           else Bitmap.CompressFormat.JPEG
 
-      ByteArrayOutputStream().use { outputStream ->
+      // 64 KB as an initial ByteArray capacity, to avoid unnecessary resizing
+      ByteArrayOutputStream(65536).use { outputStream ->
         scaledBitmap.compress(compressFormat, SCREENSHOT_QUALITY, outputStream)
-        Base64.encodeToString(outputStream.toByteArray(), Base64.NO_WRAP)
+        val bytes = outputStream.toByteArray()
+        // Send exact sized ByteBuffer
+        ByteBuffer.allocateDirect(bytes.size).apply {
+          put(bytes)
+          flip()
+        }
       }
     } catch (e: Exception) {
       null

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,19 @@ 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<jni::JByteBuffer>("screenshot");
     auto javaScreenshot = getFieldValue(field);
     if (javaScreenshot) {
-      auto jstring = jni::static_ref_cast<jni::JString>(javaScreenshot);
-      return jstring->toStdString();
+      auto byteBuffer = jni::static_ref_cast<jni::JByteBuffer>(javaScreenshot);
+      auto data = byteBuffer->getDirectBytes();
+      auto size = byteBuffer->getDirectSize();
+      if (data != nullptr && size > 0) {
+        std::vector<uint8_t> result(size);
+        std::memcpy(result.data(), data, size);
+        return result;
+      }
     }
     return std::nullopt;
   }

packages/react-native/ReactAndroid/src/main/jni/third-party/folly/CMakeLists.txt

@@ -38,6 +38,7 @@ SET(folly_runtime_SRC
         folly/detail/Futex.cpp
         folly/detail/SplitStringSimd.cpp
         folly/detail/UniqueInstance.cpp
+        folly/base64.cpp
         folly/hash/SpookyHashV2.cpp
         folly/json/dynamic.cpp
         folly/json/json_pointer.cpp

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/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/TraceEventGenerator.cpp

@@ -9,6 +9,8 @@
 #include "Timing.h"
 #include "TracingCategory.h"
 
+#include <folly/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 = folly::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);

packages/react-native/third-party-podspecs/RCT-Folly.podspec

@@ -63,6 +63,7 @@ Pod::Spec.new do |spec|
                       'folly/container/*.h',
                       'folly/container/detail/*.h',
                       'folly/detail/*.h',
+                      'folly/detail/base64_detail/*.h',
                       'folly/functional/*.h',
                       'folly/hash/*.h',
                       'folly/json/*.h',
@@ -82,6 +83,7 @@ Pod::Spec.new do |spec|
                         'folly/container/*.h',
                         'folly/container/detail/*.h',
                         'folly/detail/*.h',
+                        'folly/detail/base64_detail/*.h',
                         'folly/functional/*.h',
                         'folly/hash/*.h',
                         'folly/json/*.h',

private/react-native-fantom/tester/third-party/folly/CMakeLists.txt

@@ -38,6 +38,7 @@ SET(folly_runtime_SRC
         folly/detail/Futex.cpp
         folly/detail/SplitStringSimd.cpp
         folly/detail/UniqueInstance.cpp
+        folly/base64.cpp
         folly/hash/SpookyHashV2.cpp
         folly/io/IOBuf.cpp
         folly/json/dynamic.cpp