React: Document error boundaries

[gaearon]

I don't think we have either a top-level doc or a componentDidCatch reference yet.

cc @chantastic

[Krizzu]

Hey,
Is this issue free-to-take? I'd give a go creating doc for that.

[chantastic]

@Krizzu give it a go. i will not have time until later this weekend. mind cc-ing me on the branch?

[bogdansoare]

Just a quick question about Error Boundaries.
Is it ok to have multiple Error Boundaries at different levels in the hierarchy ? let's say one at the root level, another one at the route level, and another one at more nested component level.

[Krizzu]

@bogdansoare
From what I've read, error boundaries are like catch blocks, so whenever You feel/know that something will throw/fail, you wrap it in error boundaries.

Don't know anything about performance issues with stacked EB tho.

[gaearon]

Please refer to our post:

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

It describes the behavior in detail. We should just adopt it to the doc format.

[Krizzu]

I have doc file ready (adopted blog post, as @gaearon said).
One concern though - #10461 mentions about info parameter in componentDidCatch lifecycle method. Blog post does not mention what it contains or what is that use for.

Should I put some notes about it?

[gaearon]

Yes please. For now it's worth documenting it contains the componentStack string as a field on the object. You can try it for yourself and see what that string looks like, and then provide an example.

[bvaughn]

The documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.)

I've moved this issue to the new repo: reactjs/reactjs.org#17 and tagged it as "in-progress" and belonging to @Krizzu.

Let's continue the discussion there! Sorry for the inconvenience.

[yugandhar-pathi]

Error Stack thrown by this API in production mode is almost of no use. Can someone suggest how to decipher that. I have my sourceMaps.

This error is located at:
in t
in RCTSafeAreaView
in r
in r
in Connect(r)
in t
in RCTView
in n
in t
in n
in RCTView
in RCTView
in t
in RCTView
in e
in r
in Unknown
in n
in n
in t
in RCTView
in n
in t
in n
in RCTView
in RCTView
in t
in RCTView
in e
in r
in Unknown
in n
in n
in t
in RCTView
in RCTView
in t
in RCTView
in RCTView
in n
in t
in RCTView
in t
in r
in withCachedChildNavigation(r)
in Unknown
in n
in n
in t
in t
in withCachedChildNavigation(t)
in Unknown
in n
in n
in Unknown
in Connect(Component)
in n
in e
in t
in RCTView
in RCTView
in t

[dimlksin2]

phone_model: Urban
android_version: 7.0

com.facebook.react.common.JavascriptException: TypeError: TypeError: TypeError: Invalid attempt to destructure non-iterable instance

This error is located at:
in t
in t
in RCTView
in RCTView
in RCTView
in n
in t
in n
in RCTView
in RCTView
in t
in i
in RCTView
in t
in n
in n
in r
in n
in t
in RCTView
in RCTView
in t
in RCTView
in RCTView
in t
in n
in n
in n
in RCTView
in RCTView
in t
in t
in r
in Connect(r)
in RCTView
in t
in Connect(t)
in t
in Connect(t)
in o
in Connect(o)
in n
in t
in t
in o
in RCTView
in RCTView
in t

This error is located at:
in n
in t
in RCTView
in RCTView
in t
in RCTView
in RCTView
in t
in n
in n
in n
in RCTView
in RCTView
in t
in t
in r
in Connect(r)
in RCTView
in t
in Connect(t)
in t
in Connect(t)
in o
in Connect(o)
in n
in t
in t
in o
in RCTView
in RCTView
in t

This error is located at:
in n
in RCTView
in RCTView
in t
in t
in r
in Connect(r)
in RCTView
in t
in Connect(t)
in t
in Connect(t)
in o
in Connect(o)
in n
in t
in t
in o
in RCTView
in RCTView
in t, stack:
@11:5685
value@1490:4869
f@41:42083
beginWork@41:45676
o@41:64674
a@41:65053
T@41:68561
y@41:67997
v@41:67834
batchedUpdates@41:72172
Ie@41:14848
ze@41:15343
receiveTouches@41:16180
value@18:3582
@18:1067
value@18:3009
value@18:1039

at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:54)
at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:38)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:836)
at android.os.Handler.dispatchMessage(Handler.java:103)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
at android.os.Looper.loop(Looper.java:203)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
at java.lang.Thread.run(Thread.java:761)