feat(replay): Throttle breadcrumbs to max 300/5s

[mydea]

This updates custom breadcrumb handling to be throttled to max. 300 breadcrumbs/5s.

If we exceed this amount of breadcrumbs, we drop any further breadcrumbs and instead add a single breadcrumb with category: 'replay.throttled', which the UI can use to indicate that something was dropped.

Closes #8072

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	21.05 KB (+0.14% 🔺)
@sentry/browser - ES5 CDN Bundle (minified)	65.69 KB (+0.1% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	19.59 KB (+0.13% 🔺)
@sentry/browser - ES6 CDN Bundle (minified)	58.16 KB (+0.14% 🔺)
@sentry/browser - Webpack (gzipped + minified)	21.21 KB (+0.18% 🔺)
@sentry/browser - Webpack (minified)	69.08 KB (+0.06% 🔺)
@sentry/react - Webpack (gzipped + minified)	21.23 KB (+0.19% 🔺)
@sentry/nextjs Client - Webpack (gzipped + minified)	49.16 KB (+0.1% 🔺)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	28.67 KB (+0.11% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	26.91 KB (+0.11% 🔺)
@sentry/replay ES6 CDN Bundle (gzipped + minified)	48.49 KB (+1.84% 🔺)
@sentry/replay - Webpack (gzipped + minified)	42.17 KB (+1.71% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	67.48 KB (+1.46% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	60.37 KB (+1.66% 🔺)

[ryan953]

does this need to be valid js? i think it needs some extra quotes around the string

Suggested change

	body: `const aha = ${'xx'.repeat(20_000)};`,
	body: `const aha = '${'xx'.repeat(20_000)}';`,

[cmanallen]

@ryan953 Francesco's out for the next two weeks. Do you want to take over this (only if you have availability)?

[cmanallen]

Related: getsentry/sentry#48259

[Lms24]

l:
So... regarding that hit counter xD

At first I was thinking, we should change this to a ring buffer because this would allow us to have a constant size memory object instead of the map that could grow. But then I noticed that we always clean up and never add or count separately. So unless I'm missing something, this map would not grow infinitely and hence the ring buffer isn't strictly necessary. It's probably still a little cleaner because the map is a dynamically allocating data structure vs a fixed-size one but I'll leave this up to you/Billy to decide (also we can revisit ofc).

[billyvg]

I think this is fine for now -- we can always revisit this in the future

[Lms24]

RE the flakiness we discussed in the call yesterday: iiuc, we're throttling all kinds of breadcrumbs, right? So to decrease/get rid of the flakiness, should we perhaps only create and check for click breadcrumbs? Maybe these are more reliably created than the network breadcrumbs.

[billyvg]

Hmm, would clicks end up getting throttled by the core sdk first?

[Lms24]

Huh I thought we didn't but it turns out we do, good catch!

sentry-javascript/packages/utils/src/instrument.ts

Lines 458 to 507 in de3e675

	/**
	* Wraps addEventListener to capture UI breadcrumbs
	* @param handler function that will be triggered
	* @param globalListener indicates whether event was captured by the global event listener
	* @returns wrapped breadcrumb events handler
	* @hidden
	*/
	function makeDOMEventHandler(handler: Function, globalListener: boolean = false): (event: Event) => void {
	return (event: Event): void => {
	// It's possible this handler might trigger multiple times for the same
	// event (e.g. event propagation through node ancestors).
	// Ignore if we've already captured that event.
	if (!event || lastCapturedEvent === event) {
	return;
	}
	// We always want to skip _some_ events.
	if (shouldSkipDOMEvent(event)) {
	return;
	}
	const name = event.type === 'keypress' ? 'input' : event.type;
	// If there is no debounce timer, it means that we can safely capture the new event and store it for future comparisons.
	if (debounceTimerID === undefined) {
	handler({
	event: event,
	name,
	global: globalListener,
	});
	lastCapturedEvent = event;
	}
	// If there is a debounce awaiting, see if the new event is different enough to treat it as a unique one.
	// If that's the case, emit the previous event and store locally the newly-captured DOM event.
	else if (shouldShortcircuitPreviousDebounce(lastCapturedEvent, event)) {
	handler({
	event: event,
	name,
	global: globalListener,
	});
	lastCapturedEvent = event;
	}
	// Start a new debounce timer that will prevent us from capturing multiple events that should be grouped together.
	clearTimeout(debounceTimerID);
	debounceTimerID = WINDOW.setTimeout(() => {
	debounceTimerID = undefined;
	}, debounceDuration);
	};
	}

Well, then I guess we could do console breadcrumbs? 😅