サービス 歩哨 で書かれたフロントエンド アプリケーションのバグをリモートで監視できます。 JavaScriptを.
フロントエンド アプリケーションの問題を解決しようとしています JavaScriptを これらはユーザーのブラウザから発生しており、アクセスできないことが多いため、扱いが難しい場合があります。 しかし、 歩哨 リモートでバグを監視できるようになります。
この記事で説明したソリューションをダウンロードできます。
必要なものは何ですか
これらの例を使用する場合は、以下が必要になります。
- : アプリケーションの一部ではない、機能が豊富な開発ツール。 最新の LTS バージョン (8.12.0) をダウンロードしました
- 歩哨: Sentry サービスのアカウント (毎月最大 10 件のバグを無料で記録できます)、またはインストールされたローカル Sentry -
サーバーへのインストール
Sentry On-Premise をサーバーにインストールするには、2 つの方法があります
-
rpm をビルドしてインストールします -
-
公式インストーラーを使用します。
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
標準使用
開始するには、サービス Web サイトから新しいものを追加します 歩哨-アプリケーションのプロジェクト。 希望の言語を選択すると、対応するドキュメントが届きます。 私たちの場合、私たちが選んだのは、 JavaScriptを.
最初の例は標準的なものです JavaScriptを。 ここには XNUMX つのボタンがあります。 "こんにちは" （こんにちは）そして "エラー" （エラー）。
ボタンをクリックした後 "こんにちは"、画面が再起動し、ブロックされます 試します バグを検出して捕捉します。 バグが「捕捉」された後、エラー レポートが手動でサービスに送信されます。 歩哨.
「エラー」ボタンを使用すると、バグを簡単に検出できます。
バニラ/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を、次の行を入力して (キャッシュを無効にするオプション)、ブラウザでアドレスを開きます。 .
捕らえられたバグの表示方法
まずボタンをクリックしてください "こんにちは".
バグを発見したため、コールスタックにポップアップ表示されず、コンソールで監視されません。 ただし、お送りするのは 歩哨 手動でバグを報告すると、それに関するメッセージがアカウントに表示されます。
備考：
- どの行 (24) にバグが含まれているかを追跡できます。
- さらに、パンくずリストには、エラーの原因となったブラウザーのアクションが表示されます。
捕らえられなかったバグの表示方法
ボタンをクリックする "エラー"。
このバグによりコールスタックがバブルアップするため、コンソールにエラーメッセージが表示されます。 その後、Sentry は追加のアクションを行わずに自動的にバグを監視します。
備考：
- どの行 (30) でバグが失われているかがわかります。
- パンくずリストがありません (理由はよくわかりません)
プロジェクトのセキュリティを確保する方法
どのページがプロジェクトにエラーを報告できるかを制御する方法に気づいたかもしれません 歩哨; 助けを借りて DSN 記録。 問題は、ページのソース コードを閲覧する人なら誰でもその入力を見ることができることです。
これを回避するには、プロジェクトにエラー レポートを送信できるドメインの数を制限する必要があります。 この例では、 ローカルホスト (ローカルホスト)。 このオプションは設定タブで構成されます 歩哨-プロジェクト、 Sentry プロジェクトの設定.
リリース
使い方を考えたら 歩哨 アプリケーションのさまざまなバリエーションでは、エラーにバージョン番号をマークする何らかのメカニズムが必要になります。
結局のところ、私たちは修正したバグが再び現れることを望みませんし、修正したものが機能しなかったと考えます。 また、ユーザーがキャッシュされた古いバージョンのアプリケーションを起動した可能性もあります。
問題を解決するには、識別子を入力する必要があります 解放する 起動時の（バージョン） 歩哨.
バニラ/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...この後、すべての新しいエラーは次のようにマークされます。 リリース (0.1.0)つまり、コードの正しいバージョンに関連付けられます。
備考：
- リリースを使用する簡単な方法を考え出しました
- Sentry を使用するとさらに多くのことが可能になります と密接に関係しています GitHubの。 この機能により、特定の操作を実行する前にバグを追跡することができます。
PS 後半は長くなるので別記事にします。
PS Telegram チャット セントリー
PS これが投稿の翻訳であることを示すのを忘れていました
出所： habr.com