Vue는 페이지의 오류 메시지, window.onerror와 window.addEventListener ( 'error')의 차이점을 모니터링합니다.

머리말:

      페이지의 오류 메시지 모니터링

프로젝트에 사용 : 경로에이 버전 번호가 있는지 확인 ... 구체적인 내용은 실제 상황을 기반으로 할 수 있습니다.

const asyncVersion = '20210128'
window.addEventListener('error', handleListenerError, true);
    function handleListenerError (eventErr){
      if (eventErr.srcElement.localName.includes('link' || 'script') && !window.location.href.includes('version=' + asyncVersion)) {
        // alert('因版本更新，页面需重新载入，请核对当次操作数据');
        window.location.href= window.location.host + window.location.pathname + '?version=' + VUE_APP_Version
      }
      eventErr.preventDefault()
    }

더:

window.onerror

window.onerror는 전역 변수이며 기본값은 null입니다. js 런타임 오류가 발생하면 창은 오류 이벤트를 트리거하고 window.onerror ()를 실행합니다. onerror는 여러 매개 변수를 허용 할 수 있습니다.

window.onerror = function(message, source, lineno, colno, error) { ... }

函数参数：

*   message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
*   source：发生错误的脚本URL（字符串）
*   lineno：发生错误的行号（数字）
*   colno：发生错误的列号（数字）
*   error：Error对象

若该函数返回true，则阻止执行默认事件处理函数，如异常信息不会在console中打印。没有返回值或者返回值为false的时候，异常信息会在console中打印

addEventListener ( '오류')

js 런타임 오류 이벤트 수신은 window.onerror 전에 트리거되며 이는 onerror와 거의 비슷하지만 이벤트 콜백 함수에는 모든 오류 정보를 저장하는 매개 변수가 하나뿐입니다. 기본 이벤트 처리 기능의 실행을 막을 수는 없지만 전체적으로 캡처 할 수 있습니다. 리소스 로딩 비정상 오류

window.addEventListener('error', function(event) { ... })

当资源（如img或script）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。这些error事件不会向上冒泡到window，但可以在捕获阶段被捕获
因此如果要全局监听资源加载错误，需要在捕获阶段捕获事件
//图片加载失败使用默认图片，依旧加载失败超过三次使用base64图片
window.addEventListener('error',function(e){
    let target = e.target, // 当前dom节点
        tagName = target.tagName,
        count = Number(target.dataset.count ) || 0, // 以失败的次数，默认为0
        max= 3; // 总失败次数，此时设定为3
    // 当前异常是由图片加载异常引起的
    if( tagName.toUpperCase() === 'IMG' ){
        if(count >= max){
            target.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//AK3/ALYH+5hX6FV5N4Y/5GHwx/vyf+iJa9ZrysPhoYVShDZu/potDmwWFhhIzhT2bv6aLQ//Z';
        }else{
            target.dataset.count = count + 1;
            target.src = '//xxx/default.jpg';
        }
    }
},true)