chore(encoding): Use global TextEncode when available (#4874)

Author: krystofwoldrich

CHANGELOG.md

@@ -18,6 +18,7 @@
 ### Major Changes
 
 - `Sentry.captureUserFeedback` removed, use `Sentry.captureFeedback` instead ([#4855](https://github.com/getsentry/sentry-react-native/pull/4855))
+- Use global `TextEncoder` (available with Hermes in React Native 0.74 or higher) to greatly improve envelope encoding performance. ([#4874](https://github.com/getsentry/sentry-react-native/pull/4874))
 
 ### Changes
 

packages/core/src/js/transports/encodePolyfill.ts

@@ -1,13 +1,30 @@
-import { getMainCarrier, SDK_VERSION } from '@sentry/core';
+import { getSentryCarrier } from '../utils/carrier';
+import { RN_GLOBAL_OBJ } from '../utils/worldwide';
 import { utf8ToBytes } from '../vendor';
 
 export const useEncodePolyfill = (): void => {
-  // Based on https://github.com/getsentry/sentry-javascript/blob/f0fc41f6166857cd97a695f5cc9a18caf6a0bf43/packages/core/src/carrier.ts#L49
-  const carrier = getMainCarrier();
-  const __SENTRY__ = (carrier.__SENTRY__ = carrier.__SENTRY__ || {});
-  (__SENTRY__[SDK_VERSION] = __SENTRY__[SDK_VERSION] || {}).encodePolyfill = encodePolyfill;
+  const carrier = getSentryCarrier();
+
+  if (RN_GLOBAL_OBJ.TextEncoder) {
+    // Hermes for RN 0.74 and later includes native TextEncoder
+    // https://github.com/facebook/hermes/commit/8fb0496d426a8e50d00385148d5fb498a6daa312
+    carrier.encodePolyfill = globalEncodeFactory(RN_GLOBAL_OBJ.TextEncoder);
+  } else {
+    carrier.encodePolyfill = encodePolyfill;
+  }
 };
 
+/*
+ * The default encode polyfill is available in Hermes for RN 0.74 and later.
+ * https://github.com/facebook/hermes/commit/8fb0496d426a8e50d00385148d5fb498a6daa312
+ */
+export const globalEncodeFactory = (Encoder: EncoderClass) => (text: string) => new Encoder().encode(text);
+
+type EncoderClass = Required<typeof RN_GLOBAL_OBJ>['TextEncoder'];
+
+/*
+ * Encode polyfill runs in JS and might cause performance issues when processing large payloads. (~2+ MB)
+ */
 export const encodePolyfill = (text: string): Uint8Array => {
   const bytes = new Uint8Array(utf8ToBytes(text));
   return bytes;

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

@@ -0,0 +1,13 @@
+import { getMainCarrier, SDK_VERSION as CORE_SDK_VERSION } from '@sentry/core';
+
+/*
+ * Will either get the existing sentry carrier, or create a new one.
+ * Based on https://github.com/getsentry/sentry-javascript/blob/f0fc41f6166857cd97a695f5cc9a18caf6a0bf43/packages/core/src/carrier.ts#L49
+ */
+export const getSentryCarrier = (): SentryCarrier => {
+  const carrier = getMainCarrier();
+  const __SENTRY__ = (carrier.__SENTRY__ = carrier.__SENTRY__ || {});
+  return (__SENTRY__[CORE_SDK_VERSION] = __SENTRY__[CORE_SDK_VERSION] || {});
+};
+
+type SentryCarrier = Required<ReturnType<typeof getMainCarrier>>['__SENTRY__'][string];

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

@@ -36,8 +36,9 @@ export interface ReactNativeInternalGlobal extends InternalGlobal {
 }
 
 type TextEncoder = {
-  new (): TextEncoder;
-  encode(input?: string): Uint8Array;
+  new (): {
+    encode(input?: string): Uint8Array;
+  };
 };
 
 /** Get's the global object for the current JavaScript runtime */

packages/core/test/transports/encodePolyfill.test.ts

@@ -0,0 +1,33 @@
+import { SDK_VERSION } from '@sentry/core';
+import { encodePolyfill, useEncodePolyfill } from '../../src/js/transports/encodePolyfill';
+import { RN_GLOBAL_OBJ } from '../../src/js/utils/worldwide';
+
+const OriginalTextEncoder = RN_GLOBAL_OBJ.TextEncoder;
+
+const restoreTextEncoder = (): void => {
+  RN_GLOBAL_OBJ.TextEncoder = OriginalTextEncoder;
+};
+
+describe('useEncodePolyfill', () => {
+  afterEach(() => {
+    restoreTextEncoder();
+  });
+
+  test('should use global encode factory if TextEncoder is available', () => {
+    RN_GLOBAL_OBJ.TextEncoder = MockedTextEncoder;
+    useEncodePolyfill();
+    expect(RN_GLOBAL_OBJ.__SENTRY__?.[SDK_VERSION]?.encodePolyfill?.('')).toEqual(new Uint8Array([1, 2, 3]));
+  });
+
+  test('should use encode polyfill if TextEncoder is not available', () => {
+    RN_GLOBAL_OBJ.TextEncoder = undefined;
+    useEncodePolyfill();
+    expect(RN_GLOBAL_OBJ.__SENTRY__?.[SDK_VERSION]?.encodePolyfill).toBe(encodePolyfill);
+  });
+});
+
+class MockedTextEncoder {
+  public encode(_text: string): Uint8Array {
+    return new Uint8Array([1, 2, 3]);
+  }
+}