[Replay] Allow using replay without installing `@sentry/replay`

[mydea]

Currently, in order to use replay you have to run:

yarn add @sentry/replay

And then use it in your codebase like this:

import * as Sentry from '@sentry/browser';
import { Replay } from '@sentry/replay';

Sentry.init({
  dsn: '__DSN__',
  integrations: [
    new Replay({})
  ],
});

We want to simplify this, so the user can do e.g.:

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

Sentry.init({
  dsn: '__DSN__',
  integrations: [
    new Sentry.Replay({})
  ],
});

And does not need to run yarn add @sentry/replay at all.

Goals

• We do not affect bundle size for users who do not enable replay via CDN
• We do not affect bundle size for users who do not enable replay via a bundler with tree shaking
• This should happen in a backwards-compatible way (e.g. in 7.x)
• Ideally, users that have replay currently setup with the manual import from @sentry/replay can continue using this for the forseeable time

Non-goals

• For users that have, for whatever reason, no tree shaking, the bundle size may increase

Related

We may want to do the same for @sentry/tracing in the future.

[Lms24]

A couple of problems while working on this:

• This will require separate index.bundle.ts in browser and tracing s.t. we don't include the integrations by default in the browser SDK CDN bundles
  • Works well for browser bundle but for browser+tracing, we need to tell rollup to use browser's index.bundle.ts file instead of index.ts
• We have to remove all code and dependency occurances of @sentry/browser in Replay

[mydea]

Regarding the last point (removing @sentry/browser dependency from replay), it is currently only importing types from there.

IMHO I would move the relevant types to @sentry/types somehow, I think that's the best solution there. For example, move this:

type BrowserClientReplayOptions = {
  /**
   * The sample rate for session-long replays.
   * 1.0 will record all sessions and 0 will record none.
   */
  replaysSessionSampleRate?: number;

  /**
   * The sample rate for sessions that has had an error occur.
   * This is independent of `sessionSampleRate`.
   * 1.0 will record all sessions and 0 will record none.
   */
  replaysOnErrorSampleRate?: number;
};

to @sentry/types, and import it from @sentry/browser. Then in replay, we can just type case there, like this:

const client = getCurrentHub().getClient();
const opt = client && (client.getOptions() as ClientOptions & BrowserClientReplayOptions);

[HazAT]

Even better would be if we can do something like this, if any of the options are > 0 we add the integration internally.

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

Sentry.init({
  dsn: '__DSN__',
  replaysSessionSampleRate: 1.0, 
  replaysOnErrorSampleRate: 1.0
});

[Lms24]

I think this makes tree shaking Replay out very hard, since we'd need to do something similar like we did for tracing. Basically, users would need to configure their bundler to tree shake the integration away. I'd vote to make it explicit for users to add Replay, as it's quite a bundle size hit if it's on by default. WDYT?

[mydea]

I think this makes tree shaking Replay out very hard, since we'd need to do something similar like we did for tracing. Basically, they'd need to configure their bundler to tree shake the integration away. I'd vote to make it explicit for users to add Replay, as it's quite a bundle size hit if it's on by default. WDYT?

agreed. Also having it re-exported for now does not exclude us from also doing what @HazAT mentioned at a later point :)