Задать вопрос
AlexXYZ
@AlexXYZ
O Keep Clear O

Можно ли уведомить пользователя об ошибках в загрузке частей страницы?

Всем привет.
У меня тут не ладятся отношения с одним сайтом linux/apache/php/ssl. Иногда при загрузке не полностью подгружает компоненты. То скрипт не подгрузит, то css-ку. Но не всегда. Ошибка плавающая. Не могу разобраться, т.к. нет доступа к сети. Можно ли было бы уведомить пользователя сообщением, что часть приложения не подгрузилась? Не важно что пошло не так, желательно, чтобы на первой странице, которую загружает пользователь поставить заглушку на ошибку загрузки? Понимаю, что лучше разобраться с сетью, но вот уж как есть. Обработка нужна кроссбраузерная.

Сами ошибки такого плана:

9480de8883a9461098044eeda49e4551.png
  • Вопрос задан
  • 150 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 1
AlexXYZ
@AlexXYZ Автор вопроса
O Keep Clear O
Решение не совсем простое. Но меня утраивает. Надеюсь, что может помочь и кому-то ещё.

<script type="text/javascript">
    // http://javascript.ru/blog/ilya-kantor/zagruzka-dannyh-cherez-script-s-otlovom-oshibok
    // https://learn.javascript.ru/onload-onerror

    // Ловим ошибки загрузки ресурсов:
    // Массив в который будут записываться результаты:
    var arr_loaded_resources = [];

    // Ловит ошибки и выводит их в приложение:
    function func_error_out(err){
        if( err!=null){
            console.warn( JSON.stringify(err));
            arr_loaded_resources.push( err );

            var app = document.getElementById("id_slip_application");
            var arr_error = [];
            for( var i=0; i<=arr_loaded_resources.length-1; i++){
                arr_loaded_resources_i = arr_loaded_resources[i];
                if( arr_loaded_resources_i.error==true ){
                    arr_error.push( JSON.stringify( arr_loaded_resources_i ) );
                }
            }
            app.innerHTML = "<br/><br/><a href='javascript:location.reload(true);'>Перезагрузите</a> страницу."
                + "<hr/><br/>Ошибка загрузки компонентов приложения: <br/><br/>"
                + arr_error.join("<br/>")
                ;
        }
    }

    var func_onload = function(obj) {
        //var obj = this;
        var err = null;
        if( obj.src ) {
            err = {"path": obj.src, "error": false};
        } else if( obj.href ) {
            err = {"path": obj.href, "error": false};
        }
        if( err!=null){
            console.warn( JSON.stringify(err));
            arr_loaded_resources.push( err );
        }
    };

    var func_onerror = function(obj) {
        //var obj = this;
        var err = null;
        if( obj.src ) {
            err = {"path": obj.src, "error": true};
        } else if( obj.href ) {
            err = {"path": obj.href, "error": true};
        }
        func_error_out(err);
    };

    // Проверка для IE, но для новых версий, кажется, не актуально. Пока не использую.
    var func_onreadystatechange = function() {
        var self = this;
        if (this.readyState == "complete" || this.readyState == "loaded") {
            setTimeout(function() {
                self.onload()
            }, 0); // сохранить "this" для onload
        }
    };

    // Общий обработчик ошибок для скриптов:
    //      https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
    window.onerror = function(messageOrEvent, source, lineno, colno, error){
        var err = null;
        // Такая ошибка иногда возникает в протоколе ssl, когда загружается только часть файла. Остальное обрезается и браузер генерирует синтаксическую ошибку.
        //if( error.stack=="SyntaxError: Unexpected end of input"){
            err = {messageOrEvent: messageOrEvent, source: source, lineno:lineno, colno:colno, _error:error, "error": true};
            console.warn("Ошибка в загрузке...")
        //}
        func_error_out(err);
    }
</script>

<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="/jquery-1.9.1.min.js" onload="func_onload(this)" onerror="func_onerror(this)"></script>
<!--
<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="js/err.js" onload="func_onload(this)" onerror="func_onerror(this)"></script>
<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="/jquery-1.9.1.err.min.js" onload="func_onload(this)" onerror="func_onerror(this)"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/MonthPicker.min.css"/>
<link type="text/css" rel="stylesheet" href="css/themes/smoothness/jquery-ui.css"/>
<link type="text/css" rel="stylesheet" href="css/app.css"/>
<script type="text/javascript" src="js/MonthPicker.min.js"></script>
-->

<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/jquery-ui-month-picker/src/MonthPicker.js"></script>
<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/blockUI/jquery.blockUI.js"></script>
<script type="text/javascript" onload="func_onload(this)" onerror="func_onerror(this)" src="bower_components/js-cookie/src/js.cookie.js"></script>

<link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/jquery-ui-month-picker/src/MonthPicker.css"/>
<link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css"/>
<link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"/>
<link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="bower_components/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" onload="func_onload(this)" onerror="func_onerror(this)" href="css/app.css"/>


Суть в следующем. В каждый компонент, который подгружается на страницу добавляем следующий код:
onload="func_onload(this)" onerror="func_onerror(this)"

Теперь все объекты прикрыты обработчиками ошибок при загрузке. В случае, если ресурс не загрузился, то пользователь увидит сообщение:

665d3d7230664057899a45fac7493bf2.png

На рисунке видно, что во время загрузки не произошла загрузка angular.js, поэтому пользователю предлагается перезагрузить страницу. Аналогичные сообщения наблюдаются при невозможности загрузки css или когда файл js содержит синтаксические ошибки:

Синтаксическая ошибка:

add74ff6b37f4d4a8015be22f09a73ca.png


Ошибка загрузки css:

6183a3476f9c4e6fa8993c879327b3c7.png


P.S.
Для справки. Аналогичные обработчики можно сделать и для загрузки изображений. см.: https://learn.javascript.ru/onload-onerror
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Посылаешь запрос и при ответе !==200 выводишь заглушку
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы