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

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/src/util/createReplayEnvelope.ts

@@ -1,5 +1,5 @@
 import type { DsnComponents, ReplayEnvelope, ReplayEvent, ReplayRecordingData } from '@sentry/types';
-import { createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader } from '@sentry/utils';
+import { createEnvelope, createEventEnvelopeHeaders, encodeUTF8, getSdkMetadataForEnvelopeHeader } from '@sentry/utils';
 
 /**
  * Create a replay envelope ready to be sent.
@@ -18,7 +18,10 @@ 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' ? encodeUTF8(recordingData).length : recordingData.length,
         },
         recordingData,
       ],

packages/utils/src/envelope.ts

@@ -53,7 +53,7 @@ export function forEachEnvelopeItem<E extends Envelope>(
   });
 }
 
-function encodeUTF8(input: string, textEncoder?: TextEncoderInternal): Uint8Array {
+export function encodeUTF8(input: string, textEncoder?: TextEncoderInternal): Uint8Array {
   const utf8 = textEncoder || new TextEncoder();
   return utf8.encode(input);
 }