feat(utils): Allow text encoder/decoder polyfill from global __SENTRY__ (#11283)

The TextEncoder option was removed in
#10701 because all of
the newly supported platforms support TextEncoder/Decoder.

Sadly that's not true for React Native, yet. TextEncoder will be
included in the next release of RN with Hermes. See the PR
facebook/hermes@3863a36#diff-4bf4a4ab271f254baf2097be87be98333ec69eb2d41e074b81147656c33145eb

We can not drop support of all the previous RN versions in the RN SDK v6
(the next major).

To avoid passing the encoder option around the SDK, I propose adding
polyfill properties to the global __SENTRY__ object which RN can use.

Author: krystofwoldrich

packages/utils/src/envelope.ts

@@ -16,6 +16,7 @@ import type {
 import { dsnToString } from './dsn';
 import { normalize } from './normalize';
 import { dropUndefinedKeys } from './object';
+import { GLOBAL_OBJ } from './worldwide';
 
 /**
  * Creates an envelope.
@@ -71,14 +72,18 @@ export function envelopeContainsItemType(envelope: Envelope, types: EnvelopeItem
  * Encode a string to UTF8 array.
  */
 function encodeUTF8(input: string): Uint8Array {
-  return new TextEncoder().encode(input);
+  return GLOBAL_OBJ.__SENTRY__ && GLOBAL_OBJ.__SENTRY__.encodePolyfill
+    ? GLOBAL_OBJ.__SENTRY__.encodePolyfill(input)
+    : new TextEncoder().encode(input);
 }
 
 /**
  * Decode a UTF8 array to string.
  */
 function decodeUTF8(input: Uint8Array): string {
-  return new TextDecoder().decode(input);
+  return GLOBAL_OBJ.__SENTRY__ && GLOBAL_OBJ.__SENTRY__.decodePolyfill
+    ? GLOBAL_OBJ.__SENTRY__.decodePolyfill(input)
+    : new TextDecoder().decode(input);
 }
 
 /**

packages/utils/src/worldwide.ts

@@ -57,6 +57,10 @@ export interface InternalGlobal {
     defaultCurrentScope: Scope | undefined;
     defaultIsolationScope: Scope | undefined;
     globalMetricsAggregators: WeakMap<Client, MetricsAggregator> | undefined;
+    /** Overwrites TextEncoder used in `@sentry/utils`, need for `react-native@0.73` and older */
+    encodePolyfill?: (input: string) => Uint8Array;
+    /** Overwrites TextDecoder used in `@sentry/utils`, need for `react-native@0.73` and older */
+    decodePolyfill?: (input: Uint8Array) => string;
   };
   /**
    * Raw module metadata that is injected by bundler plugins.

packages/utils/test/envelope.test.ts

@@ -7,6 +7,8 @@ import {
   parseEnvelope,
   serializeEnvelope,
 } from '../src/envelope';
+import type { InternalGlobal } from '../src/worldwide';
+import { GLOBAL_OBJ } from '../src/worldwide';
 
 describe('envelope', () => {
   describe('createEnvelope()', () => {
@@ -23,6 +25,10 @@ describe('envelope', () => {
   });
 
   describe('serializeEnvelope and parseEnvelope', () => {
+    afterEach(() => {
+      delete (GLOBAL_OBJ as Partial<InternalGlobal>).__SENTRY__;
+    });
+
     it('serializes an envelope', () => {
       const env = createEnvelope<EventEnvelope>({ event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2', sent_at: '123' }, []);
       const serializedEnvelope = serializeEnvelope(env);
@@ -32,7 +38,29 @@ describe('envelope', () => {
       expect(headers).toEqual({ event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2', sent_at: '123' });
     });
 
-    it('serializes an envelope with attachments', () => {
+    test.each([
+      {
+        name: 'with TextEncoder/Decoder polyfill',
+        before: () => {
+          GLOBAL_OBJ.__SENTRY__ = {} as InternalGlobal['__SENTRY__'];
+          GLOBAL_OBJ.__SENTRY__.encodePolyfill = jest.fn<Uint8Array, [string]>((input: string) =>
+            new TextEncoder().encode(input),
+          );
+          GLOBAL_OBJ.__SENTRY__.decodePolyfill = jest.fn<string, [Uint8Array]>((input: Uint8Array) =>
+            new TextDecoder().decode(input),
+          );
+        },
+        after: () => {
+          expect(GLOBAL_OBJ.__SENTRY__.encodePolyfill).toHaveBeenCalled();
+          expect(GLOBAL_OBJ.__SENTRY__.decodePolyfill).toHaveBeenCalled();
+        },
+      },
+      {
+        name: 'with default TextEncoder/Decoder',
+      },
+    ])('serializes an envelope with attachments $name', ({ before, after }) => {
+      before?.();
+
       const items: EventEnvelope[1] = [
         [{ type: 'event' }, { event_id: 'aa3ff046696b4bc6b609ce6d28fde9e2' }],
         [{ type: 'attachment', filename: 'bar.txt', length: 6 }, Uint8Array.from([1, 2, 3, 4, 5, 6])],
@@ -44,8 +72,6 @@ describe('envelope', () => {
         items,
       );
 
-      expect.assertions(6);
-
       const serializedEnvelope = serializeEnvelope(env);
       expect(serializedEnvelope).toBeInstanceOf(Uint8Array);
 
@@ -61,6 +87,8 @@ describe('envelope', () => {
         { type: 'attachment', filename: 'foo.txt', length: 6 },
         Uint8Array.from([7, 8, 9, 10, 11, 12]),
       ]);
+
+      after?.();
     });
 
     it("doesn't throw when being passed a an envelope that contains a circular item payload", () => {