test(browser): Add e2e tests for the @sentry/browser package
#13125
There are no files selected for viewing
This file contains hidden or 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 hidden or 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,29 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| .env.local | ||
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
|
|
||
| /test-results/ | ||
| /playwright-report/ | ||
| /playwright/.cache/ | ||
|
|
||
| !*.d.ts |
This file contains hidden or 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 @@ | ||
| @sentry:registry=http://127.0.0.1:4873 | ||
| @sentry-internal:registry=http://127.0.0.1:4873 |
This file contains hidden or 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,49 @@ | ||
| import * as path from 'path'; | ||
| import * as url from 'url'; | ||
| import HtmlWebpackPlugin from 'html-webpack-plugin'; | ||
| import TerserPlugin from 'terser-webpack-plugin'; | ||
| import webpack from 'webpack'; | ||
|
|
||
| const __dirname = path.dirname(url.fileURLToPath(import.meta.url)); | ||
|
|
||
| webpack( | ||
| { | ||
| entry: path.join(__dirname, 'src/index.js'), | ||
| output: { | ||
| path: path.join(__dirname, 'build'), | ||
| filename: 'app.js', | ||
| }, | ||
| optimization: { | ||
| minimize: true, | ||
| minimizer: [new TerserPlugin()], | ||
| }, | ||
| plugins: [ | ||
| new webpack.EnvironmentPlugin(['E2E_TEST_DSN']), | ||
| new HtmlWebpackPlugin({ | ||
| template: path.join(__dirname, 'public/index.html'), | ||
| }), | ||
| ], | ||
| mode: 'production', | ||
| }, | ||
| (err, stats) => { | ||
| if (err) { | ||
| console.error(err.stack || err); | ||
| if (err.details) { | ||
| console.error(err.details); | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| const info = stats.toJson(); | ||
|
|
||
| if (stats.hasErrors()) { | ||
| console.error(info.errors); | ||
| process.exit(1); | ||
| } | ||
|
|
||
| if (stats.hasWarnings()) { | ||
| console.warn(info.warnings); | ||
| process.exit(1); | ||
| } | ||
| }, | ||
| ); |
This file contains hidden or 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,41 @@ | ||
| { | ||
| "name": "default-browser-test-app", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "dependencies": { | ||
| "@sentry/browser": "latest || *", | ||
| "@types/node": "16.7.13", | ||
| "typescript": "4.9.5" | ||
| }, | ||
| "scripts": { | ||
| "start": "serve -s build", | ||
| "build": "node build.mjs", | ||
| "test": "playwright test", | ||
| "clean": "npx rimraf node_modules pnpm-lock.yaml", | ||
| "test:build": "pnpm install && npx playwright install && pnpm build", | ||
| "test:assert": "pnpm test" | ||
| }, | ||
| "browserslist": { | ||
| "production": [ | ||
| ">0.2%", | ||
| "not dead", | ||
| "not op_mini all" | ||
| ], | ||
| "development": [ | ||
| "last 1 chrome version", | ||
| "last 1 firefox version", | ||
| "last 1 safari version" | ||
| ] | ||
| }, | ||
| "devDependencies": { | ||
| "@playwright/test": "^1.44.1", | ||
| "@sentry-internal/test-utils": "link:../../../test-utils", | ||
| "webpack": "^5.91.0", | ||
| "serve": "14.0.1", | ||
| "terser-webpack-plugin": "^5.3.10", | ||
| "html-webpack-plugin": "^5.6.0" | ||
| }, | ||
| "volta": { | ||
| "extends": "../../package.json" | ||
| } | ||
| } |
This file contains hidden or 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,7 @@ | ||
| import { getPlaywrightConfig } from '@sentry-internal/test-utils'; | ||
|
|
||
| const config = getPlaywrightConfig({ | ||
| startCommand: `pnpm start`, | ||
| }); | ||
|
|
||
| export default config; |
This file contains hidden or 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,23 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Default Browser App</title> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
|
|
||
| <input type="button" value="Capture Exception" id="exception-button" /> | ||
|
|
||
| <div id="navigation"> | ||
|
|
||
| <a id="navigation-link" href="#navigation-target">Navigation Link</a> | ||
|
|
||
| <div id="navigation-target">Navigated Element</div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- The script tags for the bundled JavaScript files will be injected here by HtmlWebpackPlugin in build.mjs--> | ||
| </body> | ||
| </html> |
This file contains hidden or 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'; | ||
|
There was a problem hiding this comment. Changed to |
||
|
|
||
| Sentry.init({ | ||
| dsn: process.env.E2E_TEST_DSN, | ||
| integrations: [Sentry.browserTracingIntegration()], | ||
| tracesSampleRate: 1.0, | ||
|
There was a problem hiding this comment. For spans and transactions to be emitted, you also need to set There was a problem hiding this comment. This really was the missing link! Only now do i notice that all the e2e suites that test for spans and transactions have this option enabled to 1.0. |
||
| release: 'e2e-test', | ||
| environment: 'qa', | ||
|
There was a problem hiding this comment. just FYI, you couldn't have known this: setting the environment to |
||
| tunnel: 'http://localhost:3031', | ||
| }); | ||
|
|
||
| document.getElementById('exception-button').addEventListener('click', () => { | ||
| throw new Error('I am an error!'); | ||
| }); | ||
|
|
||
| document.getElementById('navigation-link').addEventListener('click', () => { | ||
| document.getElementById('navigation-target').scrollIntoView({ behavior: 'smooth' }); | ||
| }); | ||
This file contains hidden or 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,6 @@ | ||
| import { startEventProxyServer } from '@sentry-internal/test-utils'; | ||
|
|
||
| startEventProxyServer({ | ||
| port: 3031, | ||
| proxyServerName: 'default-browser', | ||
| }); |
This file contains hidden or 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,58 @@ | ||
| import { expect, test } from '@playwright/test'; | ||
| import { waitForError, waitForTransaction } from '@sentry-internal/test-utils'; | ||
|
|
||
| test('captures an error', async ({ page }) => { | ||
| const errorEventPromise = waitForError('default-browser', event => { | ||
| return !event.type && event.exception?.values?.[0]?.value === 'I am an error!'; | ||
| }); | ||
|
|
||
| await page.goto('/'); | ||
|
|
||
| const exceptionButton = page.locator('id=exception-button'); | ||
| await exceptionButton.click(); | ||
|
|
||
| const errorEvent = await errorEventPromise; | ||
|
|
||
| expect(errorEvent.exception?.values).toHaveLength(1); | ||
| expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!'); | ||
|
|
||
| expect(errorEvent.transaction).toBe('/'); | ||
|
|
||
| expect(errorEvent.request).toEqual({ | ||
| url: 'http://localhost:3030/', | ||
| headers: expect.any(Object), | ||
| }); | ||
|
|
||
| expect(errorEvent.contexts?.trace).toEqual({ | ||
| trace_id: expect.any(String), | ||
| span_id: expect.any(String), | ||
| }); | ||
| }); | ||
|
|
||
| test('sets correct transactionName', async ({ page }) => { | ||
| const transactionPromise = waitForTransaction('default-browser', async transactionEvent => { | ||
| return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; | ||
| }); | ||
|
|
||
| const errorEventPromise = waitForError('default-browser', event => { | ||
| return !event.type && event.exception?.values?.[0]?.value === 'I am an error!'; | ||
| }); | ||
|
|
||
| await page.goto('/'); | ||
| const transactionEvent = await transactionPromise; | ||
|
|
||
| const exceptionButton = page.locator('id=exception-button'); | ||
| await exceptionButton.click(); | ||
|
|
||
| const errorEvent = await errorEventPromise; | ||
|
|
||
| expect(errorEvent.exception?.values).toHaveLength(1); | ||
| expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!'); | ||
|
|
||
| expect(errorEvent.transaction).toEqual('/'); | ||
|
|
||
| expect(errorEvent.contexts?.trace).toEqual({ | ||
| trace_id: transactionEvent.contexts?.trace?.trace_id, | ||
| span_id: expect.not.stringContaining(transactionEvent.contexts?.trace?.span_id || ''), | ||
| }); | ||
| }); |
This file contains hidden or 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,118 @@ | ||
| import { expect, test } from '@playwright/test'; | ||
| import { waitForTransaction } from '@sentry-internal/test-utils'; | ||
|
|
||
| test('captures a pageload transaction', async ({ page }) => { | ||
| const transactionPromise = waitForTransaction('default-browser', async transactionEvent => { | ||
| return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; | ||
| }); | ||
|
|
||
| await page.goto(`/`); | ||
|
|
||
| const pageLoadTransaction = await transactionPromise; | ||
|
|
||
| expect(pageLoadTransaction).toEqual({ | ||
|
There was a problem hiding this comment. I thought I'd assert on quite a few fields here since we rarely do it this detailed and I'm curious if we get inconsistencies/flakes in this simple app already. We might need to adjust some checks if they get flaky but at least locally, this 100% consistent. |
||
| contexts: { | ||
| trace: { | ||
| data: expect.objectContaining({ | ||
| 'sentry.idle_span_finish_reason': 'idleTimeout', | ||
| 'sentry.op': 'pageload', | ||
| 'sentry.origin': 'auto.pageload.browser', | ||
| 'sentry.sample_rate': 1, | ||
| 'sentry.source': 'url', | ||
| }), | ||
| op: 'pageload', | ||
| origin: 'auto.pageload.browser', | ||
| span_id: expect.stringMatching(/[a-f0-9]{16}/), | ||
| trace_id: expect.stringMatching(/[a-f0-9]{32}/), | ||
| }, | ||
| }, | ||
| environment: 'qa', | ||
| event_id: expect.stringMatching(/[a-f0-9]{32}/), | ||
| measurements: { | ||
| 'connection.rtt': { | ||
| unit: 'millisecond', | ||
| value: expect.any(Number), | ||
| }, | ||
| fcp: { | ||
| unit: 'millisecond', | ||
| value: expect.any(Number), | ||
| }, | ||
| fp: { | ||
| unit: 'millisecond', | ||
| value: expect.any(Number), | ||
| }, | ||
| lcp: { | ||
| unit: 'millisecond', | ||
| value: expect.any(Number), | ||
| }, | ||
| ttfb: { | ||
| unit: 'millisecond', | ||
| value: expect.any(Number), | ||
| }, | ||
| 'ttfb.requestTime': { | ||
| unit: 'millisecond', | ||
| value: expect.any(Number), | ||
| }, | ||
| }, | ||
| platform: 'javascript', | ||
| release: 'e2e-test', | ||
| request: { | ||
| headers: { | ||
| 'User-Agent': expect.any(String), | ||
| }, | ||
| url: 'http://localhost:3030/', | ||
| }, | ||
| sdk: { | ||
| integrations: expect.any(Array), | ||
| name: 'sentry.javascript.browser', | ||
| packages: [ | ||
| { | ||
| name: 'npm:@sentry/browser', | ||
| version: expect.any(String), | ||
| }, | ||
| ], | ||
| version: expect.any(String), | ||
| }, | ||
| spans: expect.any(Array), | ||
| start_timestamp: expect.any(Number), | ||
| timestamp: expect.any(Number), | ||
| transaction: '/', | ||
| transaction_info: { | ||
| source: 'url', | ||
| }, | ||
| type: 'transaction', | ||
| }); | ||
| }); | ||
|
|
||
| test('captures a navigation transaction', async ({ page }) => { | ||
| page.on('console', msg => console.log(msg.text())); | ||
| const pageLoadTransactionPromise = waitForTransaction('default-browser', async transactionEvent => { | ||
| return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload'; | ||
| }); | ||
|
|
||
| const navigationTransactionPromise = waitForTransaction('default-browser', async transactionEvent => { | ||
| return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'navigation'; | ||
| }); | ||
|
|
||
| await page.goto(`/`); | ||
| await pageLoadTransactionPromise; | ||
|
|
||
| const linkElement = page.locator('id=navigation-link'); | ||
|
|
||
| await linkElement.click(); | ||
|
|
||
| const navigationTransaction = await navigationTransactionPromise; | ||
|
|
||
| expect(navigationTransaction).toMatchObject({ | ||
| contexts: { | ||
| trace: { | ||
| op: 'navigation', | ||
| origin: 'auto.navigation.browser', | ||
| }, | ||
| }, | ||
| transaction: '/', | ||
| transaction_info: { | ||
| source: 'url', | ||
| }, | ||
| }); | ||
| }); | ||
This file contains hidden or 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,20 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "es2018", | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "esModuleInterop": true, | ||
| "allowSyntheticDefaultImports": true, | ||
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "node", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "noEmit": true, | ||
| "jsx": "react" | ||
| }, | ||
| "include": ["src", "tests"] | ||
| } |
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.
I added the test app to our CI e2e testing matrix