[PAGES-47] Page-editor: Notify users about broken page template, e.g. missing html head&body markup Created: 23/Jul/15  Updated: 11/Apr/16  Resolved: 27/Nov/15

Status: Closed
Project: Magnolia pages module
Component/s: None
Affects Version/s: 5.4
Fix Version/s: 5.4.3

Type: Bug Priority: Major
Reporter: Christian Ringele Assignee: Sang Ngo Huu
Resolution: Fixed Votes: 1
Labels: support
Remaining Estimate: 0d
Time Spent: 7d 1h
Original Estimate: 4d

Issue Links:
Cloners
is cloned by MGNLUI-3679 CLONE - Page-editor: Notify users abo... Closed
Relates
duplicate
is duplicated by PAGES-71 Pages Detail-App: Missing & strange A... Closed
relation
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Release notes required:
Yes
Date of First Response:
Sprint: Saigon 25
Story Points: 5

 Description   

Problem:
Sometimes on freemarker errors in page/component scripts the right hand ActionBar has no Actions anymore.

I have seen this also in trainings.
Also other support cases were opened with this problem.
But we were never able to break it down into a reproducible situation to investigate into the bug.

Now a customer was able to provide an exact situation and code to reproduce it.
I can't add it here as it is customer code (SUPPORT-4885).
His example is working on missing html head&body markup.
But it also happens on certain freemarker errors, most likely having the same root cause.

I tried also with no html head&body markup and producing errors, but the bar didn't disappear.
So its some sort of combination triggering it. Its not just not having "html head&body markup".

See linked support issue.



 Comments   
Comment by Florian Fuchs [ 09/Nov/15 ]

Not only freemarker errors can cause this issue - Wrong HTML-markups in templates (too many closed elements, or too less) can cause the loss of the actionbar.

Comment by Sang Ngo Huu [ 12/Nov/15 ]

I will create template without html and body tag, just have text and freemarker. And the issue can reproduce.

There is my investigate:
Page editor will load and parse the html of a page, if a page just have text, not have html and body tag, model.getRootPage() will null

See PageEditorConnector, when the page in frame loaded, page is selected :

eventBus.addHandler(FrameLoadedEvent.TYPE, new FrameLoadedEvent.Handler() {
            @Override
            public void handle(FrameLoadedEvent event) {
               ...
                    } else {
                        focusModel.select(model.getRootPage());
                    }
                }
            }
        });

And NullPointException will throw at:

FocusModelImpl.java:234
 @Override
    public void select(MgnlElement mgnlElement) {
        mgnlElement = (mgnlElement != null) ? mgnlElement : model.getRootPage();
        eventBus.fireEvent(new SelectElementEvent(mgnlElement.getTypedElement()));
    }

Then info.magnolia.pages.app.editor.PagesEditorSubApp#updateActionbar() is not called

That why the action bar is empty.

Comment by Espen Jervidalo [ 16/Nov/15 ]

The behavior is correct. If it fails to parse the document due to the underlying template being broken, we should not show actions for the page, but inform the user, that their template is broken. Silently ignoring that will just encourage people to continue working with broken templates, instead of fixing it right away. Plus if the cms-comment for the page is missing, there's no way to tell what actions should be available, because the page-editor would not know which page it is editing.

Comment by Sang Ngo Huu [ 17/Nov/15 ]

ejervidalo Yes, I agree. I tried to add [cms.page /] into template, the action bar still not display. But when I wrap it with html and body tag, it works. Because we use Dom parser to parse HTML, if template does not follow the HTML standard, it will not work.

Comment by Nils Breunese [ 23/Nov/15 ]

After enabling super dev mode for GWT according to the instructions on https://wiki.magnolia-cms.com/display/DEV/GWT+debugging+with+super+dev+mode the action bar starts working on our broken test page! But after stopping the codeserver, cleaning the browser cache and restarting Magnolia the action bar is broken again. Maybe JavaScript minification/obfuscation/uglification causes this issue and maybe super dev mode doesn't do that, so that's why it works then?

Comment by Sang Ngo Huu [ 24/Nov/15 ]

breun Thanks for your input, I think the javascript has been cached or not updated when you switch between a worked page and an error page.

mgeljic ejervidalo There is my investigation:
1. For the page with error on whole template, we don't have [cms.page] comment, and the action bar is not displayed
2. For the page with error on a part (in template file of components or areas) it still works
3. For the template without html & body. Finally, the browser will add these tags automatically, but the comment [cms.page] is wrapped to top & outside of html tag. And our script for getting the document in iframe cannot get the comment. So, the action bar is not updated.
------------
Template:

[#assign title = content.title!"Hello Magnolia :-)"]
[@cms.page /]
<h1>${title}</h1>
[@cms.area name="main" /]

And result: Action bar is not displayed

<!-- cms:page content="website:/yyy" dialog="hello-magnolia:pages/hello" -->
<!-- /cms:page -->
<html>
<body>
<h1>Hello Magnolia :-)</h1>
<!-- cms:area content="website:/yyy/main" name="main" availableComponents="hello-magnolia:components/quotation" type="list" label="Main" inherit="false" optional="false" createAreaNode="true" showAddButton="true" showNewComponentArea="true" activationStatus="0" -->
<!-- /cms:area -->
</body>
</html>

-----------
Template:

[#assign title = content.title!"Hello Magnolia :-)"]
[@cms.page /]
<h1>${title}</h1>
[@cms.area name="main" /]
<html>
<body>
</body>
</html>

And result: Action bar is not displayed

<!-- cms:page content="website:/yyy" dialog="hello-magnolia:pages/hello" -->
<!-- /cms:page -->
<html>
<body>
<h1>Hello Magnolia :-)</h1>
<!-- cms:area content="website:/yyy/main" name="main" availableComponents="hello-magnolia:components/quotation" type="list" label="Main" inherit="false" optional="false" createAreaNode="true" showAddButton="true" showNewComponentArea="true" activationStatus="0" -->
<!-- /cms:area -->
</body>
</html>

-----------
Template:

[#assign title = content.title!"Hello Magnolia :-)"]
<h1>${title}</h1>
[@cms.page /]
[@cms.area name="main" /]

And result: Action bar is displayed

<html>
<body>
<h1>Hello Magnolia :-)</h1>
<!-- cms:page content="website:/yyy" dialog="hello-magnolia:pages/hello" -->
<!-- /cms:page -->
<!-- cms:area content="website:/yyy/main" name="main" availableComponents="hello-magnolia:components/quotation" type="list" label="Main" inherit="false" optional="false" createAreaNode="true" showAddButton="true" showNewComponentArea="true" activationStatus="0" -->
<!-- /cms:area -->
</body>
</html>

The approach:

  • I agreed with idea displaying the action bar when page is loaded, evenwhen the error on template. At current, there is an event from client side send to server side to update the action bar. The page is selected by default. Now we can do it in server side, we have enough information nodePath, previewMode
  • Resolve all the exceptions in client, such as:
    info.magnolia.ui.vaadin.gwt.client.editor.model.focus.FocusModelImpl#select
    
    @Override
    public void select(MgnlElement mgnlElement) {
            mgnlElement = (mgnlElement != null) ? mgnlElement : model.getRootPage();
            eventBus.fireEvent(new SelectElementEvent(mgnlElement.getTypedElement()));//NullPointException here
    }
    

I will try to implement this approach and let you know the result.

Comment by Nils Breunese [ 24/Nov/15 ]

I think the javascript has been cached or not updated when you switch between a worked page and an error page.

We have a reproducable error in our setup. We get the following JavaScript error in the browser console and the action bar does not display:

Thu Nov 19 13:53:03 GMT+100 2015 com.vaadin.client.ApplicationConfiguration
SEVERE: Exception caught: (TypeError) : undefined is not an object (evaluating 'a.$e')com.google.web.bindery.event.shared.UmbrellaException: Exception caught: (TypeError) : undefined is not an object (evaluating 'a.$e')
	at Unknown.Ac(http://localhost:8085/.magnolia/admincentral)
	at Unknown.qs(http://localhost:8085/.magnolia/admincentral)
	at Unknown.vs(http://localhost:8085/.magnolia/admincentral)
	at Unknown.vy(http://localhost:8085/.magnolia/admincentral)
	at Unknown.jy(http://localhost:8085/.magnolia/admincentral)
	at Unknown.uo(http://localhost:8085/.magnolia/admincentral)
	at Unknown.anonymous(http://localhost:8085/.magnolia/admincentral)
	at Unknown.anonymous(http://localhost:8085/.magnolia/admincentral)
	at Unknown.apply(Unknown)
	at Unknown.o(http://localhost:8085/.magnolia/admincentral/APP/PUBLISHED/jquery-1.7.2.min.js)
	at Unknown.add(http://localhost:8085/.magnolia/admincentral/APP/PUBLISHED/jquery-1.7.2.min.js)
	at Unknown.ready(http://localhost:8085/.magnolia/admincentral/APP/PUBLISHED/jquery-1.7.2.min.js)
	at Unknown.ajb(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Od(http://localhost:8085/.magnolia/admincentral)
	at Unknown.wd(http://localhost:8085/.magnolia/admincentral)
	at Unknown.ud(http://localhost:8085/.magnolia/admincentral)
	at Unknown.jy(http://localhost:8085/.magnolia/admincentral)
	at Unknown.by(http://localhost:8085/.magnolia/admincentral)
	at Unknown.ED(http://localhost:8085/.magnolia/admincentral)
	at Unknown.be(http://localhost:8085/.magnolia/admincentral)
	at Unknown.pra(http://localhost:8085/.magnolia/admincentral)
	at Unknown.GD(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Ee(http://localhost:8085/.magnolia/admincentral)
	at Unknown.OB(http://localhost:8085/.magnolia/admincentral)
	at Unknown.SC(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Fua(http://localhost:8085/.magnolia/admincentral)
	at Unknown.anonymous(http://localhost:8085/.magnolia/admincentral)
Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError) : undefined is not an object (evaluating 'a.$e')
	at Unknown.bD(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Uhb(http://localhost:8085/.magnolia/admincentral)
	at Unknown.ud(http://localhost:8085/.magnolia/admincentral)
	at Unknown.jy(http://localhost:8085/.magnolia/admincentral)
	at Unknown.uo(http://localhost:8085/.magnolia/admincentral)
	at Unknown.anonymous(http://localhost:8085/.magnolia/admincentral)
	at Unknown.anonymous(http://localhost:8085/.magnolia/admincentral)
	at Unknown.apply(Unknown)
	at Unknown.o(http://localhost:8085/.magnolia/admincentral/APP/PUBLISHED/jquery-1.7.2.min.js)
	at Unknown.add(http://localhost:8085/.magnolia/admincentral/APP/PUBLISHED/jquery-1.7.2.min.js)
	at Unknown.ready(http://localhost:8085/.magnolia/admincentral/APP/PUBLISHED/jquery-1.7.2.min.js)
	at Unknown.ajb(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Od(http://localhost:8085/.magnolia/admincentral)
	at Unknown.wd(http://localhost:8085/.magnolia/admincentral)
	at Unknown.ud(http://localhost:8085/.magnolia/admincentral)
	at Unknown.jy(http://localhost:8085/.magnolia/admincentral)
	at Unknown.by(http://localhost:8085/.magnolia/admincentral)
	at Unknown.ED(http://localhost:8085/.magnolia/admincentral)
	at Unknown.be(http://localhost:8085/.magnolia/admincentral)
	at Unknown.pra(http://localhost:8085/.magnolia/admincentral)
	at Unknown.GD(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Ee(http://localhost:8085/.magnolia/admincentral)
	at Unknown.OB(http://localhost:8085/.magnolia/admincentral)
	at Unknown.SC(http://localhost:8085/.magnolia/admincentral)
	at Unknown.Fua(http://localhost:8085/.magnolia/admincentral)
	at Unknown.anonymous(http://localhost:8085/.magnolia/admincentral)

When we setup GWT super dev mode to investigate the JavaScript error disappears and the action bar works. When we stop the GWT codeserver, clear the browser cache and restart Magnolia the JavaScript error is back and the action bar is again not displayed.

When we comment out a specific component the JavaScript error also disappears and the action bar displays. We stripped the component's template so far that it is actually only a [@cms.component component=component editable=editable /] with an empty FreeMarker template for that component, and even that triggers the JavaScript error and breaks the action bar (only HTML comments are output for the component). But it all works when using GWT super dev mode.

Comment by Nils Breunese [ 26/Nov/15 ]

A colleague of mine found out that the cause in our case was that a component was rendered outside the context of an area.

Comment by Mikaël Geljić [ 04/Jan/16 ]

Final statement here, for the sake of completeness:

  • The page-editor now reports broken templates in case edit-bars cannot be injected (e.g. missing or misplaced @cms tags).
    • We acknowledge an API change in PageEditorListener and PageEditorServerRpc to support that.
    • This should only affect you if you use a custom page-editor presenter AND it does not extend our default implementation (info.magnolia.pages.app.editor.PageEditorPresenter).
Generated at Mon Feb 12 06:15:06 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.