replayIntegration workerUrl config

[keith-wsg]

Hi everyone,

I followed https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/configuration/#using-a-custom-compression-worker to set up the worker script in my website.

Here is the config

package.json

"@sentry/vue": "npm:@sentry/vue@^7.62.0",
"vue": "^2.6.14",

main.js

Sentry.init({
  Vue,
  dsn: process.env.VUE_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  replaysSessionSampleRate: parseFloat(process.env.VUE_APP_SENTRY_REPLAY_SESSION_SAMPLE_RATE),
  replaysOnErrorSampleRate: parseFloat(process.env.VUE_APP_SENTRY_REPLAY_ON_ERROR_SAMPLE_RATE),
  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      blockAllMedia: true,
      workerUrl: '/js/worker.min.js'
    }),
    
  ]
})

I am able to load the worker.min.js

However, it still has the CSP problem in console. Please give me some idea if anyone knows it.

Thanks!

Keith

[lforst]

Can you share the CSP error?

[keith-wsg]

I thought I do not need to add those hash if I use custom worker script.

[lforst]

I am curious what made you think that. Since you are adding an inline script, CSP rules apply to that script.

[keith-wsg]

I am not 100% sure. There is no CSP error before I enabled the vue session reply.
And then I followed the guide to implement the custom worker script, then the site can bypass those CSP error.

[lforst]

I think you may be confused. The inline compression worker (ie when not using a custom one) may cause CSP errors. This is what these docs explain how to fix. If the worker-src 'self' blob: is too lax, you may use a custom compression worker. For the custom compression worker, you may add more specific CSP rules. You still need to allow the custom worker script with a CSP rule. How you do that strongly depends on your setup.

[keith-wsg]

Thanks. I got it now.