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

    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
    Ответ написан
    Комментировать
  • Есть ли расширение или программа для редактирования http-заголовков браузера?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Обычно для этого используется fiddler. Там вариантов несколько:
    1. ставить точки останова на запросах и редактировать ответ перед тем как отдать клиенту.
    2. вручную написать запрос с заголовками, которые вам нужны.
    3. подменить ответ сервера на другой файл
    4. Подключить тяжёлую артиллерию - JavaScript и программно менять запросы/ответы.

    Есть из чего выбрать.
    Ответ написан
  • Как правильно работать с прокси?

    AlexXYZ
    @AlexXYZ
    O Keep Clear O
    Не пробовали apache jmeter? Из разряда нагрузочного тестирования.
    Ответ написан
    5 комментариев