SVG icons do not appear in the Sentry Replay Video

[KSarchousoudis]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/angular

SDK Version

7.31.1

Framework Version

@sentry/angular

Link to Sentry event

https://sentry.io/organizations/dataviva/replays/kostas-testing:b5aff935de25497591caeae64379683c/?query=duration%3A%3E%3D5&referrer=%2Forganizations%2F%3AorgId%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29

SDK Setup

Sentry.init({
 environment: environment.sentryEnvironment,
 release: environment.sentryRelease,
 dsn: environment.sentryDSN,
 // This sets the sample rate to be 10%. You may want this to be 100% while
 // in development and sample at a lower rate in production (Will record full session)
 replaysSessionSampleRate: 0.1,
 // If the entire session is not sampled, use the below sample rate to sample
 // sessions when an error occurs. (Will record up to a minute prior to the error 
 // and then keep recording until session ends)
 replaysOnErrorSampleRate: 1.0,
 integrations: [
 new BrowserTracing({
 tracePropagationTargets: [environment.apiEndpoint],
 routingInstrumentation: Sentry.routingInstrumentation
 }), 
 new Sentry.Replay({
 blockAllMedia: false,
 maskAllInputs: false,
 maskAllText: false,
 blockClass: 'password',
 maskInputOptions: {
 password: true
 }

 })
 ],

 // Set tracesSampleRate to 1.0 to capture 100%
 // of transactions for performance monitoring.
 // We recommend adjusting this value in production
 tracesSampleRate: environment.sentryTracesSampleRate
 });

Steps to Reproduce

In Sentry Replay produced video the SVG icons we use are not showing in the video.

If it helps we make use of "ng-svg-icon-sprite” package to display our SVG's

Expected Result

We would expect that after having set property blockAllMedia: to false, we would be able to see the icons as they are a type of media

Actual Result

[Lms24]

Hi @KSarchousoudis thanks for reporting! This has to do with the fact that SVG icons aren't inlined at the moment when we record replays. Hence, in the Sentry UI, the replay player tries to fetch them from your server which is blocked. You can adjust your CORS settings to allow sentry.io fetching this resources. This is also documented in our troubleshooting guide.

We're tracking an alternative approach (caching assets) in #7007.

Lmk if this helps!

EDIT: Unfortunately, there's no immediate workaround in this case (see reply below)

[Lms24]

Hi @KSarchousoudis apologies, it seems like adjusting CORS actually won't work in this case. Your SVGs are using <use> tags with a link to your domain. These links cannot be controlled with CORS as the browser seems to straight up block them. More info here: https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html:

There is currently no way for a element to reuse content from another web domain, even if that content is served with cross-origin HTTP headers.

So for this case, I'm afraid we'll have to work on #7007 to fix this.

I'm gonna close this issue as we can't do anything actionable other than what's tracked in #7007 at this time.

[Lms24]

Reopening to not constrain ourselves to asset caching as the only possible solution (cc @billyvg)