サーバーでのクライアントサイドJavaScriptエラーのロギング[終了]


97

手動テストだけでJavaScriptエラーを見つけるのに問題があるASP.NETサイトを実行しています。

クライアントサイドですべてのJavaScriptエラーをキャッチし、サーバーに(つまり、Webサービスなどを介して)イベントログに記録する可能性はありますか?


JavaScript UnitTestingを使用していない問題は、サイト/コンテンツに貢献している人が多すぎてJavaScriptを使用しているためです。コンテンツは(開発者として)私たちが気にする必要のあるものではありませんが、コードに誤りがあります。したがって、一般的なソリューションの方が優れています。
MADMap 2008

私はあなたが平均的なユーザーの貢献を意味するのではないことを前提としています(そうでなければ、XSSホールです)...しかし、try / catchでJSを分離して、少なくとも自分のJSに影響を与えないようにすることができます...サイトのダイナミクス、これが役立つかどうかはわかりません...
マイクストーン

コンテンツは社内の他のチームからのものであり、ユーザーからのものではないため、セキュリティリスクではありません
MADMap

Bugsnagは自動的にエラーをログに記録し、ダッシュボードに表示します。.NETおよびJSで動作します。
Don P

回答:


68

onerrorイベント用に独自のハンドラーをセットアップして、XMLHttpRequestを使用してサーバーに何が問題かを通知することもできますが、仕様の一部ではないためサポートは多少不安定です。

次に、XMLHttpRequestを使用してJavaScriptエラーをログに記録する例を示します

window.onerror = function(msg, url, line)
{
  var req = new XMLHttpRequest();
  var params = "msg=" + encodeURIComponent(msg) + '&url=' + encodeURIComponent(url) + "&line=" + line;
  req.open("POST", "/scripts/logerror.php");
  req.send(params);
};


2
ハンドラーでクラッシュした場合、無限にループしますか?
Jean-Philippe Leclerc、2013年

2
@ Jean-PhilippeLeclercはい。さらに悪いことに、エラーループに陥った場合にサーバーエンドポイントがDoSになります。これにスロットル機能を追加して、クライアントがサーバーを高速でヒットしないようにする必要があります。:ここで{JSトラック}から、この一例であるgithub.com/TrackJs/Tech-Demo/blob/master/src/TrackJs.Demo/...
トッド・ガードナー

ユーザーのID、IP、小さなランダム文字列(暗号化アルゴリズムが高速で弱いが既知の平文攻撃を阻止するため)、タイムスタンプを含むトークンを暗号化し、それをページのJS変数として含めることもできます。次に、これをエラーレポートと共に送信し、ログに追加する前にチェックできます。これは、可能性のあるエラーメッセージの信頼性を証明し、無意味なDoS攻撃から保護するのに役立ちますが、スロットルが行う方法のように、より高度なDoSの試みからは保護されません。
mormegil 2014年

たとえば、setIntervalメソッドでエラーが発生した場合、これはサーバーを圧倒する可能性があります。ウェブ上で利用可能な多くのJSエラー報告サービスがあります。チェックアウトErrLytics。また、Webサイトでのすべてのユーザーアクションの分析も提供します。
Vivek Marakana

28

短い答え:はい、可能です。

より長い答え:人々は、独自のコードを書くことによってこの問題を(少なくとも部分的に)解決する方法についてすでに書いています。ただし、必要なJSコードが多くのブラウザで機能することを確認したサービスがあることに注意してください。私は以下を見つけました:

まだ試していないので、これらのサービスについて話すことはできません。


1
muscula.comに登録されています。サービスは非常に興味深く、簡単に統合して使用できます。クライアントから例外情報を取得できるJavaScriptライブラリgithub.com/csnover/TraceKitもありますが、独自のサーバー側のログインメカニズムを開発する必要があります。そのためにGoogle Analyticsを使用できるかどうか疑問に思います
Maksym Kozlenko

1
trackjs.comも同様で、エラーの前にユーザーとネットワークが行っていたことを追跡します。
Todd Gardner

上記のリストに加えて、 log4sure.comは無料で、ログをリアルタイムで監視しています。カスタムログテーブルを作成することもできます
Bhavin

erroralerts.comが見つかりません
Kiquenet 2015年


12

作業中のプロジェクトで、JavaScriptエラーのサーバー側エラーログを実装しました。レガシーコードと使用する新しいコードの混合があります jQuery

window.onerrorjQueryイベントハンドラーとonready関数を組み合わせて、エラー処理関数でラップします(JavaScriptエラーの追跡:window.onerrorが十分でない理由を参照)。

  • window.onerror:IEのすべてのエラー(およびFirefoxのほとんどのエラー)をキャッチしますが、SafariおよびOperaでは何もしません。
  • jQueryイベントハンドラー:すべてのブラウザーでjQueryイベントエラーをキャッチします。
  • jQuery対応関数:すべてのブラウザーで初期化エラーをキャッチします。

エラーをキャッチしたら、それに追加のプロパティ(url、ブラウザなど)を追加し、ajax呼び出しを使用してサーバーにポストバックします。

サーバーには、投稿された引数を取り、通常のサーバーログフレームワークに出力する小さなページがあります。

(jQueryプラグインとして)このためのコードをオープンソースにしたいと思います。興味のある方はお知らせください。上司を説得するのに役立ちます。


1
このコードが利用可能になる可能性はありますか?
ルーク

残念ながらありません:(私はもはや私がそのコードを作成した会社のために働いています。しかし、それは唯一のコードの100行程度で、上記の詳細から再作成する合理的に容易であるべきであると。。
カール・

1
それはここの男です:webcache.googleusercontent.com/...
デヴィンG RHODE

私はそれを試しましたが、jqueryを依存性に保つのは苦痛であり、window.onerrorはcdnsを介して提供される縮小されたコードとJavaScriptを吸う
Ankur Agarwal 2013

2

Google Analyticsを使用している場合は、JavaScriptエラーをGoogle Analyticsイベントに記録できます。

このアプリを参照してください。 http //siteapps.com/app/log_javascript_errors_with_ga-181

それが役に立てば幸い。


2
そのリンクはもう機能しません。Google AnalyticsでのJavascriptエラーのロギングに関する記事は、developers.google.com
analytics / devguides / collection /…にあります。– Martin Omander


0

クライアント側のエラーをサーバーに記録する場合は、なんらかのサーバー処理を行う必要があります。最善の策は、JavaScript(AJAX)を介してアクセスできるWebサービスを用意し、エラーログ情報を渡すことです。

問題がWebサービスをホストしているWebサーバーにある場合、問題は100%解決しません。他のオプションは、クエリ文字列を介して標準ページを介して情報を送信することです。これは、ブラウザーが画像のソースをロードしようとするため、動的に生成される画像タグ(その後削除されます)を介して行われます。ただし、クロスドメインのJavaScript呼び出しをうまく処理します。画像がオフになっていると問題が発生することに注意してください;)


0

最近、asp.netとJavaScriptの両方のエラーをキャプチャするAppfailを使用しています


0

可能性としては、try / catchからサーバーへのAjax呼び出しを行うことができますが、それはおそらくあなたができる最善のことです。

代わりにJavaScriptユニットテストを提案できますか?おそらくJSUnitで


JavaScript UnitTestingを使用していない理由は、サイト/コンテンツに貢献している人が多すぎてJavaScriptを使用しているためです(しかし、それについての手掛かりはありません!)、一般的な解決策がより良いでしょう。
MADMap 2008
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.