Are Session Replays supported yet?

[ddett]

I've tried different configurations to get Session Replays to work but without success.

The most promising seemed to be using the customClientIntegrations option. I first tried adding @sentry/replay directly like this:

import Replay from '@sentry/replay';

export default function (context) {
    return [new Replay()];
}

Which resulted in a successful build locally and on Heroku but spat out when opening the app TypeError: es.default is not a constructor.

I also tried the following after getting a hint from the sentry/vue docs:

import * as Sentry from '@nuxtjs/sentry';

export default function (context) {
    return [new Sentry.Replay()];
}

But that just failed failed building on Heroku. Any hint would be very much appreciated.

[rchl]

customClientIntegrations is what you should be using.

According to documentation it should be:

import * as Sentry from '@sentry/browser';

export default function() {
    return [new Sentry.Replay()]
}

[ddett]

Good to know that I'm on the right track with customClientIntegrations.

The documentation that you linked to is the same that I looked at before and that made me import Sentry from '@nuxtjs/sentry' and not from '@sentry/browser' initially due to this comment:

// import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser

But again that failed building on Heroku.

So I followed your advise and indeed, it now builds fine on Heroku. But I see no effect of the Replay in Sentry. In the web interface, Sentry receives errors just fine, but still claims Replay is not set up.

[rchl]

Did you also set sample rates? Try with 1.0 for testing.

[ddett]

That did it!

import * as Sentry from '@sentry/browser';

export default function (context) {
    return [
        new Sentry.Replay({
            replaysSessionSampleRate: 1.0,
            replaysOnErrorSampleRate: 1.0,
        }),
    ];
}

I had the sample rates defined before as well but not in the right place. @rchl Thanks a ton for pointing me in the right direction there!

[rchl]

That's not really the correct place according to documentaion and typescript types. Those should go into a standard Sentry config so either config or clientConfig object in Sentry module options.

[ddett]

Hm... And yet, it didn't work at all when I had them at the root level in config or clientConfig.

[rchl]

I promise you that the options you've passed do nothing. There are sessionSampleRate and errorSampleRate but not the ones you've passed. So it might be just some coincidence that happened to work with this change.

See https://github.com/getsentry/sentry-javascript/blob/c3dd3559de21b4ffab8b0da534febd6215b95263/packages/replay/src/integration.ts#L48-L79

[ddett]

You were right, must have been some strange coincidence. Everything works fine now when I set the sample rates like this in the Sentry module options:

clientConfig: {
      replaysSessionSampleRate: 1.0,
      replaysOnErrorSampleRate: 1.0,
}

Just for the fun of it I also tried sessionSampleRate and errorSampleRate directly, as per the docs you linked. That worked too, but gave me a deprecation warning. So clientConfig is the way to go.

Thanks again!

[zenire]

@ddett I don't get it to work.

Would you mind sharing your nuxt.config.js part for sentry: {} and the .js file for the clientConfig: {} ?

[irinablagun]

@zenire

nuxt.config.js

sentry: {
  dsn: '...',
  clientConfig: {
    replaysSessionSampleRate: 1.0,
    replaysOnErrorSampleRate: 1.0,
  },
  customClientIntegrations: '~/plugins/sentry-custom-client-integrations.js',
},

sentry-custom-client-integrations.js'

import * as Sentry from '@sentry/browser'

export default function () {
  return [new Sentry.Replay()]
}

[zenire]

@irinablagun Thank you very much, it works!

[rchl]

The module now supports a simpler way of enabling Replays using the clientIntegrations option. See https://sentry.nuxtjs.org/guide/session-replay for more details.