Broken thread when a message is missing

[ariasuni]

Broken threads

• user1 send a private toot
• user2 answers
• user1 answers
• user1 add a precision

When user3, who follows user1 but not user2, opens any toot of user1, they can see:

• the 3 toots of user1 in the static front-end, without the toot of user2 (correct)
• only the part of the tread before or after the toot of user2 in the logged-in UI (incorrect)

The JSON of context seems fine (contains ID of every ancestors that should be displayed) and it works in the static front-end, so retrieving the whole thread is probably an easy fix?

Rendering bug

In the second case, it also triggers a nasty rendering bug:

• open one toot of user1 except the first
• click on «Show more for all»
• rendering issue causing all the div#mastodon to be empty.

The rendering errors seem to arise from the fact that it tries to «show more» on statuses with IDs that aren’t showed in the interface.

Javascript stacktrace

The above error occurred in the <Status> component:
    in Status (created by Connect(Status))
    in Connect(Status) (created by InjectIntl(Connect(Status)))
    in InjectIntl(Connect(Status)) (at index.js:334)
    in div (at index.js:385)
    in div (at index.js:413)
    in ScrollContainer (at index.js:412)
    in div (at column.js:59)
    in Column (at index.js:404)
    in Status (created by Connect(Status))
    in Connect(Status) (created by InjectIntl(Connect(Status)))
    in InjectIntl(Connect(Status)) (at react_router_helpers.js:50)
    in Bundle (created by Connect(Bundle))
    in Connect(Bundle) (at react_router_helpers.js:49)
    in Route (at react_router_helpers.js:66)
    in WrappedRoute (at index.js:159)
    in Switch (at react_router_helpers.js:16)
    in WrappedSwitch (at index.js:139)
    in div (at columns_area.js:175)
    in ColumnsArea (created by InjectIntl(ColumnsArea))
    in InjectIntl(ColumnsArea) (created by Connect(InjectIntl(ColumnsArea)))
    in Connect(InjectIntl(ColumnsArea)) (at index.js:138)
    in SwitchingColumnsArea (at index.js:452)
    in div (at index.js:449)
    in div (created by FocusTrap)
    in FocusTrap (created by HotKeys)
    in HotKeys (at index.js:448)
    in UI (created by Route)
    in Route (created by withRouter(UI))
    in withRouter(UI) (created by InjectIntl(withRouter(UI)))
    in InjectIntl(withRouter(UI)) (created by Connect(InjectIntl(withRouter(UI))))
    in Connect(InjectIntl(withRouter(UI))) (created by Route)
    in Route (at mastodon.js:66)
    in ScrollContext (created by Route)
    in Route (created by withRouter(ScrollContext))
    in withRouter(ScrollContext) (at mastodon.js:65)
    in Router (created by BrowserRouter)
    in BrowserRouter (at mastodon.js:64)
    in Provider (at mastodon.js:63)
    in IntlProvider (at mastodon.js:62)
    in Mastodon (at main.js:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:9643
The above error occurred in the <Connect(InjectIntl(ColumnsArea))> component:
    in Connect(InjectIntl(ColumnsArea)) (at index.js:138)
    in SwitchingColumnsArea (at index.js:452)
    in div (at index.js:449)
    in div (created by FocusTrap)
    in FocusTrap (created by HotKeys)
    in HotKeys (at index.js:448)
    in UI (created by Route)
    in Route (created by withRouter(UI))
    in withRouter(UI) (created by InjectIntl(withRouter(UI)))
    in InjectIntl(withRouter(UI)) (created by Connect(InjectIntl(withRouter(UI))))
    in Connect(InjectIntl(withRouter(UI))) (created by Route)
    in Route (at mastodon.js:66)
    in ScrollContext (created by Route)
    in Route (created by withRouter(ScrollContext))
    in withRouter(ScrollContext) (at mastodon.js:65)
    in Router (created by BrowserRouter)
    in BrowserRouter (at mastodon.js:64)
    in Provider (at mastodon.js:63)
    in IntlProvider (at mastodon.js:62)
    in Mastodon (at main.js:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:9643

TypeError: status.get(...) is undefined. common.js line 2007 > eval:274:9
render
status.js:181
finishClassComponent
react-dom.development.js:8389
updateClassComponent
react-dom.development.js:8357
beginWork
react-dom.development.js:8982
performUnitOfWork
react-dom.development.js:11814
workLoop
react-dom.development.js:11843
callCallback
react-dom.development.js:100
invokeGuardedCallbackDev
react-dom.development.js:138
invokeGuardedCallback
react-dom.development.js:187
replayUnitOfWork
react-dom.development.js:11318
renderRoot
react-dom.development.js:11885
performWorkOnRoot
react-dom.development.js:12449
performWork
react-dom.development.js:12370
performSyncWork
react-dom.development.js:12347
interactiveUpdates
react-dom.development.js:12597
interactiveUpdates
react-dom.development.js:1958
dispatchInteractiveEvent
react-dom.development.js:4259
dispatchInteractiveEvent self-hosted:1031:17

TypeError: c is null. application.js line 182 > eval:139:7
SwitchingColumnsArea/_this.setRef
index.js:129
callCallback
react-dom.development.js:100
invokeGuardedCallbackDev
react-dom.development.js:138
invokeGuardedCallback
react-dom.development.js:187
safelyDetachRef
react-dom.development.js:9723
commitUnmount
react-dom.development.js:9953
commitNestedUnmounts
react-dom.development.js:9992
unmountHostComponents
react-dom.development.js:10279
commitDeletion
react-dom.development.js:10329
commitAllHostEffects
react-dom.development.js:11413
callCallback
react-dom.development.js:100
invokeGuardedCallbackDev
react-dom.development.js:138
invokeGuardedCallback
react-dom.development.js:187
commitRoot
react-dom.development.js:11559
completeRoot
react-dom.development.js:12502
performWorkOnRoot
react-dom.development.js:12452
performWork
react-dom.development.js:12370
performSyncWork
react-dom.development.js:12347
interactiveUpdates
react-dom.development.js:12597
interactiveUpdates
react-dom.development.js:1958
dispatchInteractiveEvent
react-dom.development.js:4259
dispatchInteractiveEvent self-hosted:1031:17

TypeError: status.get(...) is undefined. common.js line 2007 > eval:274:9
render
status.js:181
finishClassComponent
react-dom.development.js:8389
updateClassComponent
react-dom.development.js:8357
beginWork
react-dom.development.js:8982
performUnitOfWork
react-dom.development.js:11814
workLoop
react-dom.development.js:11843
renderRoot
react-dom.development.js:11874
performWorkOnRoot
react-dom.development.js:12449
performWork
react-dom.development.js:12370
performSyncWork
react-dom.development.js:12347
interactiveUpdates
react-dom.development.js:12597
interactiveUpdates
react-dom.development.js:1958
dispatchInteractiveEvent
react-dom.development.js:4259
dispatchInteractiveEvent self-hosted:1031:17

---

• I searched or browsed the repo’s other issues to ensure this is not a duplicate.
• This bug happens on a tagged release and not on master (If you're a user, don't worry about this).

[ariasuni]

If I change

mastodon/app/javascript/mastodon/components/status.js

Line 147 in fbee9b5

if (status === null) {

to

    if (status === null || status.get('content') === undefined) {

then it fixes the rendering issue, although I’m not sure it’s the best way to handle that.

[ariasuni]

If I change

mastodon/app/javascript/mastodon/components/status.js

Line 147 in fbee9b5

if (status === null) {

to

    if (status === null || status.get('content') === undefined) {

then it fixes the rendering issue, although I’m not sure it’s the best way to handle that.