feat: safer string truncation

[pauldambra]

We truncate strings by slicing them at a given length both in replay and in general capture property processing

String.prototype.slice() and String.prototype.substring() are not unicode aware

so

const str = 'A 😄 B';
console.log(str.slice(2, 3)); // Outputs broken part of emoji

Major browsers and Node 20 have toWellFormed

Our CI/tests/etc don't use Node 20 so even though we could use toWellFormed in prod it would be a pain to add. Moving to Node20 would probably fix some people's builds and break others. Let's avoid confusion for now.

Luckily the one consistent thing about JS is that it is not consistent.

Array.from(someString) is unicode aware and correctly splits a string into an array of valid characters. So we can then slice that array. To get a string that is sort-of the right length.

Our string truncation in the JS is set arbitrarily so it doesn't matter that this mechanism returns strings that may not have a .length that exactly matches the maxLength passed to truncation

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
posthog-js	✅ Ready (Inspect)	Visit Preview	Oct 21, 2024 8:30am

[pauldambra]

@daibhin since this would maybe help with your upgrade PR...

I'm considering adding a (lazy loaded?) polyfill for array.from

[github-actions]

Size Change: +1.53 kB (+0.05%)

Total Size: 2.82 MB

Filename	Size	Change
dist/array.full.es5.js	248 kB	+153 B (+0.06%)
dist/array.full.js	325 kB	+153 B (+0.05%)
dist/array.full.no-external.js	324 kB	+153 B (+0.05%)
dist/array.js	156 kB	+152 B (+0.1%)
dist/array.no-external.js	155 kB	+153 B (+0.1%)
dist/main.js	156 kB	+152 B (+0.1%)
dist/module.full.js	325 kB	+153 B (+0.05%)
dist/module.full.no-external.js	324 kB	+153 B (+0.05%)
dist/module.js	156 kB	+155 B (+0.1%)
dist/module.no-external.js	155 kB	+152 B (+0.1%)

ℹ️ View Unchanged

Filename	Size
dist/all-external-dependencies.js	172 kB
dist/exception-autocapture.js	8.75 kB
dist/external-scripts-loader.js	2.19 kB
dist/recorder-v2.js	92.6 kB
dist/recorder.js	92.7 kB
dist/surveys-preview.js	56.7 kB
dist/surveys.js	62.1 kB
dist/tracing-headers.js	1.33 kB
dist/web-vitals.js	10.3 kB

_{compressed-size-action}

[daibhin]

Interestingly I'm still seeing failures on IE11 in #1276 despite my changes :/ Regardless, this seems good

[pauldambra]

NO, that polyfill definitely does not work 🤣

[pauldambra]

ok, corejs array.fom polyfill adds 11% to the bundle... that's no bueno

[pauldambra]

interesting... looks like the array.from polyfill in IE11 bundle makes this timeout 🤯