Skip to content
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

fix(react): prevent rendering fallback if not shouldCatch error #1410

Merged

Conversation

manudeli
Copy link
Member

@manudeli manudeli commented Jan 10, 2025

issued by @LineGu @lucas0530

Prevent rendering fallback if not shouldCatch error

import { ErrorBoundary } from '@suspensive/react'
import { Throw } from '~/components/Throw'

export default function page() {
  return (
    <ErrorBoundary fallback={() => <>root fallback</>}>
      <ErrorBoundary
        shouldCatch={(error) => error.message !== 'children error message'}
        fallback={() => {
          console.log("child ErrorBoundary's fallback")
          return <>child ErrorBoundary's fallback</>
        }}
      >
        <Throw.Error message="children error message" after={2000}>
          before throw Error
        </Throw.Error>
      </ErrorBoundary>
    </ErrorBoundary>
  )
}

fallback should be exposed only when error is catched by ErrorBoundary
But in this case fallback was rendered and console.log("child ErrorBoundary's fallback") was excuted. so we fixed it

PR Checklist

  • I did below actions if need
  1. I read the Contributing Guide
  2. I added documents and tests.

Copy link

changeset-bot bot commented Jan 10, 2025

🦋 Changeset detected

Latest commit: d8c6c22

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@suspensive/react Patch
@suspensive/react-query-4 Patch
@suspensive/react-query-5 Patch
@suspensive/react-query Patch
@suspensive/jotai Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

coauthors bot commented Jan 10, 2025

People can be co-author:

Candidate Reasons Count Add this as commit message
@manudeli #1410 (comment) #1410 2 Co-authored-by: manudeli <[email protected]>
@codecov-commenter #1410 (comment) 1 Co-authored-by: codecov-commenter <[email protected]>
@LineGu #1410 (review) 1 Co-authored-by: LineGu <[email protected]>
@gwansikk #1410 (review) 1 Co-authored-by: gwansikk <[email protected]>

@manudeli manudeli self-assigned this Jan 10, 2025
Copy link

vercel bot commented Jan 10, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 13, 2025 9:31am
v1.suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 13, 2025 9:31am
visualization.suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 13, 2025 9:31am

Copy link

github-actions bot commented Jan 10, 2025

Size Change: -9 B (-0.01%)

Total Size: 68.9 kB

Filename Size Change
packages/react/dist/ErrorBoundary.cjs 2.73 kB -3 B (-0.11%)
packages/react/dist/index.cjs 4.32 kB -4 B (-0.09%)
packages/react/dist/index.js 369 B +1 B (+0.27%)
packages/react/dist/wrap.cjs 3.77 kB -4 B (-0.11%)
packages/react/dist/wrap.js 210 B +1 B (+0.48%)
ℹ️ View Unchanged
Filename Size
packages/jotai/dist/Atom.cjs 660 B
packages/jotai/dist/Atom.js 115 B
packages/jotai/dist/AtomValue.cjs 647 B
packages/jotai/dist/AtomValue.js 120 B
packages/jotai/dist/index.cjs 755 B
packages/jotai/dist/index.js 158 B
packages/jotai/dist/SetAtom.cjs 645 B
packages/jotai/dist/SetAtom.js 118 B
packages/react-dom/dist/FadeIn.cjs 2.13 kB
packages/react-dom/dist/FadeIn.js 140 B
packages/react-dom/dist/index.cjs 2.36 kB
packages/react-dom/dist/index.js 177 B
packages/react-dom/dist/InView.cjs 2.1 kB
packages/react-dom/dist/InView.js 130 B
packages/react-dom/dist/useFadeIn.cjs 2.04 kB
packages/react-dom/dist/useFadeIn.js 133 B
packages/react-dom/dist/useInView.cjs 1.87 kB
packages/react-dom/dist/useInView.js 120 B
packages/react-native/dist/index.cjs 619 B
packages/react-native/dist/index.js 122 B
packages/react-native/dist/TestText.cjs 612 B
packages/react-native/dist/TestText.js 119 B
packages/react-query-4/dist/index.cjs 1.86 kB
packages/react-query-4/dist/index.js 394 B
packages/react-query-4/dist/infiniteQueryOptions.cjs 548 B
packages/react-query-4/dist/infiniteQueryOptions.js 144 B
packages/react-query-4/dist/Mutation.cjs 821 B
packages/react-query-4/dist/Mutation.js 132 B
packages/react-query-4/dist/PrefetchInfiniteQuery.cjs 722 B
packages/react-query-4/dist/PrefetchInfiniteQuery.js 155 B
packages/react-query-4/dist/PrefetchQuery.cjs 712 B
packages/react-query-4/dist/PrefetchQuery.js 147 B
packages/react-query-4/dist/QueryClientConsumer.cjs 665 B
packages/react-query-4/dist/QueryClientConsumer.js 140 B
packages/react-query-4/dist/QueryErrorBoundary.cjs 1.12 kB
packages/react-query-4/dist/QueryErrorBoundary.js 142 B
packages/react-query-4/dist/queryOptions.cjs 540 B
packages/react-query-4/dist/queryOptions.js 135 B
packages/react-query-4/dist/SuspenseInfiniteQuery.cjs 1.05 kB
packages/react-query-4/dist/SuspenseInfiniteQuery.js 155 B
packages/react-query-4/dist/SuspenseQueries.cjs 923 B
packages/react-query-4/dist/SuspenseQueries.js 149 B
packages/react-query-4/dist/SuspenseQuery.cjs 1.04 kB
packages/react-query-4/dist/SuspenseQuery.js 147 B
packages/react-query-4/dist/usePrefetchInfiniteQuery.cjs 648 B
packages/react-query-4/dist/usePrefetchInfiniteQuery.js 148 B
packages/react-query-4/dist/usePrefetchQuery.cjs 639 B
packages/react-query-4/dist/usePrefetchQuery.js 140 B
packages/react-query-4/dist/useSuspenseInfiniteQuery.cjs 833 B
packages/react-query-4/dist/useSuspenseInfiniteQuery.js 148 B
packages/react-query-4/dist/useSuspenseQueries.cjs 833 B
packages/react-query-4/dist/useSuspenseQueries.js 142 B
packages/react-query-4/dist/useSuspenseQuery.cjs 824 B
packages/react-query-4/dist/useSuspenseQuery.js 140 B
packages/react-query-5/dist/index.cjs 1.76 kB
packages/react-query-5/dist/index.js 391 B
packages/react-query-5/dist/infiniteQueryOptions.cjs 573 B
packages/react-query-5/dist/infiniteQueryOptions.js 144 B
packages/react-query-5/dist/Mutation.cjs 821 B
packages/react-query-5/dist/Mutation.js 132 B
packages/react-query-5/dist/PrefetchInfiniteQuery.cjs 647 B
packages/react-query-5/dist/PrefetchInfiniteQuery.js 145 B
packages/react-query-5/dist/PrefetchQuery.cjs 639 B
packages/react-query-5/dist/PrefetchQuery.js 137 B
packages/react-query-5/dist/QueryClientConsumer.cjs 663 B
packages/react-query-5/dist/QueryClientConsumer.js 140 B
packages/react-query-5/dist/QueryErrorBoundary.cjs 1.12 kB
packages/react-query-5/dist/QueryErrorBoundary.js 142 B
packages/react-query-5/dist/queryOptions.cjs 563 B
packages/react-query-5/dist/queryOptions.js 136 B
packages/react-query-5/dist/SuspenseInfiniteQuery.cjs 833 B
packages/react-query-5/dist/SuspenseInfiniteQuery.js 145 B
packages/react-query-5/dist/SuspenseQueries.cjs 671 B
packages/react-query-5/dist/SuspenseQueries.js 139 B
packages/react-query-5/dist/SuspenseQuery.cjs 825 B
packages/react-query-5/dist/SuspenseQuery.js 137 B
packages/react-query-5/dist/usePrefetchInfiniteQuery.cjs 577 B
packages/react-query-5/dist/usePrefetchInfiniteQuery.js 148 B
packages/react-query-5/dist/usePrefetchQuery.cjs 569 B
packages/react-query-5/dist/usePrefetchQuery.js 140 B
packages/react-query-5/dist/useSuspenseInfiniteQuery.cjs 577 B
packages/react-query-5/dist/useSuspenseInfiniteQuery.js 148 B
packages/react-query-5/dist/useSuspenseQueries.cjs 571 B
packages/react-query-5/dist/useSuspenseQueries.js 142 B
packages/react-query-5/dist/useSuspenseQuery.cjs 569 B
packages/react-query-5/dist/useSuspenseQuery.js 140 B
packages/react-query/dist/index.cjs 551 B
packages/react-query/dist/index.js 121 B
packages/react-query/dist/v4.cjs 550 B
packages/react-query/dist/v4.js 116 B
packages/react-query/dist/v5.cjs 550 B
packages/react-query/dist/v5.js 116 B
packages/react/dist/ClientOnly.cjs 734 B
packages/react/dist/ClientOnly.js 141 B
packages/react/dist/DefaultProps.cjs 1.05 kB
packages/react/dist/DefaultProps.js 167 B
packages/react/dist/Delay.cjs 1.23 kB
packages/react/dist/Delay.js 159 B
packages/react/dist/DevMode.cjs 530 B
packages/react/dist/DevMode.js 131 B
packages/react/dist/ErrorBoundary.js 205 B
packages/react/dist/ErrorBoundaryGroup.cjs 1.38 kB
packages/react/dist/ErrorBoundaryGroup.js 195 B
packages/react/dist/Suspense.cjs 1.29 kB
packages/react/dist/Suspense.js 171 B
packages/react/dist/Suspensive.cjs 1.26 kB
packages/react/dist/Suspensive.js 175 B

compressed-size-action

@codecov-commenter
Copy link

codecov-commenter commented Jan 10, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 73.85%. Comparing base (eb2423b) to head (d8c6c22).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #1410      +/-   ##
==========================================
- Coverage   73.89%   73.85%   -0.05%     
==========================================
  Files          70       70              
  Lines         590      589       -1     
  Branches      131      131              
==========================================
- Hits          436      435       -1     
  Misses        142      142              
  Partials       12       12              
Components Coverage Δ
@suspensive/react 100.00% <100.00%> (ø)
@suspensive/react-dom 95.55% <ø> (ø)
@suspensive/react-native 100.00% <ø> (ø)
@suspensive/react-query 83.47% <ø> (ø)
@suspensive/react-query-4 0.00% <ø> (ø)
@suspensive/react-query-5 0.00% <ø> (ø)
@suspensive/jotai 0.00% <ø> (ø)
@suspensive/codemods 42.85% <ø> (ø)

Copy link
Contributor

@LineGu LineGu left a comment

Choose a reason for hiding this comment

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

👍

@manudeli
Copy link
Member Author

@gwansikk @kangju2000 Check this PR together please. this is important fix in my opinion

Copy link
Collaborator

@gwansikk gwansikk left a comment

Choose a reason for hiding this comment

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

I agree with this change. If shouldCatch is false, I believe the fallback itself should not be executed.

In my opinion, the fallback of an ErrorBoundary is meant to act as a substitute for an error. Therefore, if error capturing has not occurred through shouldCatch, the ErrorBoundary should not treat it as an error, and the fallback itself should not be executed.

@manudeli manudeli merged commit ce3cb11 into main Jan 13, 2025
16 checks passed
@manudeli manudeli deleted the react/fix/prevent-render-fallback-if-not-shouldCatch-error branch January 13, 2025 09:36
manudeli added a commit that referenced this pull request Jan 13, 2025
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @suspensive/[email protected]

### Patch Changes

- [#1410](#1410)
[`ce3cb11`](ce3cb11)
Thanks [@manudeli](https://github.com/manudeli)! - fix(react): prevent
rendering fallback if not shouldCatch error

## @suspensive/[email protected]

### Patch Changes

- Updated dependencies
\[[`ce3cb11`](ce3cb11)]:
    -   @suspensive/[email protected]
    -   @suspensive/[email protected]
    -   @suspensive/[email protected]

## @suspensive/[email protected]

### Patch Changes

- Updated dependencies
\[[`ce3cb11`](ce3cb11)]:
    -   @suspensive/[email protected]

## @suspensive/[email protected]

### Patch Changes

- Updated dependencies
\[[`ce3cb11`](ce3cb11)]:
    -   @suspensive/[email protected]

## @suspensive/[email protected]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants