fix(replay): Fix incorrect uncompressed recording size due to encoding (#6740)

For uncompressed payloads, we were potentially sending the incorrect size due to encoding issues. Instead encode to UTF8 when determining the payload size. Note that `TextEncoder` mostly overlaps with `MutationObserver` support *except* for IE11. So we will not be supporting IE11.

Author: billyvg

packages/replay/jest.setup.ts

@@ -1,12 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { getCurrentHub } from '@sentry/core';
 import type { ReplayRecordingData, Transport } from '@sentry/types';
+import {TextEncoder} from 'util';
 
 import type { ReplayContainer, Session } from './src/types';
 
 // @ts-ignore TS error, this is replaced in prod builds bc of rollup
 global.__SENTRY_REPLAY_VERSION__ = 'version:Test';
 
+(global as any).TextEncoder = TextEncoder;
+
 type MockTransport = jest.MockedFunction<Transport['send']>;
 
 jest.mock('./src/util/isBrowser', () => {

packages/replay/src/util/createReplayEnvelope.ts

@@ -18,7 +18,11 @@ export function createReplayEnvelope(
       [
         {
           type: 'replay_recording',
-          length: recordingData.length,
+          // If string then we need to encode to UTF8, otherwise will have
+          // wrong size. TextEncoder has similar browser support to
+          // MutationObserver, although it does not accept IE11.
+          length:
+            typeof recordingData === 'string' ? new TextEncoder().encode(recordingData).length : recordingData.length,
         },
         recordingData,
       ],

packages/utils/src/envelope.ts

@@ -53,6 +53,9 @@ export function forEachEnvelopeItem<E extends Envelope>(
   });
 }
 
+/**
+ * Encode a string to UTF8.
+ */
 function encodeUTF8(input: string, textEncoder?: TextEncoderInternal): Uint8Array {
   const utf8 = textEncoder || new TextEncoder();
   return utf8.encode(input);