White page after discard all

[gerdemann]

Description

I get a white page when I click on "discard all" and then want to edit something inline again.

Steps to Reproduce

1. Edit some properties
2. Click on "discard all"
3. Click in an inline editable field

Expected behavior

I can edit the property.

Actual behavior

I get a white page with the following error in console:

stacktrace

index.js:43 Uncaught TypeError: Cannot read property 'contextPath' of null
    at InlineUI.render (index.js:43)
    at gi (react-dom.production.min.js:182)
    at fi (react-dom.production.min.js:181)
    at xo (react-dom.production.min.js:263)
    at Qj (react-dom.production.min.js:246)
    at Kj (react-dom.production.min.js:246)
    at yj (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at w.unstable_runWithPriority (scheduler.production.min.js:18)
    at cg (react-dom.production.min.js:122)
render @ index.js:43
gi @ react-dom.production.min.js:182
fi @ react-dom.production.min.js:181
xo @ react-dom.production.min.js:263
Qj @ react-dom.production.min.js:246
Kj @ react-dom.production.min.js:246
yj @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
w.unstable_runWithPriority @ scheduler.production.min.js:18
cg @ react-dom.production.min.js:122
fg @ react-dom.production.min.js:123
gg @ react-dom.production.min.js:122
Mj @ react-dom.production.min.js:240
notify @ Subscription.js:23
notifyNestedSubs @ Subscription.js:65
handleChangeWrapper @ Subscription.js:70
dispatch @ redux.js:221
(anonymous) @ clipboardMiddleware.js:22
(anonymous) @ localStorageMiddleware.js:21
(anonymous) @ middleware.js:66
focusSelectedNode @ initializeGuestFrame.js:110
(anonymous) @ initializeGuestFrame.js:125

Affected Versions

Neos: 5.3
UI: 5.3.8

[dlubitz]

Same here! I've noticed it multiple times but couldn't reproduce it. Thanks @gerdemann .

I could narrow it down a bit more. The error happens if you click an inline editable element AFTER /neos/preview?node=.... request has been started and BEFORE you get the response.

After getting the response page is fully reloaded and selecting elements works as expected.

[Sebobo]

@dlubitz @gerdemann I wasn't able to reproduce the issue but I fixed the line where your error happened in #2942. Can either of you check if it's resolved with my patch?

[grebaldi]

I tried the above steps, but couldn't reproduce the issue first. Then I turned on network throttling to be able to focus an inline editable element quickly before the response from /neos/preview?node=.... arrives.

Adn indeed, the UI crashed but with a myriad of other error messages (the one reported above was not among them):

Errors:

Uncaught TypeError: _ckeditorerror2.default.rethrowUnexpectedError is not a function
    change view.js:486
    forceRender view.js:502
    _renderTimeoutId focusobserver.js:40
    setTimeout handler*FocusObserver/< focusobserver.js:40
    fire emittermixin.js:207
    fire domeventobserver.js:96
    onDomEvent focusobserver.js:63
    observe domeventobserver.js:79
    fire emittermixin.js:207
    domListener emittermixin.js:235
    attach emittermixin.js:193
    listenTo emittermixin.js:59
    observe domeventobserver.js:77
    observe domeventobserver.js:76
    attachDomRoot view.js:275
    init decouplededitorui.js:87
    create decouplededitor.js:238
    promise callback*create/< decouplededitor.js:237
    create decouplededitor.js:224
    createEditor ckEditorApi.js:60
    default initializePropertyDomNode.js:58
    default initializeContentDomNode.js:57
    initializeNodes initializeGuestFrame.js:148
    requestIdleCallback handler*initializeGuestFrame$/initializeNodes preview:17
    EventListener.handleEvent* preview:15
view.js:486:17
Key must be a string 
Inspector@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:357174:24
ConnectFunction@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:279187:75
NeosDecorator@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:326995:50
div
SideBar@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:374532:42
Themed@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:106477:24
RightSideBar@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:357656:24
ConnectFunction@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:279187:75
NeosDecorator@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:326995:50
div
App@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:347191:26
Neos@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:354240:24
./node_modules/react-dnd/dist/esm/common/DndProvider.js/ preview:17
    EventListener.handleEvent* preview:15
ckeditorerror.js:59:39
Uncaught CKEditorError: cannot-change-view-tree: Attempting to make changes to the view when it is in an incorrect state: rendering or post-fixers are in progress. This may cause some unexpected behavior and inconsistency between the DOM and the view. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-cannot-change-view-tree
    CKEditorError ckeditorerror.js:59
    change view.js:451
    removePlaceholder neosPlaceholder.js:47
    updatePlaceholder neosPlaceholder.js:56
    init neosPlaceholder.js:71
    fire emittermixin.js:207
    set observablemixin.js:92
    _focus focustracker.js:121
    add focustracker.js:81
    fire emittermixin.js:207
    domListener emittermixin.js:235
    attach emittermixin.js:193
    listenTo emittermixin.js:59
    add focustracker.js:81
    init decouplededitorui.js:74
    create decouplededitor.js:238
    promise callback*create/< decouplededitor.js:237
    create decouplededitor.js:224
    createEditor ckEditorApi.js:60
    default initializePropertyDomNode.js:58
    default initializeContentDomNode.js:57
    initializeNodes initializeGuestFrame.js:148
    requestIdleCallback handler*initializeGuestFrame$/initializeNodes preview:17
    EventListener.handleEvent* preview:15
ckeditorerror.js:59:39
Key must be a string 
Inspector@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:357174:24
ConnectFunction@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:279187:75
NeosDecorator@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:326995:50
div
SideBar@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:374532:42
Themed@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:106477:24
RightSideBar@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:357656:24
ConnectFunction@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:279187:75
NeosDecorator@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:326995:50
div
App@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:347191:26
Neos@https://neos-ui-pr-2942-review.ddev.site/_Resources/Static/Packages/Neos.Neos.Ui/JavaScript/Host.js?f32bdedc:354240:24
./node_modules/react-dnd/dist/esm/common/DndProvider.js/ preview:17
    EventListener.handleEvent* preview:15
index.js:136:15
The above error occurred in the  component:
    in Inspector (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Neos(Connect(Inspector)) (created by RightSideBar)
    in div (created by SideBar)
    in SideBar (created by ThemedSideBar)
    in ThemedSideBar (created by RightSideBar)
    in RightSideBar (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Neos(Connect(RightSideBar)) (created by App)
    in div (created by App)
    in App (created by Root)
    in Neos (created by Root)
    in Unknown (created by Root)
    in Provider (created by Root)
    in div (created by Root)
    in Root
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_devtools_backend.js:2574:23

Uncaught TypeError: can't convert null to object

preprocessViewConfiguration index.js:136

preprocessViewConfigurationDebounced index.js:173

Lodash 3

componentDidUpdate index.js:123

React 6

unstable_runWithPriority scheduler.development.js:697

React 5

unstable_runWithPriority scheduler.development.js:697

React 4

Redux 4

e content:1

clipboardMiddleware clipboardMiddleware.js:22

localStorageMiddleware localStorageMiddleware.js:21

sagaMiddleware Redux

focusSelectedNode initializeGuestFrame.js:110

initializeGuestFrame$/< initializeGuestFrame.js:125

initializeGuestFrame$ initializeGuestFrame.js:123

tryCatch runtime.js:45

invoke runtime.js:271

method runtime.js:97

Redux 10

onFrameChange index.js:155

UNSAFE_componentWillMount frame.tsx:118

 preview:17

EventListener.handleEvent* preview:15

index.js:136:15

Uncaught CKEditorError: cannot-change-view-tree: Attempting to make changes to the view when it is in an incorrect state: rendering or post-fixers are in progress. This may cause some unexpected behavior and inconsistency between the DOM and the view. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-cannot-change-view-tree

CKEditorError ckeditorerror.js:59

change view.js:451

removePlaceholder neosPlaceholder.js:47

updatePlaceholder neosPlaceholder.js:56

init neosPlaceholder.js:71

fire emittermixin.js:207

set observablemixin.js:92

_nextEventLoopTimeout focustracker.js:136

setTimeout handler*_blur focustracker.js:134

add focustracker.js:82

fire emittermixin.js:207

domListener emittermixin.js:235

React 8

unstable_runWithPriority scheduler.development.js:697

React 5

unstable_runWithPriority scheduler.development.js:697

React 4

Redux 4

e content:1

clipboardMiddleware clipboardMiddleware.js:22

localStorageMiddleware localStorageMiddleware.js:21

sagaMiddleware Redux

focusSelectedNode initializeGuestFrame.js:110

initializeGuestFrame$/< initializeGuestFrame.js:125

initializeGuestFrame$ initializeGuestFrame.js:123

tryCatch runtime.js:45

invoke runtime.js:271

method runtime.js:97

Redux 10

onFrameChange index.js:155

UNSAFE_componentWillMount frame.tsx:118

 preview:17

EventListener.handleEvent* preview:15

ckeditorerror.js:59:39

@Sebobo: I'm afraid your patch doesn't solve the issue :(

[Sebobo]

@grebaldi thx for checking. I had also tried with throttling (slow 3g) but it never happened.

[markusguenther]

Wanted to review that but did not manage to reproduce the issue :/
Is there a trick?

[markusguenther]

Ok tried that now with 3G throttling but got another issue.

So even with the patch I will get this error, but no white page.

[markusguenther]

I throttled to regular 3G and used the Firefox dev version on macOS 11.6.

[markusguenther]

Ok, think we have it, would be nice to get some reviews. Does not need to be a core team member :)

discarderror.mp4