🥇การตรวจสอบข้อผิดพลาดโดยใช้ Sentry ในแอปพลิเคชันส่วนหน้าที่เขียนด้วย JavaScript: ตอนที่ 1

บริการ ทหารยาม ช่วยให้คุณตรวจสอบข้อบกพร่องในแอปพลิเคชันส่วนหน้าที่เขียนจากระยะไกล JavaScript.

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

ที่นี่ คุณสามารถดาวน์โหลดโซลูชันที่กล่าวถึงในบทความนี้

สิ่งที่จำเป็น

หากคุณต้องการใช้ตัวอย่างเหล่านี้ คุณจะต้องมี:

Node.js: เครื่องมือพัฒนาที่มีฟีเจอร์หลากหลายซึ่งไม่ได้เป็นส่วนหนึ่งของแอปพลิเคชัน เราดาวน์โหลด LTS เวอร์ชันล่าสุด (8.12.0)
ทหารยาม: ไม่ว่าจะเป็นบัญชีในบริการ Sentry (คุณสามารถบันทึกข้อบกพร่องได้มากถึง 10 จุดต่อเดือนฟรี) หรือ Sentry ในเครื่องที่ติดตั้ง - https://github.com/getsentry/onpremise

การติดตั้งบนเซิร์ฟเวอร์ของคุณ

หากต้องการติดตั้ง Sentry On-Premise บนเซิร์ฟเวอร์ของคุณ คุณสามารถทำได้ 2 วิธี

สร้าง rpm และติดตั้ง - https://habr.com/ru/post/500632/

ใช้ตัวติดตั้งอย่างเป็นทางการ:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

การใช้งานมาตรฐาน

ในการเริ่มต้น ให้เพิ่มอันใหม่จากเว็บไซต์บริการ ทหารยาม- โครงการสำหรับการสมัคร หลังจากเลือกภาษาที่ต้องการแล้ว คุณจะได้รับเอกสารที่เกี่ยวข้อง ในกรณีของเราเราเลือก JavaScript.

ตัวอย่างแรกคือมาตรฐาน JavaScript. มีสองปุ่มที่นี่: "สวัสดี" (สวัสดี) และ "ข้อผิดพลาด" (ข้อผิดพลาด).

หลังจากที่คุณคลิกปุ่ม "สวัสดี"หน้าจอจะรีบูตและบล็อก ลอง จะตรวจจับและจับจุดบกพร่อง หลังจาก "ตรวจพบข้อบกพร่อง" แล้ว รายงานข้อผิดพลาดจะถูกส่งไปยังบริการด้วยตนเอง ทหารยาม.

ปุ่ม "ข้อผิดพลาด" ช่วยให้คุณตรวจจับจุดบกพร่องได้อย่างง่ายดาย

วานิลลา/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Hello</button>
  <button id="error">Error</button>
  <div id="output"></div>
  <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      'use strict';
      Sentry.init({ dsn: 'https://[email protected]/1289664' });
      var helloEl = document.getElementById('hello');
      var errorEl = document.getElementById('error');
      var outputEl = document.getElementById('output');
      helloEl.addEventListener('click', handleHelloClick);
      errorEl.addEventListener('click', handleErrorClick);
      function handleHelloClick() {
        outputEl.innerHTML = 'Hello World';
        try {
          throw new Error('Caught');
        } catch (err) {
          Sentry.captureException(err);
        }
      }
      function handleErrorClick() {
        throw new Error('Uncaught');
      }
    })();
  </script>
</body>
</html>

หมายเหตุ:

Sentry ได้รับการติดตั้งจาก CDN และเปิดเผยเป็นตัวแปรส่วนกลาง
ก่อนหน้านี้เล็กน้อยเราได้เปิดตัว Sentry ใน JavaScript ของเรา

เพื่อทดสอบตัวอย่างนี้ เราสามารถใช้แพลตฟอร์มเว็บเซิร์ฟเวอร์แบบคงที่ได้ Node.js: เซิร์ฟเวอร์ http. ไปที่โฟลเดอร์ที่เก็บไฟล์ไว้ index.htmlและป้อน (ตัวเลือกที่ปิดใช้งานการแคช) บรรทัดต่อไปนี้เพื่อเปิดที่อยู่ในเบราว์เซอร์ http://localhost:8080.

วิธีแสดงจุดบกพร่องที่จับได้

ขั้นแรกให้คลิกปุ่ม "สวัสดี".

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

หมายเหตุ:

เราสามารถติดตามได้ว่าบรรทัดใด (24) มีจุดบกพร่อง
นอกจากนี้ เส้นทางแสดงเส้นทางจะแสดงการทำงานของเบราว์เซอร์ที่นำไปสู่ข้อผิดพลาด

วิธีแสดงจุดบกพร่องที่ไม่ถูกตรวจจับ

คลิกที่ปุ่ม "ข้อผิดพลาด".

จุดบกพร่องทำให้เกิด call stack และทำให้ข้อความแสดงข้อผิดพลาดปรากฏขึ้นบนคอนโซล หลังจากนี้ Sentry จะตรวจสอบจุดบกพร่องโดยอัตโนมัติ โดยไม่ต้องดำเนินการใดๆ เพิ่มเติม

หมายเหตุ:

เราจะเห็นได้ว่าจุดบกพร่องหายไปในบรรทัดใด (30)
ไม่มีเส้นทางเกล็ดขนมปัง (ฉันไม่ค่อยเข้าใจว่าทำไม)

วิธีการรักษาความปลอดภัยของโครงการ

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

เพื่อหลีกเลี่ยงปัญหานี้ เราจำเป็นต้องจำกัดจำนวนโดเมนที่สามารถส่งรายงานข้อผิดพลาดไปยังโปรเจ็กต์ของเรา ในตัวอย่างนี้เราใช้ localhost (โฮสต์ท้องถิ่น) ตัวเลือกนี้ได้รับการกำหนดค่าในแท็บการตั้งค่า ทหารยาม-โครงการ, การตั้งค่าโครงการยาม.

เผยแพร่

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

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

ในการแก้ปัญหา คุณต้องป้อนตัวระบุ ปล่อย (เวอร์ชัน) เมื่อเริ่มต้น ทหารยาม.

วานิลลา/index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

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

หมายเหตุ:

เราได้ค้นพบวิธีง่ายๆ ในการใช้รุ่นต่างๆ แล้ว
Sentry ช่วยให้คุณใช้งานได้มากขึ้น ซับซ้อน ของพวกเขา ใช้ซึ่งมีความสัมพันธ์ใกล้ชิดกับ GitHub. ฟังก์ชันนี้ทำให้สามารถติดตามจุดบกพร่องก่อนดำเนินการบางอย่างได้

ป.ล. ภาคสองยาวกว่า เลยขอแยกโพสต์นะครับ

PS โทรเลขแชทยาม https://t.me/sentry_ru

ป.ล. ฉันลืมระบุว่านี่คือการแปลโพสต์ https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

ที่มา: will.com

การตรวจสอบข้อผิดพลาดกับ Sentry ในแอปพลิเคชัน Front-End ที่เขียนใน JavaScript: ตอนที่ 1

เพิ่มความคิดเห็น ยกเลิกการตอบ