🥇在用 JavaScript 編寫的前端應用程式中使用 Sentry 監控錯誤：第 1 部分

服務哨兵允許您遠端監控以以下語言編寫的前端應用程式中的錯誤 JavaScript的.

嘗試解決前端應用程式中的問題 JavaScript的 可能很棘手，因為它們源自於用戶的瀏覽器，而您通常無法存取該瀏覽器。然而，哨兵使得遠端監控錯誤成為可能。

這裡您可以下載本文中討論的解決方案。

需要什麼

如果您想使用這些範例，您將需要：

Node.js的：功能豐富的開發工具，不屬於應用程式的一部分。我們下載了最新的 LTS 版本 (8.12.0)
哨兵：Sentry 服務中的帳戶（每月最多可以免費記錄 10 個錯誤）或已安裝的本機 Sentry - https://github.com/getsentry/onpremise

在您的伺服器上安裝

要在您的伺服器上安裝 Sentry On-Premise，您可以透過兩種方式進行

建造 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 安裝並公開為全域變量
早些時候我們在 JavaScript 中啟動了 Sentry

為了測試這個例子，我們可以使用靜態Web伺服器平台 Node.js的: http伺服器。轉到儲存檔案的資料夾 的index.html，然後輸入（停用快取的選項）以下行以在瀏覽器中開啟位址 http://localhost:8080.

如何顯示捕獲的錯誤

首先點擊按鈕 “您好”.

我們發現了一個錯誤，因此它不會彈出調用堆疊，因此不會在控制台中進行監控。然而，由於我們發送到哨兵手動報告錯誤，我們將在您的帳戶中看到有關該錯誤的訊息。

注：

我們可以追蹤哪一行 (24) 包含錯誤
此外，麵包屑路徑也會顯示導致錯誤的瀏覽器操作。

如何顯示未捕獲的錯誤

單擊按鈕 “錯誤”。

該錯誤會導致呼叫堆疊冒泡，從而在控制台上顯示錯誤訊息。此後，Sentry 會自動監控該 bug，無需任何其他操作。

注：

我們可以看到錯誤在哪一行 (30) 中遺失
沒有麵包屑痕跡（我不太明白為什麼）

如何確保專案安全

您可能已經注意到我們控制哪些頁面可以向我們的專案報告錯誤的方式哨兵; 在幫助下 DSN 記錄。問題是任何查看頁面原始碼的人都可以看到輸入。

為了避免這種情況，我們需要限制可以向我們的項目提交錯誤報告的網域的數量。在這個例子中我們使用了本地（本地主機）。此選項在設定標籤中配置哨兵-專案, 哨兵專案設置.

發布

如果您考慮如何使用哨兵在我們應用程式的不同變體中，我們需要某種機制來用版本號標記錯誤。

畢竟，我們不希望我們修復的錯誤再次出現，我們認為我們修復的內容不起作用。也可能是用戶啟動了應用程式的較舊的快取版本。

解決問題需要輸入標識符釋放（版本）啟動時哨兵.

原版/index.html

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

此後，所有新錯誤將被標記為 發布（0.1.0），也就是說，它們將與正確的程式碼版本相關聯。

注：

我們找到了一種使用發布的簡單方法
Sentry讓您使用更多 複雜的 他們的使用，這與密切相關 GitHub上。此功能可以在執行某些操作之前追蹤錯誤。

PS第二部分較長，因此將在單獨的帖子中。

PS Telegram 聊天哨兵 https://t.me/sentry_ru

PS我忘了指出這是帖子的翻譯 https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

來源： www.habr.com

使用 JavaScript 編寫的前端應用程序中的 Sentry 監控錯誤：第 1 部分

添加評論取消回复

使用 JavaScript 編寫的前端應用程序中的 Sentry 監控錯誤：第 1 部分

添加評論 取消回复

添加評論取消回复