Dịch vụ Lính gác cho phép bạn giám sát từ xa các lỗi trong các ứng dụng front-end được viết bằng JavaScript.
Đang cố gắng khắc phục sự cố trong các ứng dụng ngoại vi trên JavaScript có thể phức tạp vì chúng bắt nguồn từ trình duyệt của người dùng mà bạn thường không có quyền truy cập. Tuy nhiên, Lính gác giúp bạn có thể theo dõi lỗi từ xa.
Bạn có thể tải xuống các giải pháp được thảo luận trong bài viết này.
Những gì là cần thiết
Nếu bạn muốn sử dụng những ví dụ này, bạn sẽ cần:
- : Một công cụ phát triển giàu tính năng không phải là một phần của ứng dụng. Chúng tôi đã tải xuống phiên bản LTS mới nhất (8.12.0)
- Lính gác: Tài khoản trong dịch vụ Sentry (bạn có thể ghi lại miễn phí tối đa 10 nghìn lỗi mỗi tháng) hoặc Sentry cục bộ đã cài đặt -
Cài đặt trên máy chủ của bạn
Để cài đặt Sentry On-Premise trên máy chủ của bạn, bạn có thể thực hiện theo 2 cách
-
Xây dựng vòng/phút và cài đặt chúng -
-
Sử dụng trình cài đặt chính thức:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
Sử dụng tiêu chuẩn
Để bắt đầu, hãy thêm một cái mới từ trang web dịch vụ Lính gác-dự án cho ứng dụng. Sau khi chọn ngôn ngữ mong muốn, bạn sẽ nhận được tài liệu tương ứng. Trong trường hợp của chúng tôi, chúng tôi đã chọn JavaScript.
Ví dụ đầu tiên là tiêu chuẩn JavaScript. Có hai nút ở đây: "Xin chào" (Xin chào và "Lỗi" (Lỗi).
Sau khi bạn nhấp vào nút "Xin chào", màn hình sẽ khởi động lại và chặn thử sẽ phát hiện và bắt lỗi. Sau khi “bắt” được lỗi, báo cáo lỗi sẽ được gửi thủ công tới dịch vụ Lính gác.
Nút “Lỗi” cho phép bạn dễ dàng phát hiện lỗi.
vani/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>Ghi chú:
- Sentry được cài đặt từ CDN và được hiển thị dưới dạng biến toàn cục
- Trước đó một chút, chúng tôi đã khởi chạy Sentry trong JavaScript của mình
Để kiểm tra ví dụ này, chúng ta có thể sử dụng nền tảng máy chủ web tĩnh Node.js: máy chủ http. Đi tới thư mục chứa tập tin index.htmlvà nhập (tùy chọn tắt bộ nhớ đệm) dòng sau để mở địa chỉ trong trình duyệt .
Cách hiển thị các lỗi đã phát hiện
Đầu tiên bấm vào nút "Xin chào".
Chúng tôi đã gặp lỗi nên nó sẽ không bật lên ngăn xếp cuộc gọi và do đó không được giám sát trong bảng điều khiển. Tuy nhiên, vì chúng tôi gửi đến Lính gác báo cáo lỗi theo cách thủ công, chúng tôi sẽ thấy thông báo về lỗi đó trong tài khoản của bạn.
Ghi chú:
- Chúng tôi có thể theo dõi dòng nào (24) chứa lỗi
- Ngoài ra, đường dẫn breadcrumb hiển thị các hành động của trình duyệt dẫn đến lỗi.
Cách hiển thị các lỗi chưa được phát hiện
nhấp vào nút "Lỗi".
Lỗi xuất hiện trong ngăn xếp cuộc gọi và do đó thông báo lỗi được hiển thị trên bảng điều khiển. Sau đó, Sentry tự động theo dõi lỗi mà không cần thực hiện thêm bất kỳ hành động nào.
Ghi chú:
- Chúng ta có thể thấy lỗi bị mất ở dòng nào (30)
- Không có đường dẫn breadcrumb (tôi không hiểu tại sao)
Cách đảm bảo an ninh dự án
Bạn có thể đã nhận thấy cách chúng tôi kiểm soát những trang nào có thể báo lỗi cho dự án của chúng tôi Lính gác; với sự giúp đỡ DSN Hồ sơ. Vấn đề là bất kỳ ai xem mã nguồn trang của bạn đều có thể nhìn thấy thông tin đầu vào.
Để tránh điều này, chúng tôi cần giới hạn số lượng tên miền có thể gửi báo cáo lỗi cho dự án của chúng tôi. Trong ví dụ này chúng tôi đã sử dụng localhost (máy chủ cục bộ). Tùy chọn này được cấu hình trong tab cài đặt Lính gác-dự án, Cài đặt dự án Sentry.
Bản phát hành
Nếu bạn nghĩ về cách sử dụng Lính gác trong các biến thể khác nhau của ứng dụng của chúng tôi, thì chúng tôi cần một số loại cơ chế sẽ đánh dấu lỗi bằng số phiên bản.
Rốt cuộc, chúng tôi không muốn lỗi chúng tôi đã sửa xuất hiện trở lại và chúng tôi nghĩ rằng những gì chúng tôi đã sửa không có tác dụng. Cũng có thể người dùng đã khởi chạy phiên bản ứng dụng cũ hơn, được lưu trong bộ nhớ đệm.
Để giải quyết vấn đề, bạn cần nhập mã định danh phát hành (phiên bản) khi khởi động Lính gác.
vani/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...Sau đó, tất cả các lỗi mới sẽ được đánh dấu là phát hành (0.1.0), nghĩa là chúng sẽ được gắn với phiên bản chính xác của mã.
Ghi chú:
- Chúng tôi đã tìm ra một cách đơn giản để sử dụng các bản phát hành
- Sentry cho phép bạn sử dụng nhiều hơn , có liên quan chặt chẽ với GitHub. Chức năng này giúp bạn có thể theo dõi lỗi trước khi thực hiện một số thao tác nhất định.
PS Phần thứ hai dài hơn nên sẽ ở một bài riêng.
Trò chuyện PS Telegram Sentry
Tái bút Tôi quên cho biết đây là bản dịch của bài viết
Nguồn: www.habr.com