Convert uint8Array to Base64 on the native side

Author: antonis

packages/core/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java

@@ -20,6 +20,7 @@
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableMapKeySetIterator;
 import com.facebook.react.bridge.ReadableType;
@@ -1027,6 +1028,15 @@ public void getDataFromUri(String uri, Promise promise) {
     }
   }
 
+  public void encodeToBase64(ReadableArray array, Promise promise) {
+    byte[] bytes = new byte[array.size()];
+    for (int i = 0; i < array.size(); i++) {
+      bytes[i] = (byte) array.getInt(i);
+    }
+    String base64String = android.util.Base64.encodeToString(bytes, android.util.Base64.DEFAULT);
+    promise.resolve(base64String);
+  }
+
   public void crashedLastRun(Promise promise) {
     promise.resolve(Sentry.isCrashedLastRun());
   }

packages/core/android/src/newarch/java/io/sentry/react/RNSentryModule.java

@@ -183,6 +183,11 @@ public void getDataFromUri(String uri, Promise promise) {
     this.impl.getDataFromUri(uri, promise);
   }
 
+  @Override
+  public void encodeToBase64(ReadableArray array, Promise promise) {
+    this.impl.encodeToBase64(array, promise);
+  }
+
   @Override
   public void popTimeToDisplayFor(String key, Promise promise) {
     this.impl.popTimeToDisplayFor(key, promise);

packages/core/android/src/oldarch/java/io/sentry/react/RNSentryModule.java

@@ -157,6 +157,11 @@ public void getDataFromUri(String uri, Promise promise) {
     this.impl.getDataFromUri(uri, promise);
   }
 
+  @ReactMethod
+  public void encodeToBase64(ReadableArray array, Promise promise) {
+    this.impl.encodeToBase64(array, promise);
+  }
+
   @ReactMethod(isBlockingSynchronousMethod = true)
   public WritableMap fetchNativeStackFramesBy(ReadableArray instructionsAddr) {
     // Not used on Android

packages/core/ios/RNSentry.mm

@@ -970,4 +970,28 @@ + (SentryUser *_Nullable)userFrom:(NSDictionary *)userKeys
     return @YES; // The return ensures that the method is synchronous
 }
 
+RCT_EXPORT_METHOD(encodeToBase64
+                  : (NSArray *)array resolver
+                  : (RCTPromiseResolveBlock)resolve rejecter
+                  : (RCTPromiseRejectBlock)reject)
+{
+    NSUInteger count = array.count;
+    uint8_t *bytes = (uint8_t *)malloc(count);
+
+    if (!bytes) {
+        reject(@"encodeToBase64", @"Memory allocation failed", nil);
+        return;
+    }
+
+    for (NSUInteger i = 0; i < count; i++) {
+        bytes[i] = (uint8_t)[array[i] unsignedCharValue];
+    }
+
+    NSData *data = [NSData dataWithBytes:bytes length:count];
+    free(bytes);
+
+    NSString *base64String = [data base64EncodedStringWithOptions:0];
+    resolve(base64String);
+}
+
 @end

packages/core/src/js/NativeRNSentry.ts

@@ -51,6 +51,7 @@ export interface Spec extends TurboModule {
   getDataFromUri(uri: string): Promise<number[]>;
   popTimeToDisplayFor(key: string): Promise<number | undefined | null>;
   setActiveSpanId(spanId: string): boolean;
+  encodeToBase64(data: number[]): Promise<string | undefined | null>;
 }
 
 export type NativeStackFrame = {

packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -17,15 +17,15 @@ import {
 
 import { isWeb, notWeb } from '../utils/environment';
 import type { Screenshot } from '../wrapper';
-import { getDataFromUri } from '../wrapper';
+import { getDataFromUri, NATIVE } from '../wrapper';
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
 import defaultStyles from './FeedbackWidget.styles';
 import { getTheme } from './FeedbackWidget.theme';
 import type { FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackWidgetProps, FeedbackWidgetState, FeedbackWidgetStyles, ImagePickerConfiguration } from './FeedbackWidget.types';
 import { lazyLoadFeedbackIntegration } from './lazy';
 import { getCapturedScreenshot } from './ScreenshotButton';
-import { base64ToUint8Array, feedbackAlertDialog, isValidEmail,uint8ArrayToBase64  } from './utils';
+import { base64ToUint8Array, feedbackAlertDialog, isValidEmail  } from './utils';
 
 /**
  * @beta
@@ -344,9 +344,16 @@ export class FeedbackWidget extends React.Component<FeedbackWidgetProps, Feedbac
   private _setCapturedScreenshot = (screenshot: Screenshot): void => {
     if (screenshot.data != null) {
       logger.debug('Setting captured screenshot:', screenshot.filename);
-      const base64String: string = uint8ArrayToBase64(screenshot.data);
-      const dataUri = `data:${screenshot.contentType};base64,${base64String}`;
-      this.setState({ filename: screenshot.filename, attachment: screenshot.data, attachmentUri: dataUri  });
+      NATIVE.encodeToBase64(screenshot.data).then((base64String) => {
+        if (base64String != null) {
+          const dataUri = `data:${screenshot.contentType};base64,${base64String}`;
+          this.setState({ filename: screenshot.filename, attachment: screenshot.data, attachmentUri: dataUri });
+        } else {
+          logger.error('Failed to read image data from:', screenshot.filename);
+        }
+      }).catch((error) => {
+        logger.error('Failed to read image data from:', screenshot.filename, 'error: ', error);
+      });
     } else {
       logger.error('Failed to read image data from:', screenshot.filename);
     }

packages/core/src/js/feedback/utils.ts

@@ -37,54 +37,6 @@ export const base64ToUint8Array = (base64: string): Uint8Array => {
   return new Uint8Array([...binaryString].map(char => char.charCodeAt(0)));
 };
 
-/**
- * Converts a Uint8Array to a Base64 string
- * @param {Uint8Array} uint8Array - The Uint8Array containing image data
- * @returns {string} - Base64 string representation of the data
- */
-export const uint8ArrayToBase64 = (uint8Array: Uint8Array): string => {
-  /* eslint-disable no-bitwise */
-  let base64 = '';
-  const encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-  const bytes = uint8Array;
-  const byteLength = bytes.byteLength;
-  const byteRemainder = byteLength % 3;
-  const mainLength = byteLength - byteRemainder;
-
-  for (let i = 0; i < mainLength; i = i + 3) {
-    const chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
-
-    // Use bitmasks to extract 6-bit segments from the triplet
-    const a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
-    const b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
-    const c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
-    const d = chunk & 63; // 63 = 2^6 - 1
-
-    // Convert the raw binary segments to the appropriate ASCII encoding
-    base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
-  }
-
-  // Deal with the remaining bytes and padding
-  if (byteRemainder === 1) {
-    const chunk = bytes[mainLength];
-
-    const a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
-    const b = (chunk & 3) << 4; // 3 = 2^2 - 1
-
-    base64 += `${encodings[a] + encodings[b]}==`;
-  } else if (byteRemainder === 2) {
-    const chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
-
-    const a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
-    const b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
-    const c = (chunk & 15) << 2; // 15 = 2^4 - 1
-
-    base64 += `${encodings[a] + encodings[b] + encodings[c]}=`;
-  }
-  /* eslint-enable no-bitwise */
-  return base64;
-};
-
 export const feedbackAlertDialog = (title: string, message: string): void => {
   if (isWeb() && typeof RN_GLOBAL_OBJ.alert !== 'undefined') {
     RN_GLOBAL_OBJ.alert(`${title}\n${message}`);

packages/core/src/js/wrapper.ts

@@ -125,6 +125,8 @@ interface SentryNativeWrapper {
   popTimeToDisplayFor(key: string): Promise<number | undefined | null>;
 
   setActiveSpanId(spanId: string): void;
+
+  encodeToBase64(data: Uint8Array): Promise<string | null>;
 }
 
 const EOL = utf8ToBytes('\n');
@@ -746,6 +748,21 @@ export const NATIVE: SentryNativeWrapper = {
     }
   },
 
+  async encodeToBase64(data: Uint8Array): Promise<string | null> {
+    if (!this.enableNative || !this._isModuleLoaded(RNSentry)) {
+      return Promise.resolve(null);
+    }
+
+    try {
+      const byteArray = Array.from(data);
+      const base64 = await RNSentry.encodeToBase64(byteArray);
+      return base64 || null;
+    } catch (error) {
+      logger.error('Error:', error);
+      return Promise.resolve(null);
+    }
+  },
+
   /**
    * Gets the event from envelopeItem and applies the level filter to the selected event.
    * @param data An envelope item containing the event.

packages/core/test/mockWrapper.ts

@@ -62,6 +62,7 @@ const NATIVE: MockInterface<NativeType> = {
   getDataFromUri: jest.fn(),
   popTimeToDisplayFor: jest.fn(),
   setActiveSpanId: jest.fn(),
+  encodeToBase64: jest.fn(),
 };
 
 NATIVE.isNativeAvailable.mockReturnValue(true);