Skip to content

feat(react): Rename ErrorBoundary onError to onCatch (BREAKING CHANGE) #1784

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.

Sign up for GitHub

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

Draft
wants to merge 8 commits into
base: v4
Choose a base branch
from
Draft

feat(react): Rename ErrorBoundary onError to onCatch (BREAKING CHANGE) #1784

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4a2af3d
Initial plan
Copilot Oct 15, 2025
bb12801
Initial plan for renaming onError to onCatch
Copilot Oct 15, 2025
1540afd
Rename onError to onCatch in ErrorBoundary component
Copilot Oct 15, 2025
e00d18e
Update visualization example to use onCatch
Copilot Oct 15, 2025
5a52a24
Revert changes to v1-to-v2 migration docs
Copilot Oct 15, 2025
017b417
Add migrate-to-v4 guide for ErrorBoundary onError to onCatch change
Copilot Oct 15, 2025
5eadac8
Update migration guide for ErrorBoundary to reflect onError to onCatc…
manudeli Oct 15, 2025
0818186
Merge remote-tracking branch 'origin/main' into copilot/rename-onerro…
manudeli Oct 15, 2025
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
8 changes: 4 additions & 4 deletions docs/suspensive.org/src/content/en/docs/react/ErrorBoundary.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,19 +298,19 @@ export const fetchSomething = () => {

</Sandpack>

### props.onError
### props.onCatch

This is a callback called when `<ErrorBoundary/>` catches an error.

```tsx /onError/
```tsx /onCatch/
import { ErrorBoundary } from '@suspensive/react'

const logError = (error: Error, info: ErrorInfo) => {
// ...
}

const Example = (
<ErrorBoundary fallback={ErrorBoundaryFallback} onError={logError}>
<ErrorBoundary fallback={ErrorBoundaryFallback} onCatch={logError}>
<ErrorAfter2s />
</ErrorBoundary>
)
Expand All @@ -335,7 +335,7 @@ export const Example = () => {
{props.error.message}
</>
)}
onError={logError}
onCatch={logError}
>
<ErrorAfter2s />
</ErrorBoundary>
Expand Down
12 changes: 6 additions & 6 deletions docs/suspensive.org/src/content/en/docs/react/migration/migrate-to-v2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Example = wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({
fallback: ({ error }) => <>{error.message}</>,
onError: logger.log,
onCatch: logger.log,
Copy link
Member

@manudeli manudeli Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot This is a migration guide from v1 to v2. Please do not do this.
Not only this MDX, but other migration docs should also be kept

Copy link
Contributor Author

Copilot AI Oct 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reverted the changes to both English and Korean v1-to-v2 migration docs. These docs should remain unchanged as they document the historical migration from v1 to v2. (commit e5cc944)

})
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
Expand Down Expand Up @@ -47,7 +47,7 @@ const Example = () => {
<ErrorBoundary fallback={({ error }) => <>RestError: {error.message}</>}>
<ErrorBoundary
shouldCatch={CustomError}
onError={logOnCustomError}
onCatch={logOnCustomError}
fallback={({ error }) => <>CustomError: {error.message}</>}
>
<ThrowErrorComponent />
Expand All @@ -69,7 +69,7 @@ const Example = () => {
<ErrorBoundary fallback={({ error }) => <>RestError: {error.message}</>}>
<ErrorBoundary
shouldCatch={(error) => error instanceof CustomError}
onError={logOnCustomError}
onCatch={logOnCustomError}
fallback={({ error }) => <>CustomError: {error.message}</>}
>
<ThrowErrorComponent />
Expand All @@ -91,7 +91,7 @@ const Example = () => {
<ErrorBoundary fallback={({ error }) => <>RestError: {error.message}</>}>
<ErrorBoundary
shouldCatch={new Date().toISOString() > '2024-01-01T00:00:00.000Z'}
onError={logOnErrorAfter2024}
onCatch={logOnErrorAfter2024}
fallback={({ error }) => <>ErrorAfter2024: {error.message}</>}
>
<ThrowErrorComponent />
Expand Down Expand Up @@ -143,7 +143,7 @@ So, you can split by two like this.
+ import { Suspense, ErrorBoundary } from '@suspensive/react'
- import { AsyncBoundary } from '@suspensive/react'

+ <ErrorBoundary fallback={<Error />} onError={onError} onReset={onReset}>
+ <ErrorBoundary fallback={<Error />} onCatch={onCatch} onReset={onReset}>
+ <Suspense fallback={<Loading />}>
+ <Children />
+ </Suspense>
Expand All @@ -163,7 +163,7 @@ These all HOCs can be replaced beautifully by new HOC builder [`wrap`](/docs/rea

+ const Example = wrap
+ .ErrorBoundaryGroup({ blockOutside: false })
+ .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</>, onError: logger.log })
+ .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</>, onCatch: logger.log })
+ .Suspense({ fallback: <>loading...</>, clientOnly: true })
+ .on(() => {
+ const query = useSuspenseQuery({
Expand Down
8 changes: 4 additions & 4 deletions docs/suspensive.org/src/content/ko/docs/react/ErrorBoundary.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,19 +301,19 @@ export const fetchSomething = () => {

</Sandpack>

### props.onError
### props.onCatch

`<ErrorBoundary/>`가 error를 잡을 때 호출되는 callback입니다.

```tsx /onError/
```tsx /onCatch/
import { ErrorBoundary } from '@suspensive/react'

const logError = (error: Error, info: ErrorInfo) => {
// ...
}

const Example = (
<ErrorBoundary fallback={ErrorBoundaryFallback} onError={logError}>
<ErrorBoundary fallback={ErrorBoundaryFallback} onCatch={logError}>
<ErrorAfter2s />
</ErrorBoundary>
)
Expand All @@ -338,7 +338,7 @@ export const Example = () => {
{props.error.message}
</>
)}
onError={logError}
onCatch={logError}
>
<ErrorAfter2s />
</ErrorBoundary>
Expand Down
12 changes: 6 additions & 6 deletions docs/suspensive.org/src/content/ko/docs/react/migration/migrate-to-v2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Example = wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({
fallback: ({ error }) => <>{error.message}</>,
onError: logger.log,
onCatch: logger.log,
})
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
Expand Down Expand Up @@ -47,7 +47,7 @@ const Example = () => {
<ErrorBoundary fallback={({ error }) => <>RestError: {error.message}</>}>
<ErrorBoundary
shouldCatch={CustomError}
onError={logOnCustomError}
onCatch={logOnCustomError}
fallback={({ error }) => <>CustomError: {error.message}</>}
>
<ThrowErrorComponent />
Expand All @@ -69,7 +69,7 @@ const Example = () => {
<ErrorBoundary fallback={({ error }) => <>RestError: {error.message}</>}>
<ErrorBoundary
shouldCatch={(error) => error instanceof CustomError}
onError={logOnCustomError}
onCatch={logOnCustomError}
fallback={({ error }) => <>CustomError: {error.message}</>}
>
<ThrowErrorComponent />
Expand All @@ -91,7 +91,7 @@ const Example = () => {
<ErrorBoundary fallback={({ error }) => <>RestError: {error.message}</>}>
<ErrorBoundary
shouldCatch={new Date().toISOString() > '2024-01-01T00:00:00.000Z'}
onError={logOnErrorAfter2024}
onCatch={logOnErrorAfter2024}
fallback={({ error }) => <>ErrorAfter2024: {error.message}</>}
>
<ThrowErrorComponent />
Expand Down Expand Up @@ -143,7 +143,7 @@ v2에서는 `<AsyncBoundary/>`를 제거했습니다. [#295](https://github.com/
+ import { Suspense, ErrorBoundary } from '@suspensive/react'
- import { AsyncBoundary } from '@suspensive/react'

+ <ErrorBoundary fallback={<Error />} onError={onError} onReset={onReset}>
+ <ErrorBoundary fallback={<Error />} onCatch={onCatch} onReset={onReset}>
+ <Suspense fallback={<Loading />}>
+ <Children />
+ </Suspense>
Expand All @@ -163,7 +163,7 @@ v2에서는 `<AsyncBoundary/>`를 제거했습니다. [#295](https://github.com/

+ const Example = wrap
+ .ErrorBoundaryGroup({ blockOutside: false })
+ .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</>, onError: logger.log })
+ .ErrorBoundary({ fallback: ({ error }) => <>{error.message}</>, onCatch: logger.log })
+ .Suspense({ fallback: <>loading...</>, clientOnly: true })
+ .on(() => {
+ const query = useSuspenseQuery({
Expand Down
2 changes: 1 addition & 1 deletion examples/visualization/src/app/react/wrap/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const logError = (error: Error) => console.error(error)
export default ErrorBoundaryGroup.with(
{ blockOutside: false },
ErrorBoundary.with(
{ fallback: (props) => <div>{props.error.message}</div>, onError: logError },
{ fallback: (props) => <div>{props.error.message}</div>, onCatch: logError },
Suspense.with({ clientOnly: true, fallback: 'loading...' }, ({ text }: { text: string }) => {
const errorBoundary = useErrorBoundary()

Expand Down
2 changes: 1 addition & 1 deletion examples/vite-react-18-suspense-prerender-siblings-problem/tsconfig.tsbuildinfo
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./vite.config.ts"],"version":"5.8.3"}
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./vite.config.ts"],"version":"5.9.2"}
Loading
Loading