-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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
feat(replay): Add ReplayCanvas
integration
#10112
Merged
Merged
Changes from all commits
Commits
Show all changes
50 commits
Select commit
Hold shift + click to select a range
62bd2bb
feat(replay): Add `ReplayCanvas` integration
mydea 5ee991b
new quality options
billyvg 14d8836
fix
billyvg 7ce25c5
create replay-canvas package
billyvg 230b5bb
cleanup repo
billyvg f9bf43d
remove local path
billyvg 748076f
add craft/build items
billyvg 2a214f8
add to resolutions
billyvg af1819d
change to not use `_experiments` for canvas
billyvg 39e8788
revert entrypoint change
billyvg 5d9f5c3
move tests to dev-packages
billyvg cdf1ed9
update tests
billyvg 458b0c8
remove old template
billyvg 820879d
CR fixes
billyvg f3290c4
do not publish as separate package
billyvg 80bd36f
convert to fn
billyvg b5e1e9c
remove yarn lockfile
billyvg 46b5f50
refactor out integrations abstraction
billyvg 74d7565
bump version
billyvg 5e5991c
lint
billyvg 39eb70b
update eslint
billyvg 0dc1ea9
upgrade rrweb pkg
billyvg 0e7963a
add snapshot() to interface
billyvg 7cbfe1a
missing setupOnce
billyvg 8aededc
litn
billyvg b5e69ee
fix test
billyvg ecc4a85
remove old test, we have other coverage
billyvg 57046cd
add replaycanvas to replay bundles
billyvg 498dfd1
forgot shims
billyvg 138c581
debug playwright test
billyvg ea6c74e
Revert "debug playwright test"
billyvg 62ddb76
dont mangle _canvas
billyvg 46d3859
fix types
billyvg 3160c19
lint
billyvg a316a10
wait for replay request
billyvg 7c29642
Revert "add replaycanvas to replay bundles"
billyvg 5fa012d
Revert "forgot shims"
billyvg b2686b3
skip CDN bundles for canvas tests
billyvg 7b11d63
add `canvas` to options event
billyvg 0b2e850
move replay-canvas to devDeps
billyvg 097b5c7
canvas --> shouldRecordCanvas
billyvg 223ae91
fix tests for optionsEvent
billyvg 4c412da
move back to deps
billyvg 6014437
lint
billyvg 94b8ac1
remove private: true, fails the e2e tests
billyvg 60dcc35
fix optionEvent tests w/ shouldRecordCanvas
billyvg b87f421
add core as dep to replay-canvas
billyvg 1530509
fix types due to https://github.com/getsentry/sentry-javascript/pull/…
billyvg 4d82a1f
lint
billyvg 006133b
Revert "do not publish as separate package"
billyvg File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
...ackages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationFirst/init.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
window.Replay = new Sentry.Replay({ | ||
flushMinDelay: 200, | ||
flushMaxDelay: 200, | ||
minReplayDuration: 0, | ||
}); | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
sampleRate: 0, | ||
replaysSessionSampleRate: 1.0, | ||
replaysOnErrorSampleRate: 0.0, | ||
debug: true, | ||
|
||
integrations: [new Sentry.ReplayCanvas(), window.Replay], | ||
}); |
31 changes: 31 additions & 0 deletions
31
...ackages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationFirst/test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { expect } from '@playwright/test'; | ||
|
||
import { sentryTest } from '../../../../utils/fixtures'; | ||
import { getReplaySnapshot, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers'; | ||
|
||
sentryTest('sets up canvas when adding ReplayCanvas integration first', async ({ getLocalTestUrl, page }) => { | ||
if (shouldSkipReplayTest() || (process.env.PW_BUNDLE || '').startsWith('bundle')) { | ||
sentryTest.skip(); | ||
} | ||
|
||
const reqPromise0 = waitForReplayRequest(page, 0); | ||
|
||
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 getLocalTestUrl({ testDir: __dirname }); | ||
|
||
await page.goto(url); | ||
await reqPromise0; | ||
|
||
const replay = await getReplaySnapshot(page); | ||
const canvasOptions = replay._canvas; | ||
expect(canvasOptions?.sampling.canvas).toBe(2); | ||
expect(canvasOptions?.dataURLOptions.quality).toBe(0.4); | ||
expect(replay._hasCanvas).toBe(true); | ||
}); |
18 changes: 18 additions & 0 deletions
18
...ckages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationSecond/init.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
window.Replay = new Sentry.Replay({ | ||
flushMinDelay: 200, | ||
flushMaxDelay: 200, | ||
minReplayDuration: 0, | ||
}); | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
sampleRate: 0, | ||
replaysSessionSampleRate: 1.0, | ||
replaysOnErrorSampleRate: 0.0, | ||
debug: true, | ||
|
||
integrations: [window.Replay, new Sentry.ReplayCanvas()], | ||
}); |
31 changes: 31 additions & 0 deletions
31
...ckages/browser-integration-tests/suites/replay/canvas/withCanvasIntegrationSecond/test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { expect } from '@playwright/test'; | ||
|
||
import { sentryTest } from '../../../../utils/fixtures'; | ||
import { getReplaySnapshot, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers'; | ||
|
||
sentryTest('sets up canvas when adding ReplayCanvas integration after Replay', async ({ getLocalTestUrl, page }) => { | ||
if (shouldSkipReplayTest() || (process.env.PW_BUNDLE || '').startsWith('bundle')) { | ||
sentryTest.skip(); | ||
} | ||
|
||
const reqPromise0 = waitForReplayRequest(page, 0); | ||
|
||
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 getLocalTestUrl({ testDir: __dirname }); | ||
|
||
await page.goto(url); | ||
await reqPromise0; | ||
|
||
const replay = await getReplaySnapshot(page); | ||
const canvasOptions = replay._canvas; | ||
expect(canvasOptions?.sampling.canvas).toBe(2); | ||
expect(canvasOptions?.dataURLOptions.quality).toBe(0.4); | ||
expect(replay._hasCanvas).toBe(true); | ||
}); |
18 changes: 18 additions & 0 deletions
18
dev-packages/browser-integration-tests/suites/replay/canvas/withoutCanvasIntegration/init.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import * as Sentry from '@sentry/browser'; | ||
|
||
window.Sentry = Sentry; | ||
window.Replay = new Sentry.Replay({ | ||
flushMinDelay: 200, | ||
flushMaxDelay: 200, | ||
minReplayDuration: 0, | ||
}); | ||
|
||
Sentry.init({ | ||
dsn: 'https://public@dsn.ingest.sentry.io/1337', | ||
sampleRate: 0, | ||
replaysSessionSampleRate: 1.0, | ||
replaysOnErrorSampleRate: 0.0, | ||
debug: true, | ||
|
||
integrations: [window.Replay], | ||
}); |
27 changes: 27 additions & 0 deletions
27
dev-packages/browser-integration-tests/suites/replay/canvas/withoutCanvasIntegration/test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { expect } from '@playwright/test'; | ||
|
||
import { sentryTest } from '../../../../utils/fixtures'; | ||
import { getReplaySnapshot, shouldSkipReplayTest } from '../../../../utils/replayHelpers'; | ||
|
||
sentryTest('does not setup up canvas without ReplayCanvas integration', async ({ getLocalTestUrl, page }) => { | ||
if (shouldSkipReplayTest()) { | ||
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 getLocalTestUrl({ testDir: __dirname }); | ||
|
||
await page.goto(url); | ||
|
||
const replay = await getReplaySnapshot(page); | ||
const canvasOptions = replay._canvas; | ||
expect(canvasOptions).toBe(undefined); | ||
expect(replay._hasCanvas).toBe(false); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
node_modules/ | ||
build/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file | ||
// lives | ||
|
||
// ESLint config docs: https://eslint.org/docs/user-guide/configuring/ | ||
|
||
module.exports = { | ||
extends: ['../../.eslintrc.js'], | ||
overrides: [ | ||
{ | ||
files: ['src/**/*.ts'], | ||
rules: { | ||
'@sentry-internal/sdk/no-unsupported-es6-methods': 'off', | ||
}, | ||
}, | ||
{ | ||
files: ['jest.setup.ts', 'jest.config.ts'], | ||
parserOptions: { | ||
project: ['tsconfig.test.json'], | ||
}, | ||
rules: { | ||
'no-console': 'off', | ||
}, | ||
}, | ||
], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
node_modules | ||
/*.tgz | ||
.eslintcache | ||
build |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need to publish this? Or could we just inline this into browser/replay, same as we do with e.g. replay-worker? IMHO if we can avoid to publish it, we should!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mydea I added this back, it's been a pain trying to test this package without it being published. e.g. in my test app, I'll use
yalc
to add@sentry/browser @sentry/replay
, but yarn will complain: