หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ด JAVA
ดาวน์โหลด

คู่มือข้อผิดพลาด JavaScript

README นี้มีข้อมูลที่ฉันได้เรียนรู้มานานหลายปีเกี่ยวกับการจัดการกับข้อผิดพลาดของ JavaScript การรายงานข้อผิดพลาดไปยังเซิร์ฟเวอร์ และการนำทางผ่านข้อบกพร่องมากมายที่อาจทำให้ทั้งหมดนี้ยากจริงๆ เบราว์เซอร์ได้รับการปรับปรุงในส่วนนี้ แต่ยังเหลือพื้นที่เหลือให้ปรับปรุงเพื่อให้แน่ใจว่าแอปพลิเคชันทั้งหมดสามารถจัดการกับข้อผิดพลาดที่เกิดขึ้นได้อย่างมีสติและเหมาะสม

กรณีทดสอบสำหรับเนื้อหาที่พบในคู่มือนี้มีอยู่ที่ https://mknichel.github.io/javascript-errors/

สารบัญ

  • การแนะนำ

  • กายวิภาคของข้อผิดพลาด JavaScript

    • การสร้างข้อผิดพลาด JavaScript

    • ข้อความแสดงข้อผิดพลาด

    • รูปแบบการติดตามสแต็ก

  • การจับข้อผิดพลาด JavaScript

    • หน้าต่าง onerror

    • ลอง/จับ

    • จุดเข้าที่ได้รับการคุ้มครอง

    • สัญญา

    • คนทำงานเว็บ

    • ส่วนขยายของ Chrome

การแนะนำ

การตรวจจับ การรายงาน และการแก้ไขข้อผิดพลาดเป็นส่วนสำคัญของแอปพลิเคชันใดๆ เพื่อให้มั่นใจในความสมบูรณ์และความเสถียรของแอปพลิเคชัน เนื่องจากโค้ด JavaScript ยังถูกดำเนินการบนไคลเอนต์และในสภาพแวดล้อมเบราว์เซอร์ที่แตกต่างกัน การควบคุมข้อผิดพลาด JS จากแอปพลิเคชันของคุณก็อาจเป็นเรื่องยากเช่นกัน ไม่มีข้อกำหนดเว็บอย่างเป็นทางการสำหรับวิธีรายงานข้อผิดพลาด JS ซึ่งทำให้เกิดความแตกต่างในการใช้งานเบราว์เซอร์แต่ละตัว นอกจากนี้ ยังมีข้อบกพร่องมากมายในการใช้งานข้อผิดพลาด JavaScript ของเบราว์เซอร์ ซึ่งทำให้การดำเนินการนี้ยากยิ่งขึ้น หน้านี้อธิบายแง่มุมต่างๆ ของข้อผิดพลาด JS เพื่อให้นักพัฒนาในอนาคตสามารถจัดการกับข้อผิดพลาดได้ดีขึ้น และหวังว่าเบราว์เซอร์จะมาบรรจบกันในโซลูชันมาตรฐาน

กายวิภาคของข้อผิดพลาด JavaScript

ข้อผิดพลาด JavaScript ประกอบด้วยสองส่วนหลัก: ข้อความแสดงข้อผิดพลาด และ การติดตามสแต็ก ข้อความแสดงข้อผิดพลาดคือสตริงที่อธิบายสิ่งที่ผิดพลาด และการติดตามสแต็กจะอธิบายว่าข้อผิดพลาดเกิดขึ้นที่ใดในโค้ด ข้อผิดพลาด JS สามารถสร้างขึ้นโดยเบราว์เซอร์เองหรือส่งโดยรหัสแอปพลิเคชัน

การสร้างข้อผิดพลาด JavaScript

เบราว์เซอร์สามารถส่งข้อผิดพลาด JS ได้เมื่อโค้ดบางส่วนทำงานไม่ถูกต้อง หรือสามารถส่งด้วยโค้ดโดยตรงก็ได้

ตัวอย่างเช่น:

 var a = 3;a();

ในตัวอย่างนี้ ตัวแปรที่เป็นตัวเลขจริงๆ ไม่สามารถเรียกใช้เป็นฟังก์ชันได้ เบราว์เซอร์จะแสดงข้อผิดพลาด เช่น TypeError: a is not a function ที่มีการติดตามสแต็กที่ชี้ไปที่บรรทัดของโค้ดนั้น

นักพัฒนาอาจต้องการส่งข้อผิดพลาดในโค้ดบางส่วนหากไม่ตรงตามเงื่อนไขเบื้องต้นบางประการ ตัวอย่างเช่น

 ถ้า (!checkPrecondition()) {
  โยนข้อผิดพลาดใหม่ ("ไม่ตรงตามเงื่อนไขเบื้องต้น!");}

ในกรณีนี้ ข้อผิดพลาดจะเป็น Error: Doesn't meet precondition! - ข้อผิดพลาดนี้จะมีการติดตามสแต็กที่ชี้ไปยังบรรทัดที่เหมาะสมด้วย ข้อผิดพลาดที่เกิดจากเบราว์เซอร์และรหัสแอปพลิเคชันสามารถจัดการได้เหมือนกัน

มีหลายวิธีที่นักพัฒนาสามารถส่งข้อผิดพลาดใน JavaScript:

  • throw new Error('Problem description.')

  • throw Error('Problem description.') <-- เทียบเท่ากับอันแรก

  • throw 'Problem description.' <-- แย่

  • throw null <-- แย่ยิ่งกว่านั้นอีก

ไม่แนะนำให้โยนสตริงหรือค่าว่าง เนื่องจากเบราว์เซอร์จะไม่แนบการติดตามสแต็กกับข้อผิดพลาดนั้น โดยสูญเสียบริบทของตำแหน่งที่เกิดข้อผิดพลาดในโค้ด วิธีที่ดีที่สุดคือโยนอ็อบเจ็กต์ Error จริง ซึ่งจะมีข้อความแสดงข้อผิดพลาดตลอดจนการติดตามสแต็กที่ชี้ไปยังบรรทัดโค้ดด้านขวาที่เกิดข้อผิดพลาด

ข้อความแสดงข้อผิดพลาด

แต่ละเบราว์เซอร์มีชุดข้อความของตัวเองที่ใช้สำหรับข้อยกเว้นในตัว เช่น ตัวอย่างข้างต้นสำหรับการพยายามเรียกใช้ฟังก์ชันที่ไม่ใช่ เบราว์เซอร์จะพยายามใช้ข้อความเดียวกัน แต่เนื่องจากไม่มีข้อมูลจำเพาะ จึงไม่รับประกัน ตัวอย่างเช่น การใช้ทั้ง Chrome และ Firefox {0} is not a function สำหรับตัวอย่างข้างต้น ในขณะที่ IE11 จะรายงาน Function expected (โดยเฉพาะอย่างยิ่งโดยไม่รายงานว่าพยายามเรียกตัวแปรใด)

อย่างไรก็ตาม เบราว์เซอร์มักจะมีความแตกต่างกันบ่อยครั้งเช่นกัน เมื่อมีคำสั่งเริ่มต้นหลายรายการในคำสั่ง switch Chrome จะส่ง "More than one default clause in switch statement" ในขณะที่ Firefox จะรายงาน "more than one switch default" เมื่อมีการเพิ่มคุณสมบัติใหม่ลงในเว็บ ข้อความแสดงข้อผิดพลาดเหล่านี้จะต้องได้รับการอัปเดต ความแตกต่างเหล่านี้อาจเกิดขึ้นได้ในภายหลังเมื่อคุณพยายามจัดการกับข้อผิดพลาดที่รายงานจากโค้ดที่สร้างความสับสน

คุณสามารถค้นหาเทมเพลตที่เบราว์เซอร์ใช้สำหรับข้อความแสดงข้อผิดพลาดได้ที่:

  • ไฟร์ฟอกซ์ - http://mxr.mozilla.org/mozilla1.9.1/source/js/src/js.msg

  • Chrome - https://code.google.com/p/v8/source/browse/branches/bleeding_edge/src/messages.js

  • อินเทอร์เน็ต Explorer - https://github.com/Microsoft/ChakraCore/blob/4e4d4f00f11b2ded23d1885e85fc26fcc96555da/lib/Parser/rterrors.h

เบราว์เซอร์จะสร้างข้อความแสดงข้อผิดพลาดที่แตกต่างกันสำหรับข้อยกเว้นบางประการ

รูปแบบการติดตามสแต็ก

การติดตามสแต็กคือคำอธิบายว่าข้อผิดพลาดเกิดขึ้นที่ใดในโค้ด ประกอบด้วยชุดของเฟรม โดยแต่ละเฟรมจะอธิบายบรรทัดเฉพาะในโค้ด เฟรมบนสุดคือตำแหน่งที่เกิดข้อผิดพลาด ในขณะที่เฟรมต่อมาคือสแต็กการเรียกใช้ฟังก์ชัน หรือวิธีดำเนินการโค้ดเพื่อไปยังจุดที่เกิดข้อผิดพลาด เนื่องจากจาวาสคริปต์มักจะถูกแบ่งส่วนและย่อเล็กสุด จึงเป็นสิ่งสำคัญที่จะต้องมีหมายเลขคอลัมน์ เพื่อให้สามารถระบุตำแหน่งคำสั่งที่ตรงกันได้เมื่อบรรทัดที่กำหนดมีคำสั่งจำนวนมาก

การติดตามสแต็กพื้นฐานใน Chrome มีลักษณะดังนี้: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

แต่ละเฟรมสแต็กประกอบด้วยชื่อฟังก์ชัน (หากมีและโค้ดไม่ได้ถูกดำเนินการในขอบเขตส่วนกลาง) สคริปต์ที่มาจาก และหมายเลขบรรทัดและคอลัมน์ของโค้ด

ขออภัย ไม่มีมาตรฐานสำหรับรูปแบบการติดตามสแต็ก ดังนั้นรูปแบบจึงแตกต่างกันไปตามเบราว์เซอร์

การติดตามสแต็กของ Microsoft Edge และ IE 11 มีลักษณะคล้ายกับของ Chrome ยกเว้นว่าจะแสดงรหัสสากลอย่างชัดเจน: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:3)
  at Global code (http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3)

การติดตามสแต็กของ Firefox ดูเหมือนว่า: 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9
  @http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

รูปแบบของ Safari คล้ายกับรูปแบบของ Firefox แต่ก็แตกต่างออกไปเล็กน้อย: 

  throwError@http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:18
  global code@http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:13

มีข้อมูลพื้นฐานเหมือนกัน แต่รูปแบบจะแตกต่างกัน

โปรดทราบว่าในตัวอย่าง Safari นอกเหนือจากรูปแบบที่แตกต่างจาก Chrome แล้ว หมายเลขคอลัมน์ยังแตกต่างจากทั้ง Chrome และ Firefox หมายเลขคอลัมน์ยังสามารถเบี่ยงเบนได้มากขึ้นในสถานการณ์ข้อผิดพลาดต่างๆ - ตัวอย่างเช่นในโค้ด (function namedFunction() { throwError(); })(); Chrome จะรายงานคอลัมน์สำหรับการเรียกใช้ฟังก์ชัน throwError() ในขณะที่ IE11 รายงานหมายเลขคอลัมน์เป็นจุดเริ่มต้นของสตริง ความแตกต่างเหล่านี้จะกลับมามีบทบาทอีกครั้งในภายหลัง เมื่อเซิร์ฟเวอร์จำเป็นต้องแยกวิเคราะห์การติดตามสแต็กเพื่อหาข้อผิดพลาดที่รายงาน และถอดรหัสซอร์สโค้ดที่สร้างความสับสนให้กับสแต็กเทรซที่สร้างความสับสน

ดู https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติสแต็กของข้อผิดพลาด เมื่อเข้าถึงคุณสมบัติ Error.stack Chrome จะรวมข้อความแสดงข้อผิดพลาดเป็นส่วนหนึ่งของสแต็ก แต่ Safari 10+ ไม่มี

รูปแบบของการติดตามสแต็กจะแตกต่างกันไปตามเบราว์เซอร์ทั้งในรูปแบบและหมายเลขคอลัมน์ที่ใช้

หากเจาะลึกลงไปอีก มีความแตกต่างมากมายในการซ้อนรูปแบบการติดตามซึ่งจะกล่าวถึงในส่วนด้านล่าง

การตั้งชื่อฟังก์ชันที่ไม่ระบุชื่อ

ตามค่าเริ่มต้น ฟังก์ชันที่ไม่ระบุชื่อจะไม่มีชื่อและปรากฏเป็นสตริงว่างหรือ "ฟังก์ชันที่ไม่ระบุชื่อ" ในชื่อฟังก์ชันในการติดตามสแต็ก (ขึ้นอยู่กับเบราว์เซอร์) เพื่อปรับปรุงการดีบัก คุณควรเพิ่มชื่อให้กับฟังก์ชันทั้งหมดเพื่อให้แน่ใจว่าจะปรากฏในเฟรมสแต็ก วิธีที่ง่ายที่สุดในการทำเช่นนี้คือตรวจสอบให้แน่ใจว่ามีการระบุฟังก์ชันที่ไม่ระบุชื่อด้วยชื่อ แม้ว่าชื่อนั้นจะไม่ได้ใช้ที่อื่นก็ตาม ตัวอย่างเช่น:

 setTimeout(ชื่อฟังก์ชันOfTheAnonymousFunction() { ... }, 0);

สิ่งนี้จะทำให้การติดตามสแต็กเปลี่ยนจาก: 

at http://mknichel.github.io/javascript-errors/javascript-errors.js:125:17

ถึง 

at nameOfTheAnonymousFunction (http://mknichel.github.io/javascript-errors/javascript-errors.js:121:31)

ใน Safari สิ่งนี้จะไปจาก: 

https://mknichel.github.io/javascript-errors/javascript-errors.js:175:27

ถึง 

nameOfTheAnonymousFunction@https://mknichel.github.io/javascript-errors/javascript-errors.js:171:41

วิธีการนี้ช่วยให้แน่ใจว่า nameOfTheAnonymousFunction ปรากฏในเฟรมของโค้ดใดๆ จากภายในฟังก์ชันนั้น ทำให้การดีบักง่ายขึ้นมาก ดูhttp://www.html5rocks.com/en/tutorials/developertools/async-call-stack/#toc-debugging-tipsสำหรับข้อมูลเพิ่มเติม

การกำหนดฟังก์ชันให้กับตัวแปร

เบราว์เซอร์จะใช้ชื่อของตัวแปรหรือคุณสมบัติที่กำหนดฟังก์ชันให้ หากฟังก์ชันนั้นไม่มีชื่อ ตัวอย่างเช่นใน

 var fnVariableName = function() { ... };

เบราว์เซอร์จะใช้ fnVariableName เป็นชื่อของฟังก์ชันในการติดตามสแต็ก 

    at throwError (http://mknichel.github.io/javascript-errors/javascript-errors.js:27:9)
    at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

ยิ่งไปกว่านั้น หากตัวแปรนี้ถูกกำหนดไว้ภายในฟังก์ชันอื่น เบราว์เซอร์ทั้งหมดจะใช้เพียงชื่อของตัวแปรเป็นชื่อของฟังก์ชันในการติดตามสแต็ก ยกเว้น Firefox ซึ่งจะใช้รูปแบบอื่นที่เชื่อมชื่อของ ฟังก์ชันภายนอกที่มีชื่อของตัวแปรภายใน ตัวอย่าง:

 ฟังก์ชั่น ThrowErrorFromInnerFunctionAssignedToVariable() {
  var fnVariableName = function() { โยนข้อผิดพลาดใหม่ ("foo"); -
  fnVariableName();}

จะผลิตใน Firefox: 

throwErrorFromInnerFunctionAssignedToVariable/fnVariableName@http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37

ในเบราว์เซอร์อื่น สิ่งนี้จะมีลักษณะดังนี้: 

at fnVariableName (http://mknichel.github.io/javascript-errors/javascript-errors.js:169:37)

Firefox ใช้ข้อความเฟรมสแต็กที่แตกต่างกันสำหรับฟังก์ชันที่กำหนดไว้ภายในฟังก์ชันอื่น

คุณสมบัติชื่อที่แสดง

ชื่อที่แสดงของฟังก์ชันสามารถตั้งค่าได้ด้วยคุณสมบัติ displayName ในเบราว์เซอร์หลักๆ ทั้งหมด ยกเว้น IE11 ในเบราว์เซอร์เหล่านี้ displayName จะปรากฏในดีบักเกอร์ devtools แต่ในเบราว์เซอร์ทั้งหมดยกเว้น Safari จะ ไม่ ใช้ในการติดตามสแต็กข้อผิดพลาด (Safari แตกต่างจากที่เหลือโดยใช้ชื่อจอแสดงผลในการติดตามสแต็กที่เกี่ยวข้องกับข้อผิดพลาด)

 var someFunction = function() {};someFunction.displayName = " # คำอธิบายฟังก์ชันที่ยาวขึ้น";

ไม่มีข้อกำหนดอย่างเป็นทางการสำหรับคุณสมบัติ displayName แต่เบราว์เซอร์หลักๆ ทั้งหมดรองรับ ดู https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName และ http://www.alertdebugging.com/2009/04/29/building-a-better -javascript-profiler-with-webkit/ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ displayName

IE11 ไม่รองรับคุณสมบัติ displayName

Safari ใช้คุณสมบัติ displayName เป็นชื่อสัญลักษณ์ในการติดตามสแต็กข้อผิดพลาด

การจับสแต็กเทรซโดยทางโปรแกรม

หากมีการรายงานข้อผิดพลาดโดยไม่มีการติดตามสแต็ก (ดูรายละเอียดเพิ่มเติมเมื่อสิ่งนี้จะเกิดขึ้นด้านล่าง) ก็เป็นไปได้ที่จะบันทึกการติดตามสแต็กโดยทางโปรแกรม

ใน Chrome สิ่งนี้ทำได้ง่ายมากโดยใช้ Error.captureStackTrace API ดู https://github.com/v8/v8/wiki/Stack%20Trace%20API สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API นี้

ตัวอย่างเช่น:

 ฟังก์ชั่นละเลยThisFunctionInStackTrace() {
  var err = ข้อผิดพลาดใหม่ ();
  Error.captureStackTrace (ผิดพลาด, ละเว้นThisFunctionInStackTrace);
  กลับข้อผิดพลาด.สแต็ค;}

ในเบราว์เซอร์อื่นๆ การติดตามสแต็กสามารถรวบรวมได้โดยการสร้างข้อผิดพลาดใหม่และการเข้าถึงคุณสมบัติสแต็กของออบเจ็กต์นั้น:

 var err = ข้อผิดพลาดใหม่ (''); return err.stack;

อย่างไรก็ตาม IE10 จะเติมการติดตามสแต็กเฉพาะเมื่อเกิดข้อผิดพลาดจริงเท่านั้น:

 พยายาม {
  โยนข้อผิดพลาดใหม่ ('');} catch (e) {
  ส่งคืน e.stack;}

หากวิธีการเหล่านี้ไม่ได้ผล คุณสามารถสร้างการติดตามสแต็กคร่าวๆ โดยไม่มีหมายเลขบรรทัดหรือคอลัมน์ได้โดยการวนซ้ำอ็อบเจ็กต์ arguments.callee.caller แต่วิธีนี้จะไม่ทำงานในโหมดเข้มงวด ES5 และไม่ใช่แนวทางที่แนะนำ

การติดตามสแต็ก Async

เป็นเรื่องปกติมากที่จุดอะซิงโครนัสจะถูกแทรกลงในโค้ด JavaScript เช่น เมื่อโค้ดใช้ setTimeout หรือผ่านการใช้ Promises จุดเข้าแบบอะซิงก์เหล่านี้อาจทำให้เกิดปัญหาสำหรับการติดตามสแต็ก เนื่องจากทำให้เกิดบริบทการดำเนินการใหม่ในรูปแบบและการติดตามสแต็กเริ่มต้นใหม่อีกครั้ง

Chrome DevTools รองรับการติดตามสแต็กแบบอะซิงก์ หรืออีกนัยหนึ่งคือทำให้แน่ใจว่าสแต็กเทรซของข้อผิดพลาดจะแสดงเฟรมที่เกิดขึ้นก่อนที่จะมีการนำจุดอะซิงก์มาใช้ด้วย ด้วยการใช้ setTimeout สิ่งนี้จะบันทึกว่าใครเป็นผู้เรียกใช้ฟังก์ชัน setTimeout ที่ทำให้เกิดข้อผิดพลาดในที่สุด ดูhttp://www.html5rocks.com/en/tutorials/developertools/async-call-stack/สำหรับข้อมูลเพิ่มเติม

การติดตามสแต็กแบบอะซิงก์จะมีลักษณะดังนี้: 

  throwError	@	throw-error.js:2
  setTimeout (async)		
  throwErrorAsync	@	throw-error.js:10
  (anonymous function)	@	throw-error-basic.html:14

ขณะนี้การติดตามสแต็ก Async ได้รับการสนับสนุนเฉพาะใน Chrome DevTools เท่านั้นสำหรับข้อยกเว้นที่เกิดขึ้นเมื่อเปิด DevTools เท่านั้น การติดตามสแต็กที่เข้าถึงได้จากออบเจ็กต์ข้อผิดพลาดในโค้ดจะ ไม่มี การติดตามสแต็กแบบอะซิงก์เป็นส่วนหนึ่งของการติดตามสแต็ก

ในบางกรณี เป็นไปได้ที่จะเติมโพลีฟิลอะซิงก์สแต็กเทรซได้ แต่อาจทำให้ประสิทธิภาพลดลงอย่างมากสำหรับแอปพลิเคชันของคุณ เนื่องจากการจับสแต็กเทรซนั้นไม่ได้ราคาถูก

เฉพาะ Chrome DevTools เท่านั้นที่รองรับการติดตามสแต็กอะซิงก์

การตั้งชื่อสคริปต์อินไลน์และการประเมิน

การติดตามสแต็กสำหรับโค้ดที่ได้รับการประเมินหรืออินไลน์ในหน้า HTML จะใช้ URL ของเพจและหมายเลขบรรทัด/คอลัมน์สำหรับโค้ดที่ดำเนินการ

ตัวอย่างเช่น: 

  at throwError (http://mknichel.github.io/javascript-errors/throw-error-basic.html:8:9)
  at http://mknichel.github.io/javascript-errors/throw-error-basic.html:12:3

หากสคริปต์เหล่านี้มาจากสคริปต์ที่อินไลน์เพื่อเหตุผลในการเพิ่มประสิทธิภาพจริงๆ แล้วหมายเลข URL บรรทัดและคอลัมน์จะผิด เพื่อแก้ไขปัญหานี้ Chrome และ Firefox สนับสนุน //# sourceURL= คำอธิบายประกอบ (Safari, Edge และ IE ไม่รองรับ) URL ที่ระบุในคำอธิบายประกอบนี้จะถูกใช้เป็น URL สำหรับการติดตามสแต็กทั้งหมด และหมายเลขบรรทัดและคอลัมน์จะถูกคำนวณโดยสัมพันธ์กับจุดเริ่มต้นของแท็ก