Phát hiện lỗi tải tệp js/css

Question

Trong ứng dụng web SAAS của chúng tôi, chúng tôi sử dụng toàn bộ các tệp js và css (khoảng 80 trong tổng số) và một số tệp, đặc biệt là các tệp khác phụ thuộc vào jQuery trước khi ứng dụng của chúng tôi có thể chạy đúng cách.

Trong môi trường mạng lý tưởng, điều này không có vấn đề gì vì tất cả các tài nguyên sẽ được tải mỗi lần. Nhưng trong một môi trường sản xuất, chúng tôi nhận thấy không hiếm khi một số tệp js/css không được tải đúng khi mạng kém. Khi điều này xảy ra, trình duyệt sẽ ghi lại các lỗi hết thời gian chờ tải js/css trong bảng điều khiển và ứng dụng sẽ xuất hiện đang chạy. Sau đó, khi ứng dụng cố gắng gọi một số chức năng được xác định trong các tệp js không tải được, một số ngoại lệ không xác định được ném và đăng nhập trong bảng điều khiển và ứng dụng sẽ ngừng chạy gây nhầm lẫn cho người dùng phần lớn thời gian. Lưu ý rằng tôi không nói về lỗi tải 404 là lỗi lập trình/triển khai, chỉ lỗi thời gian chờ do kết nối mạng kém gây ra.

Chúng tôi không nghĩ rằng trải nghiệm như vậy là tối ưu. Chúng tôi muốn kiểm tra xem tất cả các tài nguyên được tải trước khi ứng dụng chạy. Nếu có bất kỳ vấn đề nào, chúng tôi cảnh báo người dùng để anh ấy có thể chọn tải lại ứng dụng, điều này có thể làm giảm nhiều nhầm lẫn, theo ý kiến ​​của chúng tôi.

Một số có thể gợi ý để concat các tập tin và nhận được số xuống đến một cặp vợ chồng, và có mà có thể làm giảm khả năng có lỗi thời gian chờ. Nhưng điều này vẫn không giải quyết được vấn đề - chúng tôi vẫn có thể có lỗi hết thời gian chờ tải một vài tệp.

Sau một số nghiên cứu về SO, tôi đã tìm thấy các đề xuất sau:
1 sử dụng window.error để bắt ngoại lệ chưa được nắm bắt, bao gồm ngoại lệ không xác định;
2 đặt một số biến/trạng thái đặc biệt trong mọi tệp js/css và phát hiện nếu biến/trạng thái đó tồn tại;
3 sử dụng bộ xử lý sự kiện tải lên để đăng ký sự kiện tải đã hoàn tất thành công, sau đó gọi setTimeout để xem có sự kiện nào chưa được đăng ký hay không;

AFAICS, có một số nhược điểm:
1 là kỹ thuật phát hiện lười, nghĩa là chúng tôi không biết tập lệnh không được tải đúng cách cho đến khi ngoại lệ được ném;
2 lộn xộn, cần phải sửa đổi plugin của bên thứ ba trong một số trường hợp;
3 người ta nói rằng IE có một số vấn đề kích hoạt sự kiện onload trong một số tình huống;

Vậy cơ chế trình duyệt chéo tốt nhất để phát hiện lỗi tải tệp js/css như thế nào?

Answer 1

Bạn có thể tải tập lệnh của mình bằng javascript. Ví dụ:

var scriptsarray=new Array(
"script1.js", 
"script2.js", 
"style1.css", 
"style2.css" 
) 

var totalloads=0; 

for (var i=0;i<scriptsarray.length;i++){ 
var script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        script.src = scriptsarray[i] + '?rnd=' + Math.random(); 
        document.body.appendChild(script); 
    script.addEventListener('load', wholoads, false); 
    script.addEventListener('error', errload,false); 
} 

function wholoads(scriptname){ 
totalloads++; 
if (totalloads==scriptsarray.length){alert('All scripts and css load');} 
} 

function errload(event){ 

    console.log(event); 
} 

Answer 2

window.addEventListener("error", function (e, url) { 
    var eleArray = ["IMG", "SCRIPT", "LINK"]; 
    var resourceMap = { 
     "IMG": "Picture file", 
     "SCRIPT": "JavaScript file", 
     "LINK": "CSS file" 
    }; 
    var ele = e.target; 
    if(eleArray.indexOf(ele.tagName) != -1){ 
     var url = ele.tagName == "LINK" ? ele.href: ele.src; 
     console.log("src：" + url + " File" + resourceMap[ele.tagName] + "failed loading. "); 

     return true;// dont show in console 
    } 
}, true);