refactor(browser-utils): Move getBodyString

- Also moved `NetworkMetaWarning` type.

Signed-off-by: Kaung Zin Hein <[email protected]>

Author: Zen-cronic

packages/browser-utils/package.json

@@ -56,9 +56,9 @@
     "clean": "rimraf build coverage sentry-internal-browser-utils-*.tgz",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",
-    "test:unit": "jest",
-    "test": "jest",
-    "test:watch": "jest --watch",
+    "test:unit": "vitest run",
+    "test": "vitest run",
+    "test:watch": "vitest --watch",
     "yalc:publish": "yalc publish --push --sig"
   },
   "volta": {

packages/browser-utils/src/index.ts

@@ -24,3 +24,7 @@ export { addHistoryInstrumentationHandler } from './instrument/history';
 export { fetch, setTimeout, clearCachedImplementation, getNativeImplementation } from './getNativeImplementation';
 
 export { addXhrInstrumentationHandler, SENTRY_XHR_DATA_KEY } from './instrument/xhr';
+
+export type { NetworkMetaWarning } from './types';
+
+export { getBodyString } from './networkUtils';

packages/browser-utils/src/networkUtils.ts

@@ -0,0 +1,72 @@
+import type { ConsoleLevel, Logger } from '@sentry/core';
+import { DEBUG_BUILD } from './debug-build';
+import type { NetworkMetaWarning } from './types';
+
+type ReplayConsoleLevels = Extract<ConsoleLevel, 'info' | 'warn' | 'error' | 'log'>;
+type LoggerMethod = (...args: unknown[]) => void;
+type LoggerConsoleMethods = Record<ReplayConsoleLevels, LoggerMethod>;
+
+interface LoggerConfig {
+  captureExceptions: boolean;
+  traceInternals: boolean;
+}
+
+// Duplicate from replay-internal
+interface ReplayLogger extends LoggerConsoleMethods {
+  /**
+   * Calls `logger.info` but saves breadcrumb in the next tick due to race
+   * conditions before replay is initialized.
+   */
+  infoTick: LoggerMethod;
+  /**
+   * Captures exceptions (`Error`) if "capture internal exceptions" is enabled
+   */
+  exception: LoggerMethod;
+  /**
+   * Configures the logger with additional debugging behavior
+   */
+  setConfig(config: Partial<LoggerConfig>): void;
+}
+
+function _serializeFormData(formData: FormData): string {
+  // This is a bit simplified, but gives us a decent estimate
+  // This converts e.g. { name: 'Anne Smith', age: 13 } to 'name=Anne+Smith&age=13'
+  // @ts-expect-error passing FormData to URLSearchParams actually works
+  return new URLSearchParams(formData).toString();
+}
+
+/** Get the string representation of a body. */
+export function getBodyString(
+  body: unknown,
+  logger?: Logger | ReplayLogger,
+): [string | undefined, NetworkMetaWarning?] {
+  try {
+    if (typeof body === 'string') {
+      return [body];
+    }
+
+    if (body instanceof URLSearchParams) {
+      return [body.toString()];
+    }
+
+    if (body instanceof FormData) {
+      return [_serializeFormData(body)];
+    }
+
+    if (!body) {
+      return [undefined];
+    }
+  } catch (error) {
+    // RelayLogger
+    if (DEBUG_BUILD && logger && 'exception' in logger) {
+      logger.exception(error, 'Failed to serialize body', body);
+    } else if (DEBUG_BUILD && logger) {
+      logger.error(error, 'Failed to serialize body', body);
+    }
+    return [undefined, 'BODY_PARSE_ERROR'];
+  }
+
+  DEBUG_BUILD && logger?.info('Skipping network body because of body type', body);
+
+  return [undefined, 'UNPARSEABLE_BODY_TYPE'];
+}

packages/browser-utils/src/types.ts

@@ -4,3 +4,11 @@ export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ &
   // document is not available in all browser environments (webworkers). We make it optional so you have to explicitly check for it
   Omit<Window, 'document'> &
   Partial<Pick<Window, 'document'>>;
+
+export type NetworkMetaWarning =
+  | 'MAYBE_JSON_TRUNCATED'
+  | 'TEXT_TRUNCATED'
+  | 'URL_SKIPPED'
+  | 'BODY_PARSE_ERROR'
+  | 'BODY_PARSE_TIMEOUT'
+  | 'UNPARSEABLE_BODY_TYPE';

packages/browser-utils/test/networkUtils.test.ts

@@ -0,0 +1,41 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, expect, it } from 'vitest';
+import { getBodyString } from '../src/networkUtils';
+
+describe('getBodyString', () => {
+  it('works with a string', () => {
+    const actual = getBodyString('abc');
+    expect(actual).toEqual(['abc']);
+  });
+
+  it('works with URLSearchParams', () => {
+    const body = new URLSearchParams();
+    body.append('name', 'Anne');
+    body.append('age', '32');
+    const actual = getBodyString(body);
+    expect(actual).toEqual(['name=Anne&age=32']);
+  });
+
+  it('works with FormData', () => {
+    const body = new FormData();
+    body.append('name', 'Anne');
+    body.append('age', '32');
+    const actual = getBodyString(body);
+    expect(actual).toEqual(['name=Anne&age=32']);
+  });
+
+  it('works with empty  data', () => {
+    const body = undefined;
+    const actual = getBodyString(body);
+    expect(actual).toEqual([undefined]);
+  });
+
+  it('works with other type of data', () => {
+    const body = {};
+    const actual = getBodyString(body);
+    expect(actual).toEqual([undefined, 'UNPARSEABLE_BODY_TYPE']);
+  });
+});

packages/browser-utils/tsconfig.test.json

@@ -1,11 +1,11 @@
 {
   "extends": "./tsconfig.json",
 
-  "include": ["test/**/*"],
+  "include": ["test/**/*", "vite.config.ts"],
 
   "compilerOptions": {
     // should include all types from `./tsconfig.json` plus types for all test frameworks used
-    "types": ["node", "jest"]
+    "types": ["node", "jest", "vitest"]
 
     // other package-specific, test-specific options
   }

packages/browser-utils/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+import baseConfig from '../../vite/vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+  test: {
+    ...baseConfig.test,
+  },
+});

packages/browser/src/integrations/graphqlClient.ts

@@ -1,5 +1,4 @@
-import { SENTRY_XHR_DATA_KEY } from '@sentry-internal/browser-utils';
-import { getBodyString } from '@sentry-internal/replay';
+import { SENTRY_XHR_DATA_KEY, getBodyString } from '@sentry-internal/browser-utils';
 import type { FetchHint, XhrHint } from '@sentry-internal/replay';
 import {
   SEMANTIC_ATTRIBUTE_HTTP_REQUEST_METHOD,

packages/core/src/utils-hoist/index.ts

@@ -38,6 +38,8 @@ export {
 } from './is';
 export { isBrowser } from './isBrowser';
 export { CONSOLE_LEVELS, consoleSandbox, logger, originalConsoleMethods } from './logger';
+export type { Logger } from './logger';
+
 export {
   addContextToFrame,
   addExceptionMechanism,

packages/replay-internal/src/coreHandlers/util/fetchUtils.ts

@@ -1,10 +1,10 @@
-import { setTimeout } from '@sentry-internal/browser-utils';
+import { getBodyString, setTimeout } from '@sentry-internal/browser-utils';
+import type { NetworkMetaWarning } from '@sentry-internal/browser-utils';
 import type { Breadcrumb, FetchBreadcrumbData } from '@sentry/core';
 
 import { DEBUG_BUILD } from '../../debug-build';
 import type {
   FetchHint,
-  NetworkMetaWarning,
   ReplayContainer,
   ReplayNetworkOptions,
   ReplayNetworkRequestData,
@@ -17,7 +17,6 @@ import {
   buildSkippedNetworkRequestOrResponse,
   getAllowedHeaders,
   getBodySize,
-  getBodyString,
   makeNetworkReplayBreadcrumb,
   mergeWarning,
   parseContentLengthHeader,
@@ -118,7 +117,7 @@ function _getRequestInfo(
 
   // We only want to transmit string or string-like bodies
   const requestBody = _getFetchRequestArgBody(input);
-  const [bodyStr, warning] = getBodyString(requestBody);
+  const [bodyStr, warning] = getBodyString(requestBody, logger);
   const data = buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr);
 
   if (warning) {