feat(react): add ErrorBoundary component #4619

joshblack · 2019-11-07T22:28:36Z

React introduced error boundary handling in v16. This PR aims to form an opinion on what an error boundary means for a design system. At a high-level, this works by doing the following:

<ErrorBoundary fallback={<Fallback />}>
  <ComponentThatMayThrow />
</ErrorBoundary>

With this setup, if ComponentThatMayThrow or any of its children have an error the component passed to fallback will be displayed instead.

This API was heavily inspired by Data fetching with Suspense in Relay

The way this may work in product is as follows:

Identify the root-level error boundary UI you would like to display if everything goes wrong
Starting from the root, find the highest sections/regions in your project and create boundaries for them.
- In particular, focus on sections that may have data dependencies

In addition, ErrorBoundary has an optional ErrorBoundaryContext that may be supplied. The only method currently is log which is called in componentDidCatch as a side-effect. This may be useful for logging errors to an external service.

Changelog

New

Add ErrorBoundary and ErrorBoundaryContext

Changed

Removed

netlify · 2019-11-07T22:45:40Z

Deploy preview for carbon-elements ready!

Built with commit c910ea4

https://deploy-preview-4619--carbon-elements.netlify.com

netlify · 2019-11-07T22:55:24Z

Deploy preview for carbon-components-react ready!

Built with commit c910ea4

https://deploy-preview-4619--carbon-components-react.netlify.com

netlify · 2019-11-07T22:55:42Z

Deploy preview for the-carbon-components ready!

Built with commit c910ea4

https://deploy-preview-4619--the-carbon-components.netlify.com

joshblack · 2019-11-08T17:00:38Z

@jendowns any tips on getting the prop table to generate correctly? 😂

… into feat/add-error-boundary

jendowns

Hey @joshblack! I have an idea for this --

jendowns · 2019-11-08T17:19:10Z

packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js

+
+      return 'Successfully rendered';
+    }
+


@joshblack You could add this to give DemoComponent the same info as ErrorBoundary, so it will show the right component name in the story source + also show the props in the prop table.

(~~Though unfortunately all props will be node type -- I'm not sure how to fix that yet~~ Oh oops, they ARE type node 😆 Disregard this comment then)

Suggested change

DemoComponent.displayName = 'ErrorBoundary';

DemoComponent.__docgenInfo = ErrorBoundary.__docgenInfo;

This might be a dumb question, but what's the difference between this proposal and:

DemoComponent.__docgenInfo = ErrorBoundary.__docgenInfo;

Just noticed the double spread and was curious.

Oh there's no difference! I think I've personally gotten into the habit of doing this as a way to very explicitly show "I'm need the props here" etc 😆 I'll update my suggestions to be more succinct 👍

jendowns · 2019-11-08T17:19:35Z

packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js

+
+      return 'Successfully rendered';
+    }
+


Same as above:

Suggested change

DemoComponent.displayName = 'ErrorBoundary';

DemoComponent.__docgenInfo = ErrorBoundary.__docgenInfo;

joshblack · 2019-11-11T17:14:02Z

@aledavila let me know if you want to go through this today!

joshblack · 2019-11-11T17:19:29Z

Same to you @vpicone if you want to chat about it 😄

vpicone

@joshblack looks solid. Is this meant as a helper for us internally? There's nothing Carbon specific with how this would be implemented right?

joshblack · 2019-11-11T20:30:46Z

@vpicone nah, just a pattern that seems to come up more that would be great to bring in so folks could use it. Just makes it easier to build stuff with Carbon 😄

joshblack · 2019-11-13T02:16:33Z

Let me know if you have any questions @vpicone @aledavila!

aledavila

Looks great

joshblack · 2019-11-15T15:09:07Z

Let me know if you have any questions @vpicone!

vpicone · 2019-11-16T18:20:43Z

@joshblack no questions, just not sure I agree that it goes with the rest of the library. I don’t think we should include components that have nothing to do with the design language but increase or surface area for no reason other than someone might find it helpful.

What if react-router/gatsby/next started exporting an ErrorBoundary helper. If I’m an app dev do I use there’s or Carbons? Both/Either? I think increasing the surface area of the library and the types of the components we export might not actually make Carbon easier to build with.

joshblack · 2019-11-17T19:10:18Z

@vpicone happy to chat about this in person, I think this matches our path forward with exposing best practices and patterns for building UIs at IBM. I think as a system when we start going into patterns territory we're not so much targeting a design language as helping folks build better product experiences. I think this component helps further that goal and would be a great addition.

dakahn

Looks good to me. And I agree that helpers like this (and a few others we've talked about) will be more and more necessary when we're shipping whole experiences via patterns

dakahn · 2019-11-20T19:41:59Z

packages/react/src/components/ErrorBoundary/ErrorBoundary.js

+ * consumers can specify their own logic for logging errors. For example,
+ * reporting an error in the UI to an external service for every `ErrorBoundary`
+ * used.
+ *


lovely documentation.

joshblack added 3 commits November 7, 2019 15:32

feat(react): add ErrorBoundary component

8f50696

docs(react): add story for ErrorBoundary

6295511

feat(react): add ErrorBoundary to public api

24ebc32

joshblack requested a review from vpicone November 7, 2019 22:28

joshblack requested a review from a team as a code owner November 7, 2019 22:28

Merge branch 'master' into feat/add-error-boundary

ad13302

ghost requested a review from aledavila November 7, 2019 22:28

Merge branch 'master' into feat/add-error-boundary

e9ad3e8

joshblack added 2 commits November 8, 2019 11:03

Merge branch 'feat/add-error-boundary' of github.com:joshblack/carbon…

19ce4d7

… into feat/add-error-boundary

Merge branch 'master' into feat/add-error-boundary

fb4c4aa

jendowns reviewed Nov 8, 2019

View reviewed changes

Merge branch 'master' into feat/add-error-boundary

9532554

vpicone reviewed Nov 11, 2019

View reviewed changes

Merge branch 'master' into feat/add-error-boundary

9376489

Merge branch 'master' into feat/add-error-boundary

2b5859c

aledavila approved these changes Nov 13, 2019

View reviewed changes

Merge branch 'master' into feat/add-error-boundary

0782c42

dakahn approved these changes Nov 20, 2019

View reviewed changes

joshblack added the status: ready to merge 🎉 label Nov 20, 2019

Merge branch 'master' into feat/add-error-boundary

c910ea4

joshblack requested a review from a team as a code owner November 20, 2019 22:57

ghost requested review from asudoh and emyarod November 20, 2019 22:58

joshblack removed request for asudoh and emyarod November 20, 2019 23:00

joshblack merged commit 1c1bff8 into carbon-design-system:master Nov 20, 2019

joshblack deleted the feat/add-error-boundary branch November 20, 2019 23:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): add ErrorBoundary component #4619

feat(react): add ErrorBoundary component #4619

joshblack commented Nov 7, 2019

netlify bot commented Nov 7, 2019 •

edited

netlify bot commented Nov 7, 2019 •

edited

netlify bot commented Nov 7, 2019 •

edited

joshblack commented Nov 8, 2019

jendowns left a comment

jendowns Nov 8, 2019 •

edited

joshblack Nov 8, 2019

jendowns Nov 8, 2019

jendowns Nov 8, 2019 •

edited

joshblack commented Nov 11, 2019

joshblack commented Nov 11, 2019

vpicone left a comment

joshblack commented Nov 11, 2019

joshblack commented Nov 13, 2019

aledavila left a comment

joshblack commented Nov 15, 2019

vpicone commented Nov 16, 2019

joshblack commented Nov 17, 2019

dakahn left a comment

dakahn Nov 20, 2019



	DemoComponent.displayName = 'ErrorBoundary';
	DemoComponent.__docgenInfo = ErrorBoundary.__docgenInfo;

feat(react): add ErrorBoundary component #4619

feat(react): add ErrorBoundary component #4619

Conversation

joshblack commented Nov 7, 2019

Changelog

netlify bot commented Nov 7, 2019 • edited

netlify bot commented Nov 7, 2019 • edited

netlify bot commented Nov 7, 2019 • edited

joshblack commented Nov 8, 2019

jendowns left a comment

Choose a reason for hiding this comment

jendowns Nov 8, 2019 • edited

Choose a reason for hiding this comment

joshblack Nov 8, 2019

Choose a reason for hiding this comment

jendowns Nov 8, 2019

Choose a reason for hiding this comment

jendowns Nov 8, 2019 • edited

Choose a reason for hiding this comment

joshblack commented Nov 11, 2019

joshblack commented Nov 11, 2019

vpicone left a comment

Choose a reason for hiding this comment

joshblack commented Nov 11, 2019

joshblack commented Nov 13, 2019

aledavila left a comment

Choose a reason for hiding this comment

joshblack commented Nov 15, 2019

vpicone commented Nov 16, 2019

joshblack commented Nov 17, 2019

dakahn left a comment

Choose a reason for hiding this comment

dakahn Nov 20, 2019

Choose a reason for hiding this comment

netlify bot commented Nov 7, 2019 •

edited

netlify bot commented Nov 7, 2019 •

edited

netlify bot commented Nov 7, 2019 •

edited

jendowns Nov 8, 2019 •

edited

jendowns Nov 8, 2019 •

edited