feat(session-replay-browser): ugc removal poc

[bravecod]

[Experimental]

Summary

This pull request introduces a new feature to support User-Generated Content (UGC) filtering in the Session Replay library. It includes changes to add UGC filter rules, apply them to page URLs, and validate their usage. The changes span across configuration, helper methods, hooks, and tests.

UGC Filtering Feature Implementation

• Configuration Updates:

  • Added a new UGCFilterRule type to define UGC filter rules with selector and replacement properties. (packages/session-replay-browser/src/config/types.ts, packages/session-replay-browser/src/config/types.tsR53-R66)
  • Updated SessionReplayLocalConfig to include an optional ugcFilterRules property. (packages/session-replay-browser/src/config/local-config.ts, [1] [2]

• Helper Functionality:

  • Added getPageUrl helper to apply UGC filter rules to page URLs, with validation for rule structure and glob patterns. (packages/session-replay-browser/src/helpers.ts, packages/session-replay-browser/src/helpers.tsR146-R193)

• Integration in Hooks:

  • Updated click and scroll hooks to use getPageUrl for applying UGC filter rules to event data. (packages/session-replay-browser/src/hooks/click.ts, [1]; packages/session-replay-browser/src/hooks/scroll.ts, [2]

Testing Enhancements

• Unit Tests for getPageUrl:

  • Validated scenarios such as no rules, invalid rules, and correct application of single/multiple rules. (packages/session-replay-browser/test/helpers.test.ts, packages/session-replay-browser/test/helpers.test.tsR274-R373)

• Integration Tests for Hooks:

  • Ensured click and scroll events correctly apply UGC filter rules in various scenarios. (packages/session-replay-browser/test/hooks/click.test.ts, [1]; packages/session-replay-browser/test/hooks/scroll.test.ts, [2]

These changes collectively enable UGC filtering for improved privacy and customization in session replay data.

Checklist

• Does your PR title have the correct title format?
• Does your PR have a breaking change?:

[promptless]

📝 Documentation updates detected! You can review documentation updates here

[lewgordon-amplitude]

Looks good overall and I think it's pretty close. Just wanted to discuss a few things before shipping this.

[lewgordon-amplitude]

LGTM, one comment though.

[lewgordon-amplitude]

One request then I think we're OK

[cursor-com]

Bug: UGC Filter Rules Validation Errors

The ugcFilterRules configuration introduces two related validation bugs:

1. validateUGCFilterRules lacks an Array.isArray check, causing a TypeError (.every is not a function) and SDK crash if ugcFilterRules is not an array.
2. getPageUrl assumes elements within ugcFilterRules are objects with selector and replacement properties. Remote ugcFilterRules are not validated, so if they contain non-objects (e.g., strings), accessing rule.selector causes a TypeError in globToRegex, crashing event processing.

packages/session-replay-browser/src/helpers.ts#L163-L185

Amplitude-TypeScript/packages/session-replay-browser/src/helpers.ts

Lines 163 to 185 in 0e3fd9e

	export const validateUGCFilterRules = (ugcFilterRules: UGCFilterRule[]) => {
	// validate ugcFilterRules
	if (!ugcFilterRules.every((rule) => typeof rule.selector === 'string' && typeof rule.replacement === 'string')) {
	throw new Error('ugcFilterRules must be an array of objects with selector and replacement properties');
	}
	// validate ugcFilterRules are valid globs
	if (!ugcFilterRules.every((rule) => isValidGlobUrl(rule.selector))) {
	throw new Error('ugcFilterRules must be an array of objects with valid globs');
	}
	};
	export const getPageUrl = (pageUrl: string, ugcFilterRules: UGCFilterRule[]) => {
	// apply ugcFilterRules, order is important, first rule wins
	for (const rule of ugcFilterRules) {
	const regex = globToRegex(rule.selector);
	if (regex.test(pageUrl)) {
	return pageUrl.replace(regex, rule.replacement);
	}
	}
	return pageUrl;

Fix in Cursor

---

Bug: UGC Filtering Logic Fails Remote Configuration Handling

The logic introduced to preserve local ugcFilterRules during remote configuration fetching is flawed. If the remote interactionConfig is absent, any locally provided ugcFilterRules are discarded, silently disabling UGC filtering. Conversely, if a remote interactionConfig is present, local ugcFilterRules incorrectly overwrite remote ugcFilterRules, violating the intended precedence for remote configuration. This results in either silent disabling of UGC filtering or unexpected masking behavior.

packages/session-replay-browser/src/config/joined-config.ts#L60-L82

Amplitude-TypeScript/packages/session-replay-browser/src/config/joined-config.ts

Lines 60 to 82 in 0e3fd9e

	'sessionReplay',
	'sr_sampling_config',
	sessionId,
	);
	const privacyConfig = await this.remoteConfigFetch.getRemoteConfig(
	'sessionReplay',
	'sr_privacy_config',
	sessionId,
	);
	const ugcFilterRules = config.interactionConfig?.ugcFilterRules;
	// This is intentionally forced to only be set through the remote config.
	config.interactionConfig = await this.remoteConfigFetch.getRemoteConfig(
	'sessionReplay',
	'sr_interaction_config',
	sessionId,
	);
	if (config.interactionConfig && ugcFilterRules) {
	config.interactionConfig.ugcFilterRules = ugcFilterRules;
	}
	// This is intentionally forced to only be set through the remote config.

Fix in Cursor

---

Was this report helpful? Give feedback by reacting with 👍 or 👎