feat: safer string truncation

src/__tests__/extensions/replay/sessionrecording-utils.test.ts

@@ -193,7 +193,8 @@ describe(`SessionRecording utility functions`, () => {
                 data: {
                     plugin: CONSOLE_LOG_PLUGIN_NAME,
                     payload: {
-                        payload: ['a', largeString.slice(0, 2000) + '...[truncated]'],
+                        // 14 is the length of the '...[truncated]' string
+                        payload: ['a', largeString.slice(0, 2000 - 14) + '...[truncated]'],
                     },
                 },
             })

src/__tests__/utils/string-utils.test.ts

@@ -0,0 +1,37 @@
+import { truncateString } from '../../utils/string-utils'
+
+describe('string-utils', () => {
+    it.each([
+        // Basic string truncation without suffix
+        ['hello world', 5, undefined, 'hello'],
+
+        // Basic string truncation without suffix
+        ['hello world   ', 15, undefined, 'hello world'],
+
+        // String with surrogate pair (emoji)
+        ['hello 😄 world', 7, undefined, 'hello 😄'],
+
+        // String with surrogate pair, truncated in the middle of the emoji
+        ['hello 😄 world', 6, undefined, 'hello'],
+
+        // Truncation with a suffix added
+        ['hello world', 5, '...', 'he...'],
+
+        // Handling whitespace and suffix
+        ['   hello world   ', 7, '...', 'hell...'],
+
+        // Empty string with suffix
+        ['', 5, '-', ''],
+
+        // invalid input string with suffix
+        [null, 5, '-', ''],
+
+        // Truncation without a suffix and with an emoji
+        ['hello 😄 world', 8, undefined, 'hello 😄'],
+    ])(
+        'should truncate string "%s" to max length %d with suffix "%s" and return "%s"',
+        (input: string, maxLength: number, suffix: string | undefined, expected: string) => {
+            expect(truncateString(input, maxLength, suffix)).toEqual(expected)
+        }
+    )
+})

src/extensions/replay/sessionrecording-utils.ts

@@ -11,8 +11,9 @@ import type {
 } from '@rrweb/types'
 import type { DataURLOptions, MaskInputFn, MaskInputOptions, MaskTextFn, Mirror, SlimDOMOptions } from 'rrweb-snapshot'
 
-import { isObject } from '../../utils/type-utils'
+import { isNullish, isObject } from '../../utils/type-utils'
 import { SnapshotBuffer } from './sessionrecording'
+import { truncateString } from '../../utils/string-utils'
 
 // taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#circular_references
 export function circularReferenceReplacer() {
@@ -146,15 +147,15 @@ export function truncateLargeConsoleLogs(_event: eventWithTime) {
         }
         const updatedPayload = []
         for (let i = 0; i < event.data.payload.payload.length; i++) {
-            if (
-                event.data.payload.payload[i] && // Value can be null
-                event.data.payload.payload[i].length > MAX_STRING_SIZE
-            ) {
-                updatedPayload.push(event.data.payload.payload[i].slice(0, MAX_STRING_SIZE) + '...[truncated]')
-            } else {
+            if (isNullish(event.data.payload.payload[i])) {
+                // we expect nullish values to be logged unchanged,
+                // TODO test if this is still necessary https://github.com/PostHog/posthog-js/pull/385
                 updatedPayload.push(event.data.payload.payload[i])
+            } else {
+                updatedPayload.push(truncateString(event.data.payload.payload[i], MAX_STRING_SIZE, '...[truncated]'))
             }
         }
+
         event.data.payload.payload = updatedPayload
         // Return original type
         return _event

src/utils/index.ts

@@ -2,6 +2,7 @@ import { Breaker, EventHandler, Properties } from '../types'
 import { isArray, isFormData, isFunction, isNull, isNullish, isString, hasOwnProperty } from './type-utils'
 import { logger } from './logger'
 import { window, nativeForEach, nativeIndexOf } from './globals'
+import { truncateString } from './string-utils'
 
 const breaker: Breaker = {}
 
@@ -207,7 +208,7 @@ export function _copyAndTruncateStrings<T extends Record<string, any> = Record<s
 ): T {
     return deepCircularCopy(object, (value: any) => {
         if (isString(value) && !isNull(maxStringLength)) {
-            return (value as string).slice(0, maxStringLength)
+            return truncateString(value, maxStringLength)
         }
         return value
     }) as T

src/utils/string-utils.ts

@@ -0,0 +1,19 @@
+/**
+ * Truncate a string to a maximum length and optionally append a suffix only if the string is longer than the maximum length.
+ */
+export const truncateString = (str: unknown, maxLength: number, suffix?: string): string => {
+    if (typeof str !== 'string') {
+        return ''
+    }
+
+    const trimmedSuffix = suffix?.trim()
+    const trimmedStr = str.trim()
+
+    let sliceLength = maxLength
+    if (trimmedSuffix?.length) {
+        sliceLength -= trimmedSuffix.length
+    }
+    const sliced = Array.from(trimmedStr).slice(0, sliceLength).join('').trim()
+    const addSuffix = trimmedStr.length > maxLength
+    return sliced + (addSuffix ? trimmedSuffix || '' : '')
+}