Skip to content

build(replay): Provide full browser+tracing+replay bundle #6793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mydea merged 4 commits into from
Jan 17, 2023
Merged

build(replay): Provide full browser+tracing+replay bundle #6793

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55505df
build(replay): Provide full browser+tracing+replay bundle
mydea Jan 16, 2023
9a81100
fix tests
mydea Jan 16, 2023
f87e46b
update CDN docs
mydea Jan 17, 2023
53c298b
update docs
mydea Jan 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
build(replay): Provide full browser+tracing+replay bundle
  • Loading branch information
@mydea
mydea committed Jan 17, 2023
commit 55505df3538524e517358647974b8b4e8fcdab83
6 changes: 6 additions & 0 deletions .size-limit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,10 @@ module.exports = [
limit: '48 KB',
ignore: ['@sentry/browser', '@sentry/utils', '@sentry/core', '@sentry/types'],
},
{
name: '@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)',
path: 'packages/tracing/build/bundles/bundle.tracing.replay.min.js',
gzip: true,
limit: '80 KB',
},
];
8 changes: 1 addition & 7 deletions packages/replay/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,7 @@ You have to add it in addition to the Sentry Browser SDK bundle:
```js
// Browser SDK bundle
<script
src="https://browser.sentry-cdn.com/7.24.1/bundle.tracing.min.js"
crossorigin="anonymous"
></script>

// Replay integration bundle
<script
src="https://browser.sentry-cdn.com/7.24.1/replay.min.js"
Comment on lines -108 to -114
Copy link
Member

@Lms24 Lms24 Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

l: Hmm it probably makes sense to show the full CDN bundle here but I'd like to keep the addon bundle around and documented (at least in docs) as I think some people might prefer it 🤔 Especially, if we're considering using the loader to lazy load it in the future.

Copy link
Member Author

@mydea mydea Jan 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm yeah, I guess the reason to use it is if you want replay but not tracing - fair! I can add both somehow - probably leave the "full" bundle on top and add a section below on standalone usage.

Copy link
Member Author

@mydea mydea Jan 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added another section below 👍

src="https://browser.sentry-cdn.com/7.31.0/bundle.tracing.replay.min.js"
Copy link
Member

@Lms24 Lms24 Jan 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't comment there directly but:
L95-96: Let's remove the text as this doesn't apply anymore if we tell them in this snippet to use the full bundle.

crossorigin="anonymous"
></script>

Expand Down
26 changes: 26 additions & 0 deletions packages/tracing/rollup.bundle.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import replace from '@rollup/plugin-replace';

import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js';

import pkg from './package.json';

const builds = [];

['es5', 'es6'].forEach(jsVersion => {
Expand All @@ -14,4 +18,26 @@ const builds = [];
builds.push(...makeBundleConfigVariants(baseBundleConfig));
});

// Full bundle incl. replay only avaialable for es6
const replayBaseBundleConfig = makeBaseBundleConfig({
bundleType: 'standalone',
entrypoints: ['src/index.bundle.replay.ts'],
jsVersion: 'es6',
licenseTitle: '@sentry/tracing & @sentry/browser & @sentry/replay',
outputFileBase: () => 'bundles/bundle.tracing.replay',
includeReplay: true,
packageSpecificConfig: {
plugins: [
replace({
preventAssignment: true,
values: {
__SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
Copy link
Member Author

@mydea mydea Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reminder to ourselves: In the next version, we should get rid of this. By now all docs etc. point to importing replay directly from @sentry/browser, so this should always be in sync.

Copy link
Member

@AbhiPrasad AbhiPrasad Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we document this here #5194 or in a new issue?

Copy link
Member

@AbhiPrasad AbhiPrasad Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wait you mean next version of the SDK, not next major version. Ignore me!

Copy link
Member

@Lms24 Lms24 Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this needs to be in a major release. We're tracking this in #6366

},
}),
],
},
});

builds.push(...makeBundleConfigVariants(replayBaseBundleConfig));

export default builds;
7 changes: 7 additions & 0 deletions packages/tracing/src/index.bundle.replay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Replay } from '@sentry/browser';

import * as Sentry from './index.bundle';

Sentry.Integrations.Replay = Replay;
Copy link
Member Author

@mydea mydea Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was the easiest/cleanest way I could find to handle this in a dedicated input file. Otherwise it gets quite messy when trying to do this inside of index.bundle.ts 😬

Copy link
Member Author

@mydea mydea Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: This means we only have a single default export here, and can't do our usual import * as Sentry stuff. but since we only use this to generate the bundle, and there it works as expected, I'd say that's fine?

Copy link
Member

@Lms24 Lms24 Jan 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is fine and with this change, the full CDN bundle usage is identical to the addon bundle (docs).


export default Sentry;
2 changes: 1 addition & 1 deletion packages/tracing/src/index.bundle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ if (GLOBAL_OBJ.Sentry && GLOBAL_OBJ.Sentry.Integrations) {
windowIntegrations = GLOBAL_OBJ.Sentry.Integrations;
}

const INTEGRATIONS = {
const INTEGRATIONS: Record<string, unknown> = {
...windowIntegrations,
...BrowserIntegrations,
BrowserTracing,
Expand Down
9 changes: 7 additions & 2 deletions rollup/bundleHelpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ import { mergePlugins } from './utils';
const BUNDLE_VARIANTS = ['.js', '.min.js', '.debug.min.js'];

export function makeBaseBundleConfig(options) {
const { bundleType, entrypoints, jsVersion, licenseTitle, outputFileBase, packageSpecificConfig } = options;
const { bundleType, entrypoints, jsVersion, licenseTitle, outputFileBase, packageSpecificConfig, includeReplay } =
options;

const nodeResolvePlugin = makeNodeResolvePlugin();
const sucrasePlugin = makeSucrasePlugin();
Expand All @@ -45,9 +46,13 @@ export function makeBaseBundleConfig(options) {
name: 'Sentry',
},
context: 'window',
plugins: [markAsBrowserBuildPlugin, excludeReplayPlugin],
plugins: [markAsBrowserBuildPlugin],
};

if (!includeReplay) {
standAloneBundleConfig.plugins.push(excludeReplayPlugin);
}

// used by `@sentry/integrations` and `@sentry/wasm` (bundles which need to be combined with a stand-alone SDK bundle)
const addOnBundleConfig = {
// These output settings are designed to mimic an IIFE. We don't use Rollup's `iife` format because we don't want to
Expand Down