OmniFaces FullAjaxExceptionHandler: исключение при запросе AJAX приводит к отображению страницы ошибки без CSS - PullRequest
Новая
       72

OmniFaces FullAjaxExceptionHandler: исключение при запросе AJAX приводит к отображению страницы ошибки без CSS

0 голосов
/ 20 сентября 2019

Прежде всего, наша конфигурация:

  • WildFly 14.0.1. Финал
  • Мохарра 2.3.5.SP2
  • OmniFaces 3.2
  • PrimeFaces 6.2

Описание проблемы:

Мы используем OmniFaces FullAjaxExceptionHandler для отображения страницы ошибок при запросах AJAX.

Соответствующий web.xml: 

<error-page>
    <error-code>404</error-code>
    <location>/WEB-INF/errorpages/unexpectedError.xhtml</location>
</error-page>

<error-page>
    <error-code>500</error-code>
    <location>/WEB-INF/errorpages/unexpectedError.xhtml</location>
</error-page>

<error-page>
    <exception-type>javax.faces.application.ViewExpiredException</exception-type>
    <location>/WEB-INF/errorpages/loginExpired.xhtml</location>
</error-page>

<error-page>
    <exception-type>javax.el.MethodNotFoundException</exception-type>
    <location>/WEB-INF/errorpages/unexpectedError.xhtml</location>
</error-page>

У нас было несколько ситуаций, когда происходило что-то довольно редкое.Теперь мы создали тестовую ситуацию с выражением EL, вызывающим несуществующий метод, который не существует, просто для запуска MethodNotFoundException при входе в систему.

Relevant login.xhtml: 

<p:someComponent ...
                 action="#{authenticator.thisMethodDoesNotExist()}"
                 ... />

Это страница ошибки, которую мы хотим отобразить, расположенная по адресу /WEB-INF/errorpages/unexpectedError.xhtml: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pa="http://primefaces.org/avalon"
                template="/WEB-INF/templating/thinTemplate.xhtml">

    <ui:define name="metadata">
    </ui:define>

    <ui:define name="resources">
    </ui:define>

    <ui:define name="title">
        <h:outputText value="Unerwarteter Fehler" />
    </ui:define>

    <ui:define name="content">

        <div class="ui-fluid">
            <div class="ui-g">
                <div class="ui-g-12 no-padding">
                    <div class="background-error-login-failed max-width-100">
                    </div>
                    <h:form id="content-form"
                            class="mt-50px mb-50px">
                        <div class="max-width-content ml-auto mr-auto">

                            <h1>Unerwarteter Fehler</h1>

                            <p>
                                Leider ist ein unerwarteter Fehler aufgetreten.
                            </p>
                            <p>
                                Bitte versuchen Sie, sich erneut anzumelden.
                            </p>

                            <p:link value="Zur Startseite"
                                    outcome="..." />
                        </div>
                    </h:form>
                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>

/WEB-INF/templating/thinTemplate.xhtml: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pa="http://primefaces.org/avalon">

    <f:view encoding="UTF-8"
            locale="de_DE">

        <ui:insert name="metadata" />

        <h:head>
            <title>
                <ui:insert name="title" />
            </title>

            <ui:include src="resources.xhtml" />

            <ui:insert name="resources" />
        </h:head>

        <h:body>
            <ui:include src="thinHeader.xhtml" />

            <div class="layout-main">
                <ui:insert name="content" />
            </div>

            <ui:include src="./footer.xhtml" />
        </h:body>

    </f:view>

</html>

/WEB-INF/templating/resources.xhtml (ссылка на thinTemplate.xhtml h: head): 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <h:outputStylesheet library="global-mixins" name="css/application.css" />
    <h:outputStylesheet library="global-mixins" name="css/borders.css" />
    <h:outputStylesheet library="global-mixins" name="css/colors.css" />
    <h:outputStylesheet library="global-mixins" name="css/fonts.css" />
    <h:outputStylesheet library="global-mixins" name="css/forms.css" />
    <h:outputStylesheet library="global-mixins" name="css/heights.css" />
    <h:outputStylesheet library="global-mixins" name="css/margin.css" />
    <h:outputStylesheet library="global-mixins" name="css/misc.css" />
    <h:outputStylesheet library="global-mixins" name="css/padding.css" />
    <h:outputStylesheet library="global-mixins" name="css/text.css" />
    <h:outputStylesheet library="global-mixins" name="css/widths.css" />

    <h:outputStylesheet library="easy-login" name="css/backgrounds.css" />
    <h:outputStylesheet library="easy-login" name="css/content.css" />
    <h:outputStylesheet library="easy-login" name="css/dialog.css" />
    <h:outputStylesheet library="easy-login" name="css/error.css" />
    <h:outputStylesheet library="easy-login" name="css/footer.css" />
    <h:outputStylesheet library="easy-login" name="css/header.css" />
    <h:outputStylesheet library="easy-login" name="css/icons.css" />
    <h:outputStylesheet library="easy-login" name="css/input.css" />
    <h:outputStylesheet library="easy-login" name="css/togglepanel.css" />

    <h:outputStylesheet library="avalon-layout" name="css/layout-#{uiHelper.layoutColor}.css" />
    <h:outputStylesheet library="avalon-layout" name="css/nanoscroller.css" />
    <h:outputStylesheet library="avalon-layout" name="css/animate.css" />
    <h:outputStylesheet library="avalon-layout" name="css/grid.css" />

    <h:outputScript library="avalon-layout" name="js/nanoscroller.js" />
    <h:outputScript library="avalon-layout" name="js/layout.js" />

</ui:composition>

Хотя эта страница несколько прямолинейна, всякий раз, когда меня перенаправляют на страницу unexpectedError.xhtml, представление отображается без CSS:

enter image description here

Я, конечно, изучал пути решения этой проблемы.Похоже, этот пример ближе всего:

https://github.com/omnifaces/omnifaces/issues/495

У нас точно такая же проблема: возникает ошибка AJAX, переходим на страницу с ошибкой, страница с ошибкой отображается без CSS.

Ответ от BalusC:

Скорее всего, вместо этого у вас есть таблицы стилей, относящиеся к странице ошибки, в заголовке самой страницы ошибки или в общем шаблоне, который также используется страницей происхождения, гдеисключение брошено.Ответы Ajax по умолчанию не обновляют заголовок.

Не совсем.resources.css в нашем случае является специфичным для шаблона (глобальным).

melloware перечисляет две другие ссылки:

h: outputStylesheet не вставляется при использовании FullAjaxExceptionHandler

h: тело не перерисовывается при использовании FullAjaxExceptionHandler

Эти парни, похоже, отказались от помещения всего CSS <h:outputStylesheet ...> в <h:body> ИЛИ, играя со стилями наbody element.

Как видно из кода, наш h:body не определяет классы CSS, а не стили вручную.thinTemplate.xhtml используется исключительно на страницах входа и ошибок (тонкий, потому что ни один пользователь не вошел в систему и меню не отображается).

Что бы мы ни пытались, поместив CSS в h:body плюс вседругие вещи, мы по-прежнему получаем неправильный рендеринг выше.

HTML-код в браузере: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">

    ...

    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/application.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/borders.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/colors.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/fonts.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/forms.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/heights.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/margin.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/misc.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/padding.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/text.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/widths.css.xhtml?ln=global-mixins"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/backgrounds.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/content.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/dialog.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/error.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/footer.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/header.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/icons.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/input.css.xhtml?ln=easy-login"/>
    <link type="text/css" rel="stylesheet" href="/auth-portal/javax.faces.resource/css/togglepanel.css.xhtml?ln=easy-login"/>

    ...
</head>
<body>
<div id="thinHeader" class="">
    <div id="thin-topbar" class="thinNavigation">
    .
    .
    .

ВОПРОС :

Как вы /мы решаем это?Что именно было решением в билете OmniFaces?Я не понимаю.

Извините за долгую публикацию.Это, вероятно, необходимо.

...