-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react): Add
Sentry.reactErrorHandler
(#12147)
This PR introduces `Sentry.reactErrorHandler`, which looks like so: ```js import * as Sentry from '@sentry/react'; import { hydrateRoot } from "react-dom/client"; ReactDOM.hydrateRoot( document.getElementById("root"), <React.StrictMode> <App /> </React.StrictMode>, { onUncaughtError: Sentry.reactErrorHandler(), onCaughtError: Sentry.reactErrorHandler((error, errorInfo) => { // optional callback if users want custom config. }), } ); ``` To validate this change, we add a react 19 e2e test.
- Loading branch information
1 parent
4644dd7
commit 7185a53
Showing
21 changed files
with
540 additions
and
149 deletions.
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
29 changes: 29 additions & 0 deletions
29
dev-packages/e2e-tests/test-applications/react-19/.gitignore
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,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 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 |
57 changes: 57 additions & 0 deletions
57
dev-packages/e2e-tests/test-applications/react-19/package.json
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,57 @@ | ||
{ | ||
"name": "react-19-test-app", | ||
"version": "0.1.0", | ||
"private": true, | ||
"dependencies": { | ||
"@sentry/react": "latest || *", | ||
"@testing-library/jest-dom": "5.14.1", | ||
"@testing-library/react": "13.0.0", | ||
"@testing-library/user-event": "13.2.1", | ||
"history": "4.9.0", | ||
"@types/history": "4.7.11", | ||
"@types/jest": "27.0.1", | ||
"@types/node": "16.7.13", | ||
"@types/react": "npm:types-react@rc", | ||
"@types/react-dom": "npm:types-react-dom@rc", | ||
"react": "19.0.0-rc-935180c7e0-20240524", | ||
"react-dom": "19.0.0-rc-935180c7e0-20240524", | ||
"react-scripts": "5.0.1", | ||
"typescript": "4.9.5", | ||
"web-vitals": "2.1.0" | ||
}, | ||
"scripts": { | ||
"build": "react-scripts build", | ||
"dev": "react-scripts start", | ||
"start": "serve -s build", | ||
"test": "playwright test", | ||
"clean": "npx rimraf node_modules pnpm-lock.yaml", | ||
"test:build": "pnpm install && npx playwright install && pnpm build", | ||
"test:assert": "pnpm test" | ||
}, | ||
"eslintConfig": { | ||
"extends": [ | ||
"react-app", | ||
"react-app/jest" | ||
] | ||
}, | ||
"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.43.1", | ||
"@sentry-internal/event-proxy-server": "link:../../../event-proxy-server", | ||
"serve": "14.0.1" | ||
}, | ||
"volta": { | ||
"extends": "../../package.json" | ||
} | ||
} |
82 changes: 82 additions & 0 deletions
82
dev-packages/e2e-tests/test-applications/react-19/playwright.config.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,82 @@ | ||
import type { PlaywrightTestConfig } from '@playwright/test'; | ||
import { devices } from '@playwright/test'; | ||
|
||
const reactPort = 3030; | ||
const eventProxyPort = 3031; | ||
|
||
/** | ||
* See https://playwright.dev/docs/test-configuration. | ||
*/ | ||
const config: PlaywrightTestConfig = { | ||
testDir: './tests', | ||
/* Maximum time one test can run for. */ | ||
timeout: 150_000, | ||
expect: { | ||
/** | ||
* Maximum time expect() should wait for the condition to be met. | ||
* For example in `await expect(locator).toHaveText();` | ||
*/ | ||
timeout: 5000, | ||
}, | ||
/* Run tests in files in parallel */ | ||
fullyParallel: true, | ||
/* Fail the build on CI if you accidentally left test.only in the source code. */ | ||
forbidOnly: !!process.env.CI, | ||
/* Retry on CI only */ | ||
retries: 0, | ||
/* Opt out of parallel tests on CI. */ | ||
workers: 1, | ||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */ | ||
reporter: 'list', | ||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ | ||
use: { | ||
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ | ||
actionTimeout: 0, | ||
|
||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ | ||
trace: 'on-first-retry', | ||
|
||
baseURL: `http://localhost:${reactPort}`, | ||
}, | ||
|
||
/* Configure projects for major browsers */ | ||
projects: [ | ||
{ | ||
name: 'chromium', | ||
use: { | ||
...devices['Desktop Chrome'], | ||
}, | ||
}, | ||
// For now we only test Chrome! | ||
// { | ||
// name: 'firefox', | ||
// use: { | ||
// ...devices['Desktop Firefox'], | ||
// }, | ||
// }, | ||
// { | ||
// name: 'webkit', | ||
// use: { | ||
// ...devices['Desktop Safari'], | ||
// }, | ||
// }, | ||
], | ||
|
||
/* Run your local dev server before starting the tests */ | ||
|
||
webServer: [ | ||
{ | ||
command: 'node start-event-proxy.mjs', | ||
port: eventProxyPort, | ||
}, | ||
{ | ||
command: 'pnpm start', | ||
port: reactPort, | ||
env: { | ||
PORT: `${reactPort}`, | ||
}, | ||
}, | ||
], | ||
}; | ||
|
||
export default config; |
24 changes: 24 additions & 0 deletions
24
dev-packages/e2e-tests/test-applications/react-19/public/index.html
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,24 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="theme-color" content="#000000" /> | ||
<meta name="description" content="Web site created using create-react-app" /> | ||
<title>React App</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
5 changes: 5 additions & 0 deletions
5
dev-packages/e2e-tests/test-applications/react-19/src/globals.d.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,5 @@ | ||
interface Window { | ||
recordedTransactions?: string[]; | ||
capturedExceptionId?: string; | ||
sentryReplayId?: string; | ||
} |
29 changes: 29 additions & 0 deletions
29
dev-packages/e2e-tests/test-applications/react-19/src/index.tsx
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,29 @@ | ||
import * as Sentry from '@sentry/react'; | ||
// biome-ignore lint/nursery/noUnusedImports: <explanation> | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom/client'; | ||
import Index from './pages/Index'; | ||
|
||
Sentry.init({ | ||
environment: 'qa', // dynamic sampling bias to keep transactions | ||
dsn: | ||
process.env.REACT_APP_E2E_TEST_DSN || | ||
'https://3b6c388182fb435097f41d181be2b2ba@o4504321058471936.ingest.sentry.io/4504321066008576', | ||
release: 'e2e-test', | ||
tunnel: 'http://localhost:3031/', // proxy server | ||
}); | ||
|
||
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement, { | ||
onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => { | ||
console.warn(error, errorInfo); | ||
}), | ||
onCaughtError: Sentry.reactErrorHandler((error, errorInfo) => { | ||
console.warn(error, errorInfo); | ||
}), | ||
}); | ||
|
||
root.render( | ||
<div> | ||
<Index /> | ||
</div>, | ||
); |
51 changes: 51 additions & 0 deletions
51
dev-packages/e2e-tests/test-applications/react-19/src/pages/Index.jsx
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,51 @@ | ||
import * as React from 'react'; | ||
|
||
const Index = () => { | ||
const [caughtError, setCaughtError] = React.useState(false); | ||
const [uncaughtError, setUncaughtError] = React.useState(false); | ||
|
||
return ( | ||
<> | ||
<div> | ||
<SampleErrorBoundary> | ||
<h1>React 19</h1> | ||
{caughtError && <Throw error="caught" />} | ||
<button id="caughtError-button" onClick={() => setCaughtError(true)}> | ||
Throw caught error | ||
</button> | ||
</SampleErrorBoundary> | ||
</div> | ||
<div> | ||
{uncaughtError && <Throw error="uncaught" />} | ||
<button id="uncaughtError-button" onClick={() => setUncaughtError(true)}> | ||
Throw uncaught error | ||
</button> | ||
</div> | ||
</> | ||
); | ||
}; | ||
|
||
function Throw({ error }) { | ||
throw new Error(`${error} error`); | ||
} | ||
|
||
class SampleErrorBoundary extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { error: null }; | ||
} | ||
|
||
componentDidCatch(error, errorInfo) { | ||
this.setState({ error }); | ||
// no-op | ||
} | ||
|
||
render() { | ||
if (this.state.error) { | ||
return <div>Caught an error: {JSON.stringify(this.state.error)}</div>; | ||
} | ||
return this.props.children; | ||
} | ||
} | ||
|
||
export default Index; |
1 change: 1 addition & 0 deletions
1
dev-packages/e2e-tests/test-applications/react-19/src/react-app-env.d.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 @@ | ||
/// <reference types="react-scripts" /> |
6 changes: 6 additions & 0 deletions
6
dev-packages/e2e-tests/test-applications/react-19/start-event-proxy.mjs
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,6 @@ | ||
import { startEventProxyServer } from '@sentry-internal/event-proxy-server'; | ||
|
||
startEventProxyServer({ | ||
port: 3031, | ||
proxyServerName: 'react-19', | ||
}); |
42 changes: 42 additions & 0 deletions
42
dev-packages/e2e-tests/test-applications/react-19/tests/errors.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,42 @@ | ||
import { expect, test } from '@playwright/test'; | ||
import { waitForError } from '@sentry-internal/event-proxy-server'; | ||
|
||
test('Catches errors caught by error boundary', async ({ page }) => { | ||
page.on('console', message => { | ||
expect(message.text()).toContain('caught error'); | ||
}); | ||
|
||
const errorEventPromise = waitForError('react-19', event => { | ||
return !event.type && event.exception?.values?.[0]?.value === 'caught error'; | ||
}); | ||
|
||
await page.goto('/'); | ||
|
||
const exceptionButton = page.locator('id=caughtError-button'); | ||
await exceptionButton.click(); | ||
|
||
const errorEvent = await errorEventPromise; | ||
|
||
expect(errorEvent.exception?.values).toHaveLength(2); | ||
expect(errorEvent.exception?.values?.[0]?.value).toBe('caught error'); | ||
}); | ||
|
||
test('Catches errors uncaught by error boundary', async ({ page }) => { | ||
page.on('console', message => { | ||
expect(message.text()).toContain('uncaught error'); | ||
}); | ||
|
||
const errorEventPromise = waitForError('react-19', event => { | ||
return !event.type && event.exception?.values?.[0]?.value === 'uncaught error'; | ||
}); | ||
|
||
await page.goto('/'); | ||
|
||
const exceptionButton = page.locator('id=uncaughtError-button'); | ||
await exceptionButton.click(); | ||
|
||
const errorEvent = await errorEventPromise; | ||
|
||
expect(errorEvent.exception?.values).toHaveLength(2); | ||
expect(errorEvent.exception?.values?.[0]?.value).toBe('uncaught error'); | ||
}); |
20 changes: 20 additions & 0 deletions
20
dev-packages/e2e-tests/test-applications/react-19/tsconfig.json
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,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.