feat(replay): Stop fixing truncated JSONs in SDK (#9437)

This is potentially performance intensive, so we should just do this in
the UI instead.

Part of #9426

This was implemented in Sentry in getsentry/sentry#59266

Author: mydea

packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts

@@ -99,23 +99,7 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
         type: 'default',
         category: 'console',
         data: {
-          arguments: [
-            expect.objectContaining({
-              'item-0': {
-                aa: expect.objectContaining({
-                  'item-0': {
-                    aa: expect.any(Object),
-                    bb: expect.any(String),
-                    cc: expect.any(String),
-                    dd: expect.any(String),
-                  },
-                }),
-                bb: expect.any(String),
-                cc: expect.any(String),
-                dd: expect.any(String),
-              },
-            }),
-          ],
+          arguments: [expect.any(String)],
           logger: 'console',
           _meta: {
             warnings: ['CONSOLE_ARG_TRUNCATED'],

packages/replay/src/coreHandlers/handleScope.ts

@@ -5,7 +5,6 @@ import { CONSOLE_ARG_MAX_SIZE } from '../constants';
 import type { ReplayContainer } from '../types';
 import type { ReplayFrame } from '../types/replayFrame';
 import { createBreadcrumb } from '../util/createBreadcrumb';
-import { fixJson } from '../util/truncateJson/fixJson';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
 
 let _LAST_BREADCRUMB: null | Breadcrumb = null;
@@ -95,11 +94,9 @@ export function normalizeConsoleBreadcrumb(
         const normalizedArg = normalize(arg, 7);
         const stringified = JSON.stringify(normalizedArg);
         if (stringified.length > CONSOLE_ARG_MAX_SIZE) {
-          const fixedJson = fixJson(stringified.slice(0, CONSOLE_ARG_MAX_SIZE));
-          const json = JSON.parse(fixedJson);
-          // We only set this after JSON.parse() was successfull, so we know we didn't run into `catch`
           isTruncated = true;
-          return json;
+          // We use the pretty printed JSON string here as a base
+          return `${JSON.stringify(normalizedArg, null, 2).slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
         }
         return normalizedArg;
       } catch {

packages/replay/src/coreHandlers/util/networkUtils.ts

@@ -10,7 +10,6 @@ import type {
   ReplayNetworkRequestOrResponse,
   ReplayPerformanceEntry,
 } from '../../types';
-import { fixJson } from '../../util/truncateJson/fixJson';
 
 /** Get the size of a body. */
 export function getBodySize(
@@ -161,7 +160,7 @@ export function buildNetworkRequestOrResponse(
 
   const { body: normalizedBody, warnings } = normalizeNetworkBody(body);
   info.body = normalizedBody;
-  if (warnings.length > 0) {
+  if (warnings && warnings.length > 0) {
     info._meta = {
       warnings,
     };
@@ -191,36 +190,47 @@ function _serializeFormData(formData: FormData): string {
 
 function normalizeNetworkBody(body: string | undefined): {
   body: NetworkBody | undefined;
-  warnings: NetworkMetaWarning[];
+  warnings?: NetworkMetaWarning[];
 } {
   if (!body || typeof body !== 'string') {
     return {
       body,
-      warnings: [],
     };
   }
 
   const exceedsSizeLimit = body.length > NETWORK_BODY_MAX_SIZE;
 
-  if (_strIsProbablyJson(body)) {
-    try {
-      const json = exceedsSizeLimit ? fixJson(body.slice(0, NETWORK_BODY_MAX_SIZE)) : body;
-      const normalizedBody = JSON.parse(json);
+  const isProbablyJson = _strIsProbablyJson(body);
+
+  if (exceedsSizeLimit) {
+    const truncatedBody = body.slice(0, NETWORK_BODY_MAX_SIZE);
+
+    if (isProbablyJson) {
       return {
-        body: normalizedBody,
-        warnings: exceedsSizeLimit ? ['JSON_TRUNCATED'] : [],
+        body: truncatedBody,
+        warnings: ['MAYBE_JSON_TRUNCATED'],
       };
-    } catch {
+    }
+
+    return {
+      body: `${truncatedBody}…`,
+      warnings: ['TEXT_TRUNCATED'],
+    };
+  }
+
+  if (isProbablyJson) {
+    try {
+      const jsonBody = JSON.parse(body);
       return {
-        body: exceedsSizeLimit ? `${body.slice(0, NETWORK_BODY_MAX_SIZE)}…` : body,
-        warnings: exceedsSizeLimit ? ['INVALID_JSON', 'TEXT_TRUNCATED'] : ['INVALID_JSON'],
+        body: jsonBody,
       };
+    } catch {
+      // fall back to just send the body as string
     }
   }
 
   return {
-    body: exceedsSizeLimit ? `${body.slice(0, NETWORK_BODY_MAX_SIZE)}…` : body,
-    warnings: exceedsSizeLimit ? ['TEXT_TRUNCATED'] : [],
+    body,
   };
 }
 

packages/replay/src/types/request.ts

@@ -3,7 +3,7 @@ type JsonArray = unknown[];
 
 export type NetworkBody = JsonObject | JsonArray | string;
 
-export type NetworkMetaWarning = 'JSON_TRUNCATED' | 'TEXT_TRUNCATED' | 'INVALID_JSON' | 'URL_SKIPPED';
+export type NetworkMetaWarning = 'MAYBE_JSON_TRUNCATED' | 'TEXT_TRUNCATED' | 'URL_SKIPPED';
 
 interface NetworkMeta {
   warnings?: NetworkMetaWarning[];