Limit session replays to certain pages

[dokgu]

Problem Statement

I want to have a finer control on when session replays are captured. I have pages where I don't really care for session replays to capture anything because the stack traces are sufficient to troubleshoot errors. I am hitting my session replay quotas very quickly because of non-essential replays that do not provide any value. And that hinders any additional replays from getting captured which might be valuable.

Solution Brainstorm

Add a configuration for conditionally enabling session replays - could be a regex that matches certain pages or a simple array of pages.

Product Area

Replays

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[getsantry]

Routing to @getsentry/product-owners-replays for triage ⏲️

[bruno-garcia]

You can control sampling programatically: https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions/#manually-starting-replay
Only starting to capture replay on the pages you care about

[dokgu]

You can control sampling programatically: https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions/#manually-starting-replay Only starting to capture replay on the pages you care about

Thank you! This is very close to what I was trying to get to. However, I'm having issues implementing it on my NextJS app.

On my sentry.client.config.ts file I did the following:

import * as Sentry from '@sentry/nextjs';
import * as SentryConfig from '@/utilities/sentry';

const replay = new Sentry.Replay({
  maskAllText: false,
  maskAllInputs: false,
  blockAllMedia: true
});

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1,
  debug: false,
  replaysOnErrorSampleRate: 0,
  replaysSessionSampleRate: 0,
  integrations: [replay],
  environment: process.env.NODE_ENV,
  release: `${process.env.NEXT_PUBLIC_APP_NAME}-${process.env.NEXT_PUBLIC_APP_VERSION}`
});

SentryConfig.setReferrer();
SentryConfig.setResolution();

export { replay };

Then on the page that I wanted to capture session replays on, I did the following:

import { replay } from 'sentry.client.config';

...

useEffect(() => {
  replay.start();

  // Just to test - stop the capturing of replays after 10 seconds and send the data to Sentry
  setTimeout(() => {
    replay.stop();
    replay.flush();
  }, 10000);
}, []);

This is however giving me:

Server Error
TypeError: _sentry_nextjs__WEBPACK_IMPORTED_MODULE_0__.Replay is not a constructor

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
sentry.client.config.ts (13:15) @ eval

  11 | import * as SentryConfig from '@/utilities/sentry';
  12 | 
> 13 | const replay = new Sentry.Replay({
     |               ^
  14 | 	maskAllText: false,
  15 | 	maskAllInputs: false,
  16 | 	blockAllMedia: true

Any idea? Basically what I want to do is if a user goes to a certain page, I want to start recording, when the user leaves the page, stop the recording and send the data. If the user goes back to the page, I want to start recording again and repeat the process.

[billyvg]

@dokgu Your logs say Server Error -- is sentry.client.config.ts being executed on the server?

[lforst]

@billyvg These errors happen during the build.

@dokgu What version of the SDK are you on?

[lforst]

My guess is that you are importing replay (as exported from sentry.client.config.ts) from a file that is evaluated in a server context (this could be any file). This is not supported.

[dokgu]

@lforst According to my yarn.lock file:

"@sentry/core@7.60.1":
  version "7.60.1"
  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.60.1.tgz#789ebb2ba6808042e8c288f6881b82ff108c9c7c"
  integrity sha512-yr/0VFYWOJyXj+F2nifkRYxXskotsNnDggUnFOZZN2ZgTG94IzRFsOZQ6RslHJ8nrYPTBNO74reU0C0GB++xRw==
  dependencies:
    "@sentry/types" "7.60.1"
    "@sentry/utils" "7.60.1"
    tslib "^2.4.1 || ^1.9.3"

"@sentry/integrations@7.60.1":
  version "7.60.1"
  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.60.1.tgz#2c0054d57ae337599d3c3a2d412226b4a7a62567"
  integrity sha512-GkxGGUOGyRZ2aJrHfGPGJ40wh+r03xDHgjeM7SMHwdJdxTgFhv4xUZAl6NlywbxL5t2jhVwCMZNYIvy/vUrcFQ==
  dependencies:
    "@sentry/types" "7.60.1"
    "@sentry/utils" "7.60.1"
    localforage "^1.8.1"
    tslib "^2.4.1 || ^1.9.3"

"@sentry/nextjs@^7.58.1":
  version "7.60.1"
  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.60.1.tgz#67270948c200a4091f64efdb768552c0b88c9709"
  integrity sha512-AwDbcvYudNOukYPndPId5Re8sRXdhA4iPS87QsRexAetUvPY/bCckFkdaGJok+OlMNBN8o3eudNNCytyZT2s+A==
  dependencies:
    "@rollup/plugin-commonjs" "24.0.0"
    "@sentry/core" "7.60.1"
    "@sentry/integrations" "7.60.1"
    "@sentry/node" "7.60.1"
    "@sentry/react" "7.60.1"
    "@sentry/types" "7.60.1"
    "@sentry/utils" "7.60.1"
    "@sentry/webpack-plugin" "1.20.0"
    chalk "3.0.0"
    rollup "2.78.0"
    stacktrace-parser "^0.1.10"
    tslib "^2.4.1 || ^1.9.3"

"@sentry/node@7.60.1":
  version "7.60.1"
  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.60.1.tgz#18e287995445588ebea630aed3932a3d21dda9ab"
  integrity sha512-lBt3RqncY4XbzM+PlTbH/tUWeOsm24anwEzvA2DSDP1NL3WZ5MdvT77q7NqpvpVNd2LeGAQ6x7AXDzE53YBfnQ==
  dependencies:
    "@sentry-internal/tracing" "7.60.1"
    "@sentry/core" "7.60.1"
    "@sentry/types" "7.60.1"
    "@sentry/utils" "7.60.1"
    cookie "^0.4.1"
    https-proxy-agent "^5.0.0"
    lru_map "^0.3.3"
    tslib "^2.4.1 || ^1.9.3"

"@sentry/react@7.60.1":
  version "7.60.1"
  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.60.1.tgz#ceeb35dadebb41454f488c17d0b9c2e5d59e5ff4"
  integrity sha512-977wb5gp7SHv9kHPs1HZtL60slt2WBFY9/YJI9Av7BjjJ/A89OhtBwbVhIcKXZ4hwHQVWuOiFCJdMrIfZXpFPA==
  dependencies:
    "@sentry/browser" "7.60.1"
    "@sentry/types" "7.60.1"
    "@sentry/utils" "7.60.1"
    hoist-non-react-statics "^3.3.2"
    tslib "^2.4.1 || ^1.9.3"

"@sentry/replay@7.60.1":
  version "7.60.1"
  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.60.1.tgz#07ad56f47255706504ee099729bfe476538aa91d"
  integrity sha512-WHQxEpJbHICs12L17LGgS/ql91yn9wJDH/hgb+1H90HaasjoR54ofWCKul29OvYV0snTWuHd6xauwtzyv9tzvg==
  dependencies:
    "@sentry/core" "7.60.1"
    "@sentry/types" "7.60.1"
    "@sentry/utils" "7.60.1"

The setup is I have a NextJS page (src/pages/somepage.tsx) where it displays a component that I need to record a session replay for. This component I believe is client-side rendered but I'm not sure - I'll take a look later after work. This component is where I import the replay variable from the client config file mentioned above.