diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index dd827c293a61..195e316581c3 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -1009,6 +1009,7 @@ jobs: 'nextjs-app-dir', 'nextjs-14', 'nextjs-15', + 'react-19', 'react-create-hash-router', 'react-router-6-use-routes', 'react-router-5', diff --git a/dev-packages/e2e-tests/test-applications/react-19/.gitignore b/dev-packages/e2e-tests/test-applications/react-19/.gitignore new file mode 100644 index 000000000000..84634c973eeb --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/.gitignore @@ -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 diff --git a/dev-packages/e2e-tests/test-applications/react-19/.npmrc b/dev-packages/e2e-tests/test-applications/react-19/.npmrc new file mode 100644 index 000000000000..070f80f05092 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/.npmrc @@ -0,0 +1,2 @@ +@sentry:registry=http://127.0.0.1:4873 +@sentry-internal:registry=http://127.0.0.1:4873 diff --git a/dev-packages/e2e-tests/test-applications/react-19/package.json b/dev-packages/e2e-tests/test-applications/react-19/package.json new file mode 100644 index 000000000000..4c2f7d0df36e --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/package.json @@ -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" + } +} diff --git a/dev-packages/e2e-tests/test-applications/react-19/playwright.config.ts b/dev-packages/e2e-tests/test-applications/react-19/playwright.config.ts new file mode 100644 index 000000000000..3d7268ce5dc1 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/playwright.config.ts @@ -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; diff --git a/dev-packages/e2e-tests/test-applications/react-19/public/index.html b/dev-packages/e2e-tests/test-applications/react-19/public/index.html new file mode 100644 index 000000000000..39da76522bea --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/public/index.html @@ -0,0 +1,24 @@ + + + + + + + + React App + + + +
+ + + diff --git a/dev-packages/e2e-tests/test-applications/react-19/src/globals.d.ts b/dev-packages/e2e-tests/test-applications/react-19/src/globals.d.ts new file mode 100644 index 000000000000..ffa61ca49acc --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/src/globals.d.ts @@ -0,0 +1,5 @@ +interface Window { + recordedTransactions?: string[]; + capturedExceptionId?: string; + sentryReplayId?: string; +} diff --git a/dev-packages/e2e-tests/test-applications/react-19/src/index.tsx b/dev-packages/e2e-tests/test-applications/react-19/src/index.tsx new file mode 100644 index 000000000000..6f6bb0640e73 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/src/index.tsx @@ -0,0 +1,29 @@ +import * as Sentry from '@sentry/react'; +// biome-ignore lint/nursery/noUnusedImports: +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( +
+ +
, +); diff --git a/dev-packages/e2e-tests/test-applications/react-19/src/pages/Index.jsx b/dev-packages/e2e-tests/test-applications/react-19/src/pages/Index.jsx new file mode 100644 index 000000000000..14fc3e9f97d1 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/src/pages/Index.jsx @@ -0,0 +1,51 @@ +import * as React from 'react'; + +const Index = () => { + const [caughtError, setCaughtError] = React.useState(false); + const [uncaughtError, setUncaughtError] = React.useState(false); + + return ( + <> +
+ +

React 19

+ {caughtError && } + + +
+
+ {uncaughtError && } + +
+ + ); +}; + +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
Caught an error: {JSON.stringify(this.state.error)}
; + } + return this.props.children; + } +} + +export default Index; diff --git a/dev-packages/e2e-tests/test-applications/react-19/src/react-app-env.d.ts b/dev-packages/e2e-tests/test-applications/react-19/src/react-app-env.d.ts new file mode 100644 index 000000000000..6431bc5fc6b2 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/dev-packages/e2e-tests/test-applications/react-19/start-event-proxy.mjs b/dev-packages/e2e-tests/test-applications/react-19/start-event-proxy.mjs new file mode 100644 index 000000000000..e0102436fdd0 --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/start-event-proxy.mjs @@ -0,0 +1,6 @@ +import { startEventProxyServer } from '@sentry-internal/event-proxy-server'; + +startEventProxyServer({ + port: 3031, + proxyServerName: 'react-19', +}); diff --git a/dev-packages/e2e-tests/test-applications/react-19/tests/errors.test.ts b/dev-packages/e2e-tests/test-applications/react-19/tests/errors.test.ts new file mode 100644 index 000000000000..9040d217d1bb --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/tests/errors.test.ts @@ -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'); +}); diff --git a/dev-packages/e2e-tests/test-applications/react-19/tsconfig.json b/dev-packages/e2e-tests/test-applications/react-19/tsconfig.json new file mode 100644 index 000000000000..4cc95dc2689a --- /dev/null +++ b/dev-packages/e2e-tests/test-applications/react-19/tsconfig.json @@ -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"] +} diff --git a/packages/react/README.md b/packages/react/README.md index 49c09247c9ea..5645b03d9fb0 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -20,7 +20,7 @@ To use this SDK, call `Sentry.init(options)` before you mount your React compone ```javascript import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import * as Sentry from '@sentry/react'; Sentry.init({ @@ -30,12 +30,39 @@ Sentry.init({ // ... -ReactDOM.render(, rootNode); +const container = document.getElementById(“app”); +const root = createRoot(container); +root.render(); -// Can also use with React Concurrent Mode -// ReactDOM.createRoot(rootNode).render(); +// also works with hydrateRoot +// const domNode = document.getElementById('root'); +// const root = hydrateRoot(domNode, reactNode); +// root.render(); ``` +### React 19 + +Starting with React 19, the `createRoot` and `hydrateRoot` methods expose error hooks that can be used to capture errors +automatically. Use the `Sentry.reactErrorHandler` function to capture errors in the error hooks you are interested in. + +```js +const container = document.getElementById(“app”); +const root = createRoot(container, { + // Callback called when an error is thrown and not caught by an Error Boundary. + onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => { + console.warn('Uncaught error', error, errorInfo.componentStack); + }), + // Callback called when React catches an error in an Error Boundary. + onCaughtError: Sentry.reactErrorHandler(), + // Callback called when React automatically recovers from errors. + onRecoverableError: Sentry.reactErrorHandler(), +}); +root.render(); +``` + +If you want more finely grained control over error handling, we recommend only adding the `onUncaughtError` and +`onRecoverableError` hooks and using an `ErrorBoundary` component instead of the `onCaughtError` hook. + ### ErrorBoundary `@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a diff --git a/packages/react/package.json b/packages/react/package.json index 9ab1ac01ec01..fe934846d07b 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -56,9 +56,9 @@ "@testing-library/react-hooks": "^7.0.2", "@types/history-4": "npm:@types/history@4.7.8", "@types/history-5": "npm:@types/history@4.7.8", - "@types/hoist-non-react-statics": "^3.3.1", + "@types/hoist-non-react-statics": "^3.3.5", "@types/node-fetch": "^2.6.0", - "@types/react": "^17.0.3", + "@types/react": "17.0.3", "@types/react-router-3": "npm:@types/react-router@3.0.24", "@types/react-router-4": "npm:@types/react-router@5.1.14", "@types/react-router-5": "npm:@types/react-router@5.1.14", diff --git a/packages/react/src/error.ts b/packages/react/src/error.ts new file mode 100644 index 000000000000..ce83e39e33ee --- /dev/null +++ b/packages/react/src/error.ts @@ -0,0 +1,106 @@ +import { captureException } from '@sentry/browser'; +import type { EventHint } from '@sentry/types'; +import { isError } from '@sentry/utils'; +import { version } from 'react'; +import type { ErrorInfo } from 'react'; + +/** + * See if React major version is 17+ by parsing version string. + */ +export function isAtLeastReact17(reactVersion: string): boolean { + const reactMajor = reactVersion.match(/^([^.]+)/); + return reactMajor !== null && parseInt(reactMajor[0]) >= 17; +} + +/** + * Recurse through `error.cause` chain to set cause on an error. + */ +export function setCause(error: Error & { cause?: Error }, cause: Error): void { + const seenErrors = new WeakSet(); + + function recurse(error: Error & { cause?: Error }, cause: Error): void { + // If we've already seen the error, there is a recursive loop somewhere in the error's + // cause chain. Let's just bail out then to prevent a stack overflow. + if (seenErrors.has(error)) { + return; + } + if (error.cause) { + seenErrors.add(error); + return recurse(error.cause, cause); + } + error.cause = cause; + } + + recurse(error, cause); +} + +/** + * Captures an error that was thrown by a React ErrorBoundary or React root. + * + * @param error The error to capture. + * @param errorInfo The errorInfo provided by React. + * @param hint Optional additional data to attach to the Sentry event. + * @returns the id of the captured Sentry event. + */ +export function captureReactException( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + error: any, + { componentStack }: ErrorInfo, + hint?: EventHint, +): string { + // If on React version >= 17, create stack trace from componentStack param and links + // to to the original error using `error.cause` otherwise relies on error param for stacktrace. + // Linking errors requires the `LinkedErrors` integration be enabled. + // See: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks + // + // Although `componentDidCatch` is typed to accept an `Error` object, it can also be invoked + // with non-error objects. This is why we need to check if the error is an error-like object. + // See: https://github.com/getsentry/sentry-javascript/issues/6167 + if (isAtLeastReact17(version) && isError(error) && componentStack) { + const errorBoundaryError = new Error(error.message); + errorBoundaryError.name = `React ErrorBoundary ${error.name}`; + errorBoundaryError.stack = componentStack; + + // Using the `LinkedErrors` integration to link the errors together. + setCause(error, errorBoundaryError); + } + + return captureException(error, { + ...hint, + captureContext: { + contexts: { react: { componentStack } }, + }, + }); +} + +/** + * Creates an error handler that can be used with the `onCaughtError`, `onUncaughtError`, + * and `onRecoverableError` options in `createRoot` and `hydrateRoot` React DOM methods. + * + * @param callback An optional callback that will be called after the error is captured. + * Use this to add custom handling for errors. + * + * @example + * + * ```JavaScript + * const root = createRoot(container, { + * onCaughtError: Sentry.reactErrorHandler(), + * onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => { + * console.warn('Caught error', error, errorInfo.componentStack); + * }); + * }); + * ``` + */ +export function reactErrorHandler( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + callback?: (error: any, errorInfo: ErrorInfo, eventId: string) => void, + // eslint-disable-next-line @typescript-eslint/no-explicit-any +): (error: any, errorInfo: ErrorInfo) => void { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + return (error: any, errorInfo: ErrorInfo) => { + const eventId = captureReactException(error, errorInfo); + if (callback) { + callback(error, errorInfo, eventId); + } + }; +} diff --git a/packages/react/src/errorboundary.tsx b/packages/react/src/errorboundary.tsx index 3ce1d0442b81..e12ca9f44d79 100644 --- a/packages/react/src/errorboundary.tsx +++ b/packages/react/src/errorboundary.tsx @@ -1,16 +1,12 @@ import type { ReportDialogOptions } from '@sentry/browser'; -import { captureException, getClient, showReportDialog, withScope } from '@sentry/browser'; +import { getClient, showReportDialog, withScope } from '@sentry/browser'; import type { Scope } from '@sentry/types'; -import { isError, logger } from '@sentry/utils'; +import { logger } from '@sentry/utils'; import hoistNonReactStatics from 'hoist-non-react-statics'; import * as React from 'react'; import { DEBUG_BUILD } from './debug-build'; - -export function isAtLeastReact17(version: string): boolean { - const major = version.match(/^([^.]+)/); - return major !== null && parseInt(major[0]) >= 17; -} +import { captureReactException } from './error'; export const UNKNOWN_COMPONENT = 'unknown'; @@ -40,13 +36,13 @@ export type ErrorBoundaryProps = { */ fallback?: React.ReactElement | FallbackRender | undefined; /** Called when the error boundary encounters an error */ - onError?: ((error: unknown, componentStack: string, eventId: string) => void) | undefined; + onError?: ((error: unknown, componentStack: string | undefined, eventId: string) => void) | undefined; /** Called on componentDidMount() */ onMount?: (() => void) | undefined; /** Called if resetError() is called from the fallback render props function */ - onReset?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined; + onReset?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined; /** Called on componentWillUnmount() */ - onUnmount?: ((error: unknown, componentStack: string | null, eventId: string | null) => void) | undefined; + onUnmount?: ((error: unknown, componentStack: string | null | undefined, eventId: string | null) => void) | undefined; /** Called before the error is captured by Sentry, allows for you to add tags or context using the scope */ beforeCapture?: ((scope: Scope, error: unknown, componentStack: string | undefined) => void) | undefined; }; @@ -69,25 +65,6 @@ const INITIAL_STATE = { eventId: null, }; -function setCause(error: Error & { cause?: Error }, cause: Error): void { - const seenErrors = new WeakMap(); - - function recurse(error: Error & { cause?: Error }, cause: Error): void { - // If we've already seen the error, there is a recursive loop somewhere in the error's - // cause chain. Let's just bail out then to prevent a stack overflow. - if (seenErrors.has(error)) { - return; - } - if (error.cause) { - seenErrors.set(error, true); - return recurse(error.cause, cause); - } - error.cause = cause; - } - - recurse(error, cause); -} - /** * A ErrorBoundary component that logs errors to Sentry. * NOTE: If you are a Sentry user, and you are seeing this stack frame, it means the @@ -118,41 +95,21 @@ class ErrorBoundary extends React.Component { - // If on React version >= 17, create stack trace from componentStack param and links - // to to the original error using `error.cause` otherwise relies on error param for stacktrace. - // Linking errors requires the `LinkedErrors` integration be enabled. - // See: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#native-component-stacks - // - // Although `componentDidCatch` is typed to accept an `Error` object, it can also be invoked - // with non-error objects. This is why we need to check if the error is an error-like object. - // See: https://github.com/getsentry/sentry-javascript/issues/6167 - if (isAtLeastReact17(React.version) && isError(error)) { - const errorBoundaryError = new Error(error.message); - errorBoundaryError.name = `React ErrorBoundary ${error.name}`; - errorBoundaryError.stack = componentStack; - - // Using the `LinkedErrors` integration to link the errors together. - setCause(error, errorBoundaryError); - } - if (beforeCapture) { - beforeCapture(scope, error, componentStack); + beforeCapture(scope, error, passedInComponentStack); } - const eventId = captureException(error, { - captureContext: { - contexts: { react: { componentStack } }, - }, - // If users provide a fallback component we can assume they are handling the error. - // Therefore, we set the mechanism depending on the presence of the fallback prop. - mechanism: { handled: !!this.props.fallback }, - }); + const eventId = captureReactException(error, errorInfo, { mechanism: { handled: !!this.props.fallback } }); if (onError) { - onError(error, componentStack, eventId); + onError(error, passedInComponentStack, eventId); } if (showDialog) { this._lastEventId = eventId; @@ -232,7 +189,6 @@ function withErrorBoundary

>( WrappedComponent: React.ComponentType

, errorBoundaryOptions: ErrorBoundaryProps, ): React.FC

{ - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT; const Wrapped: React.FC

= (props: P) => ( @@ -241,7 +197,6 @@ function withErrorBoundary

>( ); - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access Wrapped.displayName = `errorBoundary(${componentDisplayName})`; // Copy over static methods from Wrapped component to Profiler HOC diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index ef6627cf0c5e..b0ee93d48677 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,6 +1,7 @@ export * from '@sentry/browser'; export { init } from './sdk'; +export { reactErrorHandler } from './error'; export { Profiler, withProfiler, useProfiler } from './profiler'; export type { ErrorBoundaryProps, FallbackRender } from './errorboundary'; export { ErrorBoundary, withErrorBoundary } from './errorboundary'; diff --git a/packages/react/test/error.test.ts b/packages/react/test/error.test.ts new file mode 100644 index 000000000000..780c6f9657fb --- /dev/null +++ b/packages/react/test/error.test.ts @@ -0,0 +1,14 @@ +import { isAtLeastReact17 } from '../src/error'; + +describe('isAtLeastReact17', () => { + test.each([ + ['React 16', '16.0.4', false], + ['React 17', '17.0.0', true], + ['React 17 with no patch', '17.4', true], + ['React 17 with no patch and no minor', '17', true], + ['React 18', '18.1.0', true], + ['React 19', '19.0.0', true], + ])('%s', (_: string, input: string, output: ReturnType) => { + expect(isAtLeastReact17(input)).toBe(output); + }); +}); diff --git a/packages/react/test/errorboundary.test.tsx b/packages/react/test/errorboundary.test.tsx index 10c5130f88d7..d185dc8a9647 100644 --- a/packages/react/test/errorboundary.test.tsx +++ b/packages/react/test/errorboundary.test.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { useState } from 'react'; import type { ErrorBoundaryProps } from '../src/errorboundary'; -import { ErrorBoundary, UNKNOWN_COMPONENT, isAtLeastReact17, withErrorBoundary } from '../src/errorboundary'; +import { ErrorBoundary, UNKNOWN_COMPONENT, withErrorBoundary } from '../src/errorboundary'; const mockCaptureException = jest.fn(); const mockShowReportDialog = jest.fn(); @@ -53,7 +53,7 @@ interface TestAppProps extends ErrorBoundaryProps { errorComp?: JSX.Element; } -const TestApp: React.FC = ({ children, errorComp, ...props }) => { +const TestApp: React.FC = ({ children, errorComp, ...props }): any => { const customErrorComp = errorComp || ; const [isError, setError] = React.useState(false); return ( @@ -581,16 +581,3 @@ describe('ErrorBoundary', () => { }); }); }); - -describe('isAtLeastReact17', () => { - test.each([ - ['React 16', '16.0.4', false], - ['React 17', '17.0.0', true], - ['React 17 with no patch', '17.4', true], - ['React 17 with no patch and no minor', '17', true], - ['React 18', '18.1.0', true], - ['React 19', '19.0.0', true], - ])('%s', (_: string, input: string, output: ReturnType) => { - expect(isAtLeastReact17(input)).toBe(output); - }); -}); diff --git a/yarn.lock b/yarn.lock index 8819fb29597c..522f1ef1a8be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8451,17 +8451,8 @@ dependencies: "@types/unist" "*" -"@types/history-4@npm:@types/history@4.7.8": - version "4.7.8" - resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" - integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== - -"@types/history-5@npm:@types/history@4.7.8": - version "4.7.8" - resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" - integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== - -"@types/history@*": +"@types/history-4@npm:@types/history@4.7.8", "@types/history-5@npm:@types/history@4.7.8", "@types/history@*": + name "@types/history-4" version "4.7.8" resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== @@ -8471,10 +8462,10 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.4.tgz#0b6c62240d1fac020853aa5608758991d9f6ef3d" integrity sha512-q7x8QeCRk2T6DR2UznwYW//mpN5uNlyajkewH2xd1s1ozCS4oHFRg2WMusxwLFlE57EkUYsd/gCapLBYzV3ffg== -"@types/hoist-non-react-statics@^3.3.1": - version "3.3.1" - resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" - integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== +"@types/hoist-non-react-statics@^3.3.5": + version "3.3.5" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494" + integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg== dependencies: "@types/react" "*" hoist-non-react-statics "^3.3.0" @@ -8827,15 +8818,7 @@ "@types/history" "^3" "@types/react" "*" -"@types/react-router-4@npm:@types/react-router@5.1.14": - version "5.1.14" - resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.14.tgz#e0442f4eb4c446541ad7435d44a97f8fe6df40da" - integrity sha512-LAJpqYUaCTMT2anZheoidiIymt8MuX286zoVFPM3DVb23aQBH0mAkFvzpd4LKqiolV8bBtZWT5Qp7hClCNDENw== - dependencies: - "@types/history" "*" - "@types/react" "*" - -"@types/react-router-5@npm:@types/react-router@5.1.14": +"@types/react-router-4@npm:@types/react-router@5.1.14", "@types/react-router-5@npm:@types/react-router@5.1.14": version "5.1.14" resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.14.tgz#e0442f4eb4c446541ad7435d44a97f8fe6df40da" integrity sha512-LAJpqYUaCTMT2anZheoidiIymt8MuX286zoVFPM3DVb23aQBH0mAkFvzpd4LKqiolV8bBtZWT5Qp7hClCNDENw== @@ -8850,7 +8833,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@>=16.9.0", "@types/react@^17.0.3": +"@types/react@*", "@types/react@17.0.3", "@types/react@>=16.9.0": version "17.0.3" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79" integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg== @@ -26056,12 +26039,12 @@ rc@^1.2.7, rc@^1.2.8: strip-json-comments "~2.0.1" react-dom@^18.0.0: - version "18.0.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023" - integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw== + version "18.3.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4" + integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== dependencies: loose-envify "^1.1.0" - scheduler "^0.21.0" + scheduler "^0.23.2" react-error-boundary@^3.1.0: version "3.1.1" @@ -26134,7 +26117,8 @@ react-is@^18.0.0: dependencies: "@remix-run/router" "1.0.2" -"react-router-6@npm:react-router@6.3.0": +"react-router-6@npm:react-router@6.3.0", react-router@6.3.0: + name react-router-6 version "6.3.0" resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557" integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== @@ -26149,13 +26133,6 @@ react-router-dom@^6.2.2: history "^5.2.0" react-router "6.3.0" -react-router@6.3.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557" - integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== - dependencies: - history "^5.2.0" - react@^18.0.0: version "18.0.0" resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" @@ -27365,10 +27342,10 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.21.0: - version "0.21.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820" - integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ== +scheduler@^0.23.2: + version "0.23.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3" + integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ== dependencies: loose-envify "^1.1.0" @@ -28474,7 +28451,7 @@ string-template@~0.2.1: resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add" integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0= -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -28500,15 +28477,6 @@ string-width@^2.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" -string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^5.0.1, string-width@^5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" @@ -28604,14 +28572,7 @@ stringify-object@^3.2.1: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -31238,7 +31199,7 @@ workerpool@^6.4.0: resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.4.0.tgz#f8d5cfb45fde32fa3b7af72ad617c3369567a462" integrity sha512-i3KR1mQMNwY2wx20ozq2EjISGtQWDIfV56We+yGJ5yDs8jTwQiLLaqHlkBHITlCuJnYlVRmXegxFxZg7gqI++A== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -31256,15 +31217,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"