feat(feedback): Flush replays when feedback form opens

[billyvg]

Flush replay when the feedback form is first opened instead of at submit time

We are making this change because we have noticed a lot of feedback replays only consist of the user submitting the feedback and not what they did prior to submitting feedback. This may result in false positives if users open but do not submit feedback, but this should make replays from feedback more useful.

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped)	77.35 KB (+0.25% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)	68.57 KB (+0.22% 🔺)
@sentry/browser (incl. Tracing, Replay with Canvas) - Webpack (gzipped)	72.51 KB (+0.23% 🔺)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped)	62.12 KB (+0.24% 🔺)
@sentry/browser (incl. Tracing) - Webpack (gzipped)	32.8 KB (+0.46% 🔺)
@sentry/browser (incl. browserTracingIntegration) - Webpack (gzipped)	32.8 KB (+0.46% 🔺)
@sentry/browser (incl. Feedback) - Webpack (gzipped)	31.01 KB (+0.66% 🔺)
@sentry/browser (incl. sendFeedback) - Webpack (gzipped)	31.01 KB (+0.66% 🔺)
@sentry/browser - Webpack (gzipped)	22.25 KB (+0.72% 🔺)
@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped)	75.79 KB (+0.28% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)	67.42 KB (+0.24% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)	33.26 KB (+0.51% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped)	24.76 KB (+0.72% 🔺)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)	211.01 KB (+0.13% 🔺)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)	99.74 KB (+0.29% 🔺)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)	74 KB (+0.49% 🔺)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)	36.32 KB (+0.43% 🔺)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)	68.84 KB (+0.2% 🔺)
@sentry/react - Webpack (gzipped)	22.28 KB (+0.72% 🔺)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)	85.32 KB (+0.16% 🔺)
@sentry/nextjs Client - Webpack (gzipped)	49.66 KB (+0.29% 🔺)
@sentry-internal/feedback - Webpack (gzipped)	17.09 KB (+0.31% 🔺)

[mydea]

let's not use this syntax, but import type {} - I've read that this is better/easier to treeshake!

Also, generally, I'd say maybe we should avoid this - we have this as devDependency only for the type here, which is not really correct from a bundling perspective 😬 I'd rather we just inline the relevant type here (or if really needed put some interface type in @sentry/types that both packages can use)?

[billyvg]

Wouldn't inlining defeat the purpose of typechecking against replay interface? (in this case, it probably wouldn't matter too much, but just trying to think of a good general solution).

I guess the best solution here is to extract it into types, but it's still a bit annoying having to duplicate the type

[mydea]

yeah, that's always the problem with the types stuff and the circular dependency stuff 😬

So I'd go with one of these approaches - no strong feelings:

1. We add a minimal interface to types - IMHO that may be OK to do for the integration itself, as the surface is quite small and can be considered the public contract. then in replay we can do class Replay implements ReplayIntegrationInterface or something like this 🤔
2. We inline the styles, which is obv. not super secure but probably OK/fine here (as tests would fail anyhow hopefully if that would change), and we only use a single method right now?

[philcaonz]

Have been digging around the code and it looks like this feature has disappeared in v8, despite it still being documented https://docs.sentry.io/platforms/javascript/guides/react/user-feedback/#session-replay

@billyvg

[billyvg]

Have been digging around the code and it looks like this feature has disappeared in v8, despite it still being documented docs.sentry.io/platforms/javascript/guides/react/user-feedback#session-replay

@billyvg

@philcaonz It's here:

sentry-javascript/packages/replay-internal/src/coreHandlers/handleGlobalEvent.ts

Lines 40 to 48 in f61e729

	if (isFeedbackEvent(event)) {
	// This should never reject
	// eslint-disable-next-line @typescript-eslint/no-floating-promises
	replay.flush();
	event.contexts.feedback.replay_id = replay.getSessionId();
	// Add a replay breadcrumb for this piece of feedback
	addFeedbackBreadcrumb(replay, event);
	return event;
	}