Replying to events can crash react #6059

turt2live · 2018-01-29T17:58:07Z

Description

This only affects develop. Someone replied to a very old event (a few days old in a room with average traffic). Upon opening that room, the react stack falls apart with errors similar to the following.

Uncaught Error: Quote.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (bundle.js:2482)
    at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:310005)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:309536)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:309432)
    at Object.mountComponent (bundle.js:27927)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:309545)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:309432)
    at Object.mountComponent (bundle.js:27927)
    at mountComponentIntoNode (bundle.js:120005)
    at ReactReconcileTransaction.perform (bundle.js:48756)
    at batchedMountComponentIntoNode (bundle.js:120027)
    at Object.batchedUpdates (bundle.js:312651)
    at Object.batchedUpdates (bundle.js:16026)
    at Object._renderNewRootComponent (bundle.js:120220)
    at Object._renderSubtreeIntoContainer (bundle.js:120302)
    at Object.render (bundle.js:120323)
    at Object.pillifyLinks (bundle.js:154484)
    at Object.pillifyLinks (bundle.js:154567)
    at Object.componentDidMount (bundle.js:154372)
    at Object.chainedFunction [as componentDidMount] (bundle.js:272295)
    at bundle.js:309439
    at measureLifeCyclePerf (bundle.js:309250)
    at bundle.js:309438
    at CallbackQueue.notifyAll (bundle.js:118670)
    at ReactReconcileTransaction.close (bundle.js:314278)
    at ReactReconcileTransaction.closeAll (bundle.js:48822)
    at ReactReconcileTransaction.perform (bundle.js:48769)
    at ReactUpdatesFlushTransaction.perform (bundle.js:48756)
bundle.js:59024 Unhandled rejection TypeError: Cannot read property '_currentElement' of null
    at ReactCompositeComponentWrapper._updateRenderedComponent (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:309919:54)
    at ReactCompositeComponentWrapper._performComponentUpdate (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:309898:11)
    at ReactCompositeComponentWrapper.updateComponent (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:309819:13)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:309735:13)
    at Object.performUpdateIfNecessary (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:28038:23)
    at runBatchedUpdates (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:16079:22)
    at ReactReconcileTransaction.perform (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:48756:21)
    at ReactUpdatesFlushTransaction.perform (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:48756:21)
    at ReactUpdatesFlushTransaction.perform (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:16018:33)
    at Object.flushBatchedUpdates (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:16101:20)
    at ReactDefaultBatchingStrategyTransaction.closeAll (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:48822:26)
    at ReactDefaultBatchingStrategyTransaction.perform (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:48769:17)
    at Object.batchedUpdates (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:312653:27)
    at Object.enqueueUpdate (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:16129:23)
    at enqueueUpdate (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:72992:17)
    at Object.enqueueSetState (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:73186:6)
    at Quote.ReactComponent.setState (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:121784:17)
    at Quote.addEvent (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:149835:19)
    at Quote._callee$ (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:149815:39)
    at tryCatch (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:223161:41)
    at Generator.invoke [as _invoke] (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:223395:23)
    at Generator.prototype.(anonymous function) [as next] (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:223213:22)
    at Generator.tryCatcher (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:10258:24)
    at PromiseSpawn._promiseFulfilled (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:170182:50)
    at Promise._settlePromise (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:171361:27)
    at Promise._settlePromise0 (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:171401:11)
    at Promise._settlePromises (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:171480:19)
    at Async._drainQueue (https://riot.im/develop/bundles/ee720bec9c4610e52913/bundle.js:168454:17)

Version information

Platform: web (in-browser)
Browser: Chrome 63
OS: Windows 10
URL: riot.im/develop

The text was updated successfully, but these errors were encountered:

turt2live · 2018-01-29T17:58:16Z

@t3chguy you may be interested in this

t3chguy · 2018-01-29T17:58:54Z

I read all new issues, especially yours ;)

t3chguy · 2018-01-29T18:01:58Z

Hmmmmmmmmmmmmmmmmmm, NO IDEA whats happening here. I'll add a naive null guard in the hope it helps

turt2live · 2018-01-29T19:27:08Z

I'm starting to wonder if "old" is even a thing here. The entire thing just died on a different reply, and that original event was only minutes ago.

Possibly a race condition on getting the node? It's probably exacerbated by my riot being slower than normal.

turt2live · 2018-01-31T18:43:23Z

I'm still getting this in almost every room despite matrix-org/matrix-react-sdk#1724 being merged and applied.

Uncaught Error: Quote.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
    at invariant (bundle.js:2482)
    at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:310061)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:309592)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:309488)
    at Object.mountComponent (bundle.js:27927)
    at ReactCompositeComponentWrapper.performInitialMount (bundle.js:309601)
    at ReactCompositeComponentWrapper.mountComponent (bundle.js:309488)
    at Object.mountComponent (bundle.js:27927)
    at mountComponentIntoNode (bundle.js:120005)
    at ReactReconcileTransaction.perform (bundle.js:48756)
    at batchedMountComponentIntoNode (bundle.js:120027)
    at Object.batchedUpdates (bundle.js:312707)
    at Object.batchedUpdates (bundle.js:16026)
    at Object._renderNewRootComponent (bundle.js:120220)
    at Object._renderSubtreeIntoContainer (bundle.js:120302)
    at Object.render (bundle.js:120323)
    at Object.pillifyLinks (bundle.js:154485)
    at Object.pillifyLinks (bundle.js:154568)
    at Object.componentDidMount (bundle.js:154373)
    at Object.chainedFunction [as componentDidMount] (bundle.js:272345)
    at bundle.js:309495
    at measureLifeCyclePerf (bundle.js:309306)
    at bundle.js:309494
    at CallbackQueue.notifyAll (bundle.js:118670)
    at ReactReconcileTransaction.close (bundle.js:314334)
    at ReactReconcileTransaction.closeAll (bundle.js:48822)
    at ReactReconcileTransaction.perform (bundle.js:48769)
    at ReactUpdatesFlushTransaction.perform (bundle.js:48756)

lukebarnard1 · 2018-02-07T12:39:28Z

From what I can tell an actual DOM element a is being passed as this.props.node. It needs to be a React element.

ara4n · 2018-02-09T22:00:28Z

@t3chguy this is nuking my app on a fairly regular basis (e.g. #6115) - is it on your radar?

t3chguy · 2018-02-09T22:01:24Z

Yah, I've almost finished the rewrite of Replies to use m.relates_to instead of crude HTML parsing, so would just like the ack from Erik&Rich on that front so that it is not in vein

ara4n · 2018-02-09T22:16:25Z

as far as i'm aware everyone is happy with m.relates_to - the only question was whether it should go in or outside the content. I'd start with it inside and then move it outside if folks feel strongly. (erik was in hol today and relatedly vdh is overloaded, hence lag).

t3chguy · 2018-02-09T22:17:27Z

That's what I have done
with a thing in js-sdk to hoist m.relates_to out of the content into the wrapping content for encrypted events

turt2live · 2018-05-03T20:16:43Z

fixed

t3chguy mentioned this issue Jan 29, 2018

Null guard against falsey (non-null) props.node, to make react happy matrix-org/matrix-react-sdk#1724

Merged

t3chguy mentioned this issue Jan 29, 2018

Change Rich Quoting HTML Format over the wire matrix-org/matrix-react-sdk#1701

Closed

lampholder added T-Defect P1 S-Minor Impairs non-critical functionality or suitable workarounds exist A-Replies reply labels Jan 31, 2018

turt2live changed the title ~~Replying to very old events can crash react~~ Replying to events can crash react Feb 9, 2018

turt2live mentioned this issue Feb 9, 2018

Riot exploded in a cloud of NPEs whilst trying to pillify a rich reply? #6115

Closed

t3chguy mentioned this issue Feb 10, 2018

Replies matrix-org/matrix-react-sdk#1741

Merged

turt2live closed this as completed May 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replying to events can crash react #6059

Replying to events can crash react #6059

turt2live commented Jan 29, 2018

turt2live commented Jan 29, 2018

t3chguy commented Jan 29, 2018

t3chguy commented Jan 29, 2018

turt2live commented Jan 29, 2018

turt2live commented Jan 31, 2018

lukebarnard1 commented Feb 7, 2018

ara4n commented Feb 9, 2018

t3chguy commented Feb 9, 2018

ara4n commented Feb 9, 2018

t3chguy commented Feb 9, 2018 •

edited

Loading

turt2live commented May 3, 2018

Replying to events can crash react #6059

Replying to events can crash react #6059

Comments

turt2live commented Jan 29, 2018

Description

Version information

turt2live commented Jan 29, 2018

t3chguy commented Jan 29, 2018

t3chguy commented Jan 29, 2018

turt2live commented Jan 29, 2018

turt2live commented Jan 31, 2018

lukebarnard1 commented Feb 7, 2018

ara4n commented Feb 9, 2018

t3chguy commented Feb 9, 2018

ara4n commented Feb 9, 2018

t3chguy commented Feb 9, 2018 • edited Loading

turt2live commented May 3, 2018

t3chguy commented Feb 9, 2018 •

edited

Loading