Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time

鍓嶇鐩戞帶鐭ヨ瘑鐐

鎯充簡瑙g瑪鑰呮暣鐞嗙殑鑵捐寮婧愬墠绔洃鎺ф柟妗bad.js婧愮爜瑙f瀽鍙互鐐瑰嚮鏌ラ槄銆

鎴戜滑鐨勭洰鏍囨槸浠涔堬紵

灏嗙敤鎴峰湪浣跨敤缃戦〉鏈嶅姟鏃朵骇鐢熺殑褰卞搷鐢ㄦ埛浣撻獙鐨勫紓甯搁氳繃缃戠粶璇锋眰浼犲洖鏈嶅姟鍣紝骞惰繘琛屽彲瑙嗗寲鐨勫睍鐜帮紝鏁翠釜杩囩▼瑕佹眰鎴戜滑鍥炰紶鐨勯敊璇俊鎭寘鍚敊璇被鍨嬨佽皟鐢ㄥ爢鏍堢瓑閿欒淇℃伅浠ヤ究寮鍙戜汉鍛樺畾浣嶉敊璇

闇涓婃姤鐨勯敊璇被鍨嬫湁鍑犵锛

  1. 闈欐佽祫婧愬姞杞藉け璐
  2. AJAX璇锋眰澶辫触
  3. JavaScript寮傚父
    • 杩愯鏃舵姤閿
      • 鍚屾閿欒
      • 寮傛閿欒
    • 璇硶閿欒
  4. promise寮傚父

鎹曡幏閿欒鏈夊嚑绉嶆柟寮忥紵

杩欓噷鎴戞荤粨浜嗗嚑绉嶏紝鍒嗗埆鏄細

  • onerror鍏ㄥ眬鐩戝惉
  • addEventListener鍏ㄥ眬鐩戝惉
  • try...catch涓诲姩鎹曡幏
  • promise...catch涓诲姩鎹曡幏
  • 閲嶅啓XMLHttpRequest瀵硅薄鏂规硶
  • MVVM妗嗘灦渚嬪VUE鍜孯eact涓殑瀹樻柟閿欒澶勭悊鏂规硶

涓嬮潰鍒嗗埆浠嬬粛锛

try catch

浣跨敤鏂规硶澶у搴旇閮界煡閬擄紝浣跨敤try...catch鍙互涓诲姩鐨勫鐞嗗紓甯革紝鍏绘垚鍦ㄥ叧閿搷浣滃鍐檛ry鈥atch鐨勪範鎯彲浠ラ潪甯稿ソ鐨勫府鍔╁悗缁垽鏂嚎涓婇亣鍒扮殑鍚勭寮傚父銆

杩欓噷闇瑕佹寚鍑簍ry catch闇瑕佹敞鎰忕殑鍑犵偣锛

  1. try-catch 鍙兘鎹曡幏鍒板悓姝ョ殑杩愯鏃堕敊璇紝鍏朵粬绫诲瀷鏃犳硶鎹曡幏

    瑙e喅鏂规锛 onerror閮藉彲浠ユ崟鑾峰埌杩愯鏃剁殑鍚屾/寮傛閿欒

onerror

褰揓avaScript杩愯鏃堕敊璇紙鍖呮嫭璇硶閿欒锛夊彂鐢熸椂锛寃indow浼氳Е鍙戜竴涓狤rrorEvent鎺ュ彛鐨別rror浜嬩欢锛屽苟鎵цwindow.onerror()銆

window.error鍙互鐢ㄤ簬鍏ㄥ眬鎹曡幏JavaScript浜х敓鐨勯敊璇紝浣跨敤鏂瑰紡濡備笅锛

window.onerror = function(message, source, lineno, colno, error) { 
   // message锛氶敊璇俊鎭紙瀛楃涓诧級銆
   // source锛氬彂鐢熼敊璇殑鑴氭湰URL锛堝瓧绗︿覆锛
   // lineno锛氬彂鐢熼敊璇殑琛屽彿锛堟暟瀛楋級
   // colno锛氬彂鐢熼敊璇殑鍒楀彿锛堟暟瀛楋級
   // error锛欵rror瀵硅薄锛堝璞★級
}

浣嗘槸浣跨敤鏃堕渶瑕佹敞鎰忓嚑鐐癸細

  1. Script Error

    鍦ㄥ崟椤甸潰搴旂敤涓紝褰撴垜浠娇鐢╯cript鏍囩寮曞叆浜咼S鏂囦欢锛屽綋璇S鏂囦欢鐨勬潵婧愬煙鍚嶅拰缃戦〉鐨勫煙鍚嶄笉鍚屾椂锛岃繖鏃跺鏋滆JS鏂囦欢鍐呴儴鎶ラ敊锛屽垯鎴戜滑鍙兘鎹曡幏鍒癝cript Error锛岃屼笉鏄缁嗙殑閿欒淇℃伅锛岃繖鏄敱浜庢祻瑙堝櫒鐨勮法鍩熼檺鍒躲

    瑙e喅鏂规锛

    • 闇瑕佸湪璺ㄥ煙鐨剆cript鏍囩涓姞鍏crossorigin灞炴э紝渚嬪<script type="text/javascript" src="example.js" crossorigin></script>
    • 闇瑕佺粰璺ㄥ煙璧勬簮鐨勬湇鍔″櫒鐨剅esponse header璁剧疆鍏佽璺ㄥ煙锛Access-Control-Allow-Origin:*
  2. 涓嶈兘鍏ㄥ眬鎹曡幏鍒拌祫婧愶紙濡傚浘鐗囨垨鑴氭湰锛夌殑鍔犺浇澶辫触

    瑙e喅鏂规锛 浣跨敤window.addEventListener鎹曡幏銆

  3. onerror鏃犳硶鎹曡幏璇硶閿欒

  4. onerror鏈濂藉啓鍦ㄦ墍鏈 JS 鑴氭湰鐨勫墠闈紝鍚﹀垯鏈夊彲鑳芥崟鑾蜂笉鍒伴敊璇

addEventListener

褰撲竴椤硅祫婧愶紙濡傚浘鐗囨垨鑴氭湰锛夊姞杞藉け璐ワ紝鍔犺浇璧勬簮鐨勫厓绱犱細瑙﹀彂涓涓狤vent鎺ュ彛鐨別rror浜嬩欢锛屽苟鎵ц璇ュ厓绱犱笂鐨刼nerror()澶勭悊鍑芥暟銆傝繖浜沞rror浜嬩欢涓嶄細鍚戜笂鍐掓场鍒皐indow锛屼笉杩囷紙鑷冲皯鍦‵irefox涓級鑳借鍗曚竴鐨剋indow.addEventListener鎹曡幏銆

浣跨敤鏂瑰紡濡備笅锛

window.addEventListener('error', (error) => {
  console.log(error);
}, true)

window.addEventListener鍦ㄨ繍琛屾椂閿欒鍜岃祫婧愬姞杞介敊璇椂杩斿洖鐨勯敊璇璞′笉鍚岋紝鍙互鍙傝冧笅闈袱鍥撅細

杩愯鏃堕敊璇細

璧勬簮鍔犺浇閿欒锛

浣跨敤鏃堕渶瑕佹敞鎰忕殑鐐癸細

  1. 涓嶅悓娴忚鍣ㄤ笅杩斿洖鐨別rror瀵硅薄鍙兘涓嶅悓锛岄渶瑕佹敞鎰忓吋瀹瑰鐞嗐
  2. 闇瑕佹敞鎰忛伩鍏峚ddEventListener閲嶅鐩戝惉銆

promise catch

鍦╬romise涓娇鐢╟atch鍙互闈炲父鏂逛究鐨勬崟鑾峰埌寮傛error锛屼娇鐢ㄦ柟娉曞ぇ瀹朵篃搴旇閮戒簡瑙d簡銆

杩欓噷璇翠竴涓嬮渶瑕佹敞鎰忕殑鐐:

娌℃湁鍐檆atch鐨凱romise涓姏鍑虹殑閿欒鏃犳硶琚玱nerror 鎴 try-catch鎹曡幏鍒帮紝鎵浠ユ垜浠姟蹇呰鍦≒romise涓笉瑕佸繕璁板啓catch澶勭悊鎶涘嚭鐨勫紓甯搞

瑙e喅鏂规锛 涓轰簡闃叉鏈夋紡鎺夌殑Promise寮傚父锛屽缓璁湪鍏ㄥ眬澧炲姞涓涓unhandledrejection鐨勭洃鍚紝鐢ㄦ潵鍏ㄥ眬鐩戝惉Uncaught Promise Error銆備娇鐢ㄦ柟寮忥細

window.addEventListener("unhandledrejection", function(e){ 
	console.log(e);
});

閲嶅啓XMLHttpRequest瀵硅薄鐨勬柟娉

璇ユ柟娉曚富瑕侀拡瀵笰JAX璇锋眰寮傚父,闄勪笂鍙傝冧唬鐮侊細

function () {
        var _self = this;

        // 閲嶅啓 open
        XMLHttpRequest.prototype.open = function(){
            // 鍏堝湪姝ゅ鍙栧緱璇锋眰鐨剈rl銆乵ethod
            _self.reqUrl = arguments[1];
            _self.reqMethod = arguments[0];
            // 鍦ㄨ皟鐢ㄥ師鐢 open 瀹炵幇閲嶅啓
            _self.xhrOpen.apply(this, arguments);
        }

        // 閲嶅啓 send
        XMLHttpRequest.prototype.send = function () {
            // 璁板綍xhr
            var xhrmsg = {
                'url': _self.reqUrl,
                'type': _self.reqMethod,
                // 姝ゅ鍙互鍙栧緱 ajax 鐨勮姹傚弬鏁
                'data': arguments[0] || {}
            }

            this.addEventListener('readystatechange', function () {
                if (this.readyState === 4) {
                    // 姝ゅ鍙互鍙栧緱涓浜涘搷搴斾俊鎭
                    // 鍝嶅簲淇℃伅
                    xhrmsg['res'] = this.response;
                    xhrmsg['status'] = this.status;
                    this.status >= 200 && this.status < 400 ?
                        xhrmsg['level'] = 'success' : xhrmsg['level'] = 'error';
                    xhrArray.push(xhrmsg);
                }
            });

            _self.xhrSend.apply(this, arguments);
        }
    }

MVVM妗嗘灦鎻愪緵鐨勯敊璇鐞嗛挬瀛

VUE鍜孯eact閮藉垎鍒彁渚涗簡瀵瑰簲鐨勯敊璇鐞嗛挬瀛愶紝鐢变簬绗旇呬娇鐢╒UE澶氫竴浜涳紝杩欓噷浠嬬粛涓涓媀UE鐨勯敊璇鐞嗭細

VUE瀹樻柟鏂囨。浠嬬粛锛

鎸囧畾缁勪欢鐨勬覆鏌撳拰瑙傚療鏈熼棿鏈崟鑾烽敊璇殑澶勭悊鍑芥暟銆傝繖涓鐞嗗嚱鏁拌璋冪敤鏃讹紝鍙幏鍙栭敊璇俊鎭拰 Vue 瀹炰緥銆

浠 2.2.0 璧凤紝杩欎釜閽╁瓙涔熶細鎹曡幏缁勪欢鐢熷懡鍛ㄦ湡閽╁瓙閲岀殑閿欒銆傚悓鏍风殑锛屽綋杩欎釜閽╁瓙鏄 undefined 鏃讹紝琚崟鑾风殑閿欒浼氶氳繃 console.error 杈撳嚭鑰岄伩鍏嶅簲鐢ㄥ穿婧冦

浠 2.4.0 璧疯繖涓挬瀛愪篃浼氭崟鑾 Vue 鑷畾涔変簨浠跺鐞嗗嚱鏁板唴閮ㄧ殑閿欒浜嗐

涓嬮潰鎴戜滑鐪嬩竴涓嬪疄闄呮儏鍐碉細

<template>
	<div @click="clickerror">error</div>
</template>

export default {
  mounted() {
    this.mounterror();
  },
  methods: {
    mounterror() {
    	throw new Error("鎶涘嚭mount閿欒");
    },
    clickerror() {
		throw new Error("鎶涘嚭click閿欒");
    }
  }
};
Vue.config.errorHandler = (err, vm, info) => {
  console.error('閫氳繃vue errorHandler鎹曡幏鐨勯敊璇');
  console.error(err);
  console.error(vm);
  console.error(info);
}

鍙互鐪嬪埌鐢熷懡鍛ㄦ湡閽╁瓙閲岀殑閿欒鏄彲浠ヨerrorHandler鎹曡幏鍒帮紝浣嗘槸褰撴垜浠富鍔ㄧ偣鍑籨iv瑙﹀彂clickerror鏃讹紝浼氬彂鐜拌繖鏃堕敊璇苟娌℃湁琚玡rrorHandler鎹曡幏鍒帮紝鎺у埗鍙拌緭鍑虹殑鏄疷ncaught Error锛屼篃灏辨槸娌℃湁琚崟鑾峰埌鐨勯敊璇紝鎵浠ラ渶瑕佹敞鎰忕殑鏄紝errorHandler鏂规硶鐩墠杩樻崟鑾蜂笉鍒扮粦瀹氱洃鍚簨浠惰Е鍙戠殑寮傚父锛屼絾鏄彲浠ユ崟鑾峰埌鍦ㄧ敓鍛藉懆鏈熼挬瀛愪腑璋冪敤鐨勬柟娉曠殑閿欒銆

瑙e喅鏂规 锛氫娇鐢╳indow.onerror

window.onerror = function (message, source, lineno, colno, error) {
  console.error('閫氳繃onerror鎹曡幏鍒扮殑閿欒');
  console.error(message);
  console.error(source);
  console.error(lineno);
  console.error(colno);
  console.error(error);
}

鍦∕VVM妗嗘灦涓娇鐢╫nerror鐩戝惉鍏ㄥ眬寮傚父浼氬彂鐜板苟涓嶈兘鎹曡幏鍒扮粦瀹氫簨浠剁殑璇︾粏閿欒淇℃伅锛屽彧浼氳緭鍑篠cript Error锛

杩欐椂鎴戜滑鍙互灏濊瘯杩涘叆webpack閰嶇疆锛岃缃devtool:"source-map",杩欐椂鍦ㄦ帶鍒跺彴鍐嶆鎵撳嵃鍙互鐪嬭鎴愬姛鎹曡幏鍒扮粦瀹氫簨浠剁殑閿欒銆

閿欒涓婃姤

涓ょ涓绘祦涓婃姤鏂瑰紡锛

  1. 閫氳繃Ajax鍙戦佹暟鎹

    鍥犱负Ajax璇锋眰鏈韩涔熸湁鍙兘浼氬彂鐢熷紓甯革紝鑰屼笖鏈夊彲鑳戒細寮曞彂璺ㄥ煙闂锛屼竴鑸儏鍐典笅鏇存帹鑽愪娇鐢ㄥ姩鎬佸垱寤篿mg鏍囩鐨勫舰寮忚繘琛屼笂鎶ャ

  2. 鍔ㄦ佸垱寤 img 鏍囩鐨勫舰寮

new Image().src = reportUrl + '?msg=' + msg;