Skip to content

test(replay): Test against CDN bundles in Playwright integration tests #6770

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.

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
merged 10 commits into from
Jan 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,6 @@ jobs:
- name: Check build cache
uses: actions/cache@v3
id: cache_built_packages
if: needs.job_get_metadata.outputs.force_skip_cache == 'false'
with:
path: ${{ env.CACHED_BUILD_PATHS }}
key: ${{ env.BUILD_CACHE_KEY }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { sentryTest } from '../../../utils/fixtures';
import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';

sentryTest('captureReplay', async ({ getLocalTestPath, page }) => {
// Currently bundle tests are not supported for replay
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
// Replay bundles are es6 only
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
sentryTest.skip();
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as Sentry from '@sentry/browser';

window.Sentry = Sentry;
window.Replay = new Sentry.Replay({
flushMinDelay: 200,
initialFlushDelay: 200,
});

Sentry.init({
dsn: 'https://[email protected]/1337',
sampleRate: 0,
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 0.0,

integrations: [window.Replay],
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button onclick="console.log('Test log')">Click me</button>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { expect } from '@playwright/test';
import { SDK_VERSION } from '@sentry/browser';
import type { Event } from '@sentry/types';

import { sentryTest } from '../../../utils/fixtures';
import { getFirstSentryEnvelopeRequest } from '../../../utils/helpers';

sentryTest('captureReplay', async ({ getLocalTestPath, page }) => {
// For this test, we skip all bundle tests, as we're only interested in Replay being correctly
// exported from the `@sentry/browser` npm package.
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
sentryTest.skip();
}

await page.route('https://dsn.ingest.sentry.io/**/*', route => {
return route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ id: 'test-id' }),
});
});

const url = await getLocalTestPath({ testDir: __dirname });
await page.goto(url);

await page.click('button');
await page.waitForTimeout(300);

const replayEvent = await getFirstSentryEnvelopeRequest<Event>(page, url);

expect(replayEvent).toBeDefined();
expect(replayEvent).toEqual({
type: 'replay_event',
timestamp: expect.any(Number),
error_ids: [],
trace_ids: [],
urls: [expect.stringContaining('/dist/index.html')],
replay_id: expect.stringMatching(/\w{32}/),
segment_id: 2,
replay_type: 'session',
event_id: expect.stringMatching(/\w{32}/),
environment: 'production',
sdk: {
integrations: [
'InboundFilters',
'FunctionToString',
'TryCatch',
'Breadcrumbs',
'GlobalHandlers',
'LinkedErrors',
'Dedupe',
'HttpContext',
'Replay',
],
version: SDK_VERSION,
name: 'sentry.javascript.browser',
},
sdkProcessingMetadata: {},
request: {
url: expect.stringContaining('/dist/index.html'),
headers: {
'User-Agent': expect.stringContaining(''),
},
},
platform: 'javascript',
tags: { sessionSampleRate: 1, errorSampleRate: 0 },
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { getReplaySnapshot } from '../../../utils/helpers';

sentryTest('errorResponse', async ({ getLocalTestPath, page }) => {
// Currently bundle tests are not supported for replay
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
sentryTest.skip();
}

Expand All @@ -31,7 +31,9 @@ sentryTest('errorResponse', async ({ getLocalTestPath, page }) => {
await page.waitForTimeout(5001);

expect(called).toBe(1);

const replay = await getReplaySnapshot(page);

expect(replay['_isEnabled']).toBe(false);
// @ts-ignore private API
expect(replay._isEnabled).toBe(false);
});
3 changes: 2 additions & 1 deletion packages/integration-tests/suites/replay/init.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as Sentry from '@sentry/browser';
import { Replay } from '@sentry/replay';

window.Sentry = Sentry;
window.Replay = new Sentry.Replay({
window.Replay = new Replay({
flushMinDelay: 200,
initialFlushDelay: 200,
});
Expand Down
3 changes: 2 additions & 1 deletion packages/integration-tests/suites/replay/sampling/init.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as Sentry from '@sentry/browser';
import { Replay } from '@sentry/replay';

window.Sentry = Sentry;
window.Replay = new Sentry.Replay({
window.Replay = new Replay({
flushMinDelay: 200,
initialFlushDelay: 200,
});
Expand Down
4 changes: 2 additions & 2 deletions packages/integration-tests/suites/replay/sampling/test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { sentryTest } from '../../../utils/fixtures';
import { getReplaySnapshot } from '../../../utils/helpers';

sentryTest('sampling', async ({ getLocalTestPath, page }) => {
// Currently bundle tests are not supported for replay
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_')) {
// Replay bundles are es6 only
if (process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) {
sentryTest.skip();
}

Expand Down
18 changes: 18 additions & 0 deletions packages/integration-tests/utils/generatePlugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ const BUNDLE_PATHS: Record<string, Record<string, string>> = {
bundle_es6: 'build/bundles/[INTEGRATION_NAME].js',
bundle_es6_min: 'build/bundles/[INTEGRATION_NAME].min.js',
},
replay: {
cjs: 'build/npm/cjs/index.js',
esm: 'build/npm/esm/index.js',
bundle_es6: 'build/bundles/replay.js',
bundle_es6_min: 'build/bundles/replay.min.js',
},
};

/*
Expand Down Expand Up @@ -87,6 +93,7 @@ function generateSentryAlias(): Record<string, string> {
class SentryScenarioGenerationPlugin {
public requiresTracing: boolean = false;
public requiredIntegrations: string[] = [];
public requiresReplay = false;

private _name: string = 'SentryScenarioGenerationPlugin';

Expand All @@ -99,6 +106,7 @@ class SentryScenarioGenerationPlugin {
'@sentry/browser': 'Sentry',
'@sentry/tracing': 'Sentry',
'@sentry/integrations': 'Sentry.Integrations',
'@sentry/replay': 'Sentry.Integrations',
}
: {};

Expand All @@ -113,6 +121,8 @@ class SentryScenarioGenerationPlugin {
this.requiresTracing = true;
} else if (source === '@sentry/integrations') {
this.requiredIntegrations.push(statement.specifiers[0].imported.name.toLowerCase());
} else if (source === '@sentry/replay') {
this.requiresReplay = true;
}
},
);
Expand Down Expand Up @@ -140,6 +150,14 @@ class SentryScenarioGenerationPlugin {
data.assetTags.scripts.unshift(integrationObject);
});

if (this.requiresReplay && BUNDLE_PATHS['replay'][bundleKey]) {
const replayObject = createHtmlTagObject('script', {
src: path.resolve(PACKAGES_DIR, 'replay', BUNDLE_PATHS['replay'][bundleKey]),
});

data.assetTags.scripts.unshift(replayObject);
}

data.assetTags.scripts.unshift(bundleObject);
}

Expand Down
3 changes: 3 additions & 0 deletions rollup/plugins/bundlePlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,9 @@ export function makeTerserPlugin() {
'_driver',
'_initStorage',
'_support',
// We want to keept he _replay and _isEnabled variable unmangled to enable integration tests to access it
'_replay',
'_isEnabled',
],
},
},
Expand Down