feat(POC): add error boundary to withSuspense #10824

gkartalis · 2024-09-20T10:33:09Z

This PR resolves PHIRE-1019 and PHIRE-1109

Description

Introduced an errorFallback component in case something goes wrong, devs can override by passing their custom errorfallback.

We also introduced react-error-boundary dep that is recommended from react official docs over the standard react one and also utilized the onError callback to report the errors on Sentry.

Makes withSuspense hook now require passing a fallback component.

Stops tracking updated components that are now not dead ends.

Updates all components now using withSuspense to pass a fallback using following patterns:

Subcomponents whose absences does not hinder the user much just don't render it in case of error - examples - home screen sections and filter sections:

Examples

Full screen component and there is an existing error component available show that, make sure nav is available

Examples

Full screen component with no error component available, use our LoadFailureView, make sure nav is available

Examples

Follow-ups

We should avoid the Unable to load view and try to get some error states more like pattern 2 across surfaces, Unable to load is ugly and doesn't lay out well in many cases

How to test

You can connect local metaphysics to eigen locally and throw an error from the query from any point that we do use the withSuspense

PR Checklist

I have tested my changes on iOS and Android.
I hid my changes behind a feature flag, or they don't need one.
I have included screenshots or videos, or I have not changed the UI.
I have added tests, or my changes don't require any.
I added an app state migration, or my changes do not require one.
I have documented any follow-up work that this PR will require, or it does not require any.
I have added a changelog entry below, or my changes do not require one.

To the reviewers 👀

I would like at least one of the reviewers to run this PR on the simulator or device.

Changelog updates

Cross-platform user-facing changes

iOS user-facing changes

Android user-facing changes

Dev changes

add error boundary to withSuspense - gkartalis

Need help with something? Have a look at our docs, or get in touch with us.

gkartalis · 2024-09-20T10:56:29Z

Important

Before merging we need to test out how the default error fallback will behave in the already existing surfaces.
While testing it out I realised that it does successfully hide defensively the failed surface but if this surface is a screen it does create a dead-end on the ui since it fails silently (sends error to sentry) and renders null in the screen.

Ideas welcome on that @damassi @MounirDhahri @brainbicycle

MounirDhahri · 2024-09-24T09:38:07Z

How does the new ErrorBoundary look like? is it different than the existent RetryErrorBounday ?

gkartalis · 2024-09-24T09:39:30Z

in this one we basically can override the behaviour with any fallback. But the default is null so it creates a dead end if it is used by a screen. On the other hand if it is a rail it just defensively hides it

MounirDhahri · 2024-09-24T09:50:48Z

By dead end do you mean we will show this?

ArtsyOpenSource · 2024-10-02T19:50:59Z

This PR contains the following changes:

Dev changes (add error boundary to withSuspense - gkartalis)

Generated by 🚫 dangerJS against 0b621bf

This reverts commit d0395d6.

This reverts commit 20f464a.

src/app/Components/WorksForYouArtworks.tsx

src/app/Scenes/NewWorksFromGalleriesYouFollow/Components/NewWorksFromGalleriesYouFollow.tsx

patches/whatwg-fetch+3.0.0.patch

src/app/system/relay/middlewares/metaphysicsMiddleware.ts

This reverts commit fbed79a.

brainbicycle · 2024-10-07T20:47:27Z

this ready for review! @gkartalis

brainbicycle · 2024-10-07T20:50:11Z

src/app/utils/hooks/withSuspense.tsx

+        >
+          <Component {...props} />
+        </Suspense>
+      </ErrorBoundary>


main change, make error fallback required prop and use the react-error-boundary

brainbicycle · 2024-10-07T20:50:53Z

test-patches/whatwg-fetch+3.0.0.patch

+
+
+  const metaphysicsRejectionTests = {
+    query: "query HomeAboveTheFoldQuery",


this is a test patch that can be used for testing failures, move to patches, reinstall deps, then update the query here to cause it to reject

forgot a step, need to turn off persisted queries to effectively match queries, I may add a dev toggle for that if we don't remove it entirely

gkartalis

amazing, looks great! Left only a small question. I can't approve since I am the one who opened the PR but consider it approved

src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx

damassi · 2024-10-08T18:10:48Z

For the LoadFailureView, should we also add a reload button? That might be a bit nicer and give the user some retry ability (assuming we can preserve the navigation stack)

Amazing work y'all! This is a really huge improvement.

brainbicycle · 2024-10-08T18:24:59Z

For the LoadFailureView, should we also add a reload button? That might be a bit nicer (assuming we can preserve the navigation stack)

Amazing work y'all! This is a really huge improvement.

good point the loadfailureview does support that but we need to pass a function to onRetry, let me see if anything makes sense here.

brainbicycle · 2024-10-08T19:02:57Z

For the LoadFailureView, should we also add a reload button? That might be a bit nicer and give the user some retry ability (assuming we can preserve the navigation stack)

Amazing work y'all! This is a really huge improvement.

done!

damassi

+1000

…rrent Galleries section component (#10922) * feat: support HomeViewSectionCard with a default full-width presentation * chore: remove HomeViewSectionGalleries This section type was a bit of a misnomer and never actually served up a galleries connection. We remove it here, with the possibility of bring it back such a component when it is actually needed * refactor: allow navigating to route that is a non-canonical web href * fix: withSuspense usage after #10824 * chore: bump schema

gkartalis added 6 commits September 20, 2024 11:18

feat: add error boundary to suspense

6967825

chore: Update withSuspense hook to use ErrorFallback prop

aeaefbf

chore: fix sentry mock

7568f77

chore: Fix sentry mock

93ad5e4

add react error-boundary and track sentry stacktrace on error

a166361

fix: sentry mock

cbbcc42

gkartalis requested review from damassi, MounirDhahri, MrSltun and brainbicycle September 20, 2024 10:33

gkartalis self-assigned this Sep 20, 2024

artsy-peril bot added the Jira Synced label Sep 20, 2024

add test patch with query rejections

799acf6

brainbicycle added 12 commits October 2, 2024 16:01

turn off persisted queries for now

fbed79a

use explicit empty fallback for all home view sections

d0395d6

Revert "use explicit empty fallback for all home view sections"

7e3870b

This reverts commit d0395d6.

add explicit empty fallback for home view sections

20f464a

Revert "add explicit empty fallback for home view sections"

d27722c

This reverts commit 20f464a.

Merge remote-tracking branch 'origin/main' into gkartalis/PHIRE-1019

3c800a3

pls let this be the last time

0a05b77

add error boundary for home view section screen

3dc5899

add error boundary to new works for you page

e3e7cba

add fallback for artwork error page

545b18d

add fallback for activity screen

16f822e

add fallback for browse similar works

83cc5e6

brainbicycle reviewed Oct 7, 2024

View reviewed changes

src/app/Components/WorksForYouArtworks.tsx Outdated Show resolved Hide resolved

brainbicycle reviewed Oct 7, 2024

View reviewed changes

src/app/Scenes/NewWorksFromGalleriesYouFollow/Components/NewWorksFromGalleriesYouFollow.tsx Outdated Show resolved Hide resolved

remove logs

78c8d2c

brainbicycle reviewed Oct 7, 2024

View reviewed changes

patches/whatwg-fetch+3.0.0.patch Outdated Show resolved Hide resolved

brainbicycle reviewed Oct 7, 2024

View reviewed changes

src/app/system/relay/middlewares/metaphysicsMiddleware.ts Outdated Show resolved Hide resolved

brainbicycle added 4 commits October 7, 2024 15:59

Revert "turn off persisted queries for now"

6d4c929

This reverts commit fbed79a.

move fetch patch to a test dir

066fd3e

more consistent worksForYou fallback

b387429

more consistent error for activity screen

e1624cd

brainbicycle reviewed Oct 7, 2024

View reviewed changes

remove missed change

483ad21

gkartalis commented Oct 8, 2024

View reviewed changes

src/app/Scenes/HomeView/Sections/HomeViewSectionFeaturedCollection.tsx Outdated Show resolved Hide resolved

gkartalis requested a review from brainbicycle October 8, 2024 09:17

brainbicycle added 5 commits October 8, 2024 11:14

add better api for no fallback

92d38c2

pass new explicit param everywhere, fix types in withSuspense

129a49b

make withSuspense take a typed object for better api

4d74a64

make selection of spinner fallback explicit

cd21cd4

add some docs to the interface

345b07c

render retry button when using LoadFailureView

0b621bf

damassi approved these changes Oct 8, 2024

View reviewed changes

brainbicycle merged commit 23c860d into main Oct 8, 2024
7 checks passed

brainbicycle deleted the gkartalis/PHIRE-1019 branch October 8, 2024 19:52

anandaroop added a commit that referenced this pull request Oct 10, 2024

fix: withSuspense usage after #10824

4abed47

anandaroop mentioned this pull request Oct 10, 2024

feat(home view): support a singular Card section and deprecate the current Galleries section component #10922

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(POC): add error boundary to withSuspense #10824

feat(POC): add error boundary to withSuspense #10824

gkartalis commented Sep 20, 2024 •

edited by brainbicycle

Loading

gkartalis commented Sep 20, 2024

MounirDhahri commented Sep 24, 2024

gkartalis commented Sep 24, 2024

MounirDhahri commented Sep 24, 2024

ArtsyOpenSource commented Oct 2, 2024 •

edited

Loading

brainbicycle commented Oct 7, 2024

brainbicycle Oct 7, 2024

brainbicycle Oct 7, 2024

brainbicycle Oct 8, 2024

gkartalis left a comment

damassi commented Oct 8, 2024 •

edited

Loading

brainbicycle commented Oct 8, 2024

brainbicycle commented Oct 8, 2024

damassi left a comment

feat(POC): add error boundary to withSuspense #10824

feat(POC): add error boundary to withSuspense #10824

Conversation

gkartalis commented Sep 20, 2024 • edited by brainbicycle Loading

Description

Follow-ups

How to test

PR Checklist

To the reviewers 👀

Changelog updates

Cross-platform user-facing changes

iOS user-facing changes

Android user-facing changes

Dev changes

gkartalis commented Sep 20, 2024

MounirDhahri commented Sep 24, 2024

gkartalis commented Sep 24, 2024

MounirDhahri commented Sep 24, 2024

ArtsyOpenSource commented Oct 2, 2024 • edited Loading

This PR contains the following changes:

brainbicycle commented Oct 7, 2024

brainbicycle Oct 7, 2024

Choose a reason for hiding this comment

brainbicycle Oct 7, 2024

Choose a reason for hiding this comment

brainbicycle Oct 8, 2024

Choose a reason for hiding this comment

gkartalis left a comment

Choose a reason for hiding this comment

damassi commented Oct 8, 2024 • edited Loading

brainbicycle commented Oct 8, 2024

brainbicycle commented Oct 8, 2024

damassi left a comment

Choose a reason for hiding this comment

gkartalis commented Sep 20, 2024 •

edited by brainbicycle

Loading

ArtsyOpenSource commented Oct 2, 2024 •

edited

Loading

damassi commented Oct 8, 2024 •

edited

Loading