TutorialsTypetalk検索...ヌーラボについてヌーラボは最先端のコラボレーションツールを開発する集団です。Tutorialsこんにちは。Cacooチームの中原です。」について説明したいと思います。内容としては以下のようなものになっています。報告を待つのではなく自分からJavaScriptエラーを拾うスタックトレース以外に必要な情報とはJavaScriptエラーの補足方法エラーをどう開発者に届けるか攻めのJavaScriptエラー対策ユーザのブラウザ上でJavaScriptエラーが発生した場合、どうなるでしょうか?親切なユーザがうまく動作しないことをサポートへ報告してくれる問題を調査して原因が判明、解決!となれば良いですが、実際はエラーが起きたことに気づかないなにかおかしいと思ったけどリロードしたらなおった動かないから使うのをやめたユーザーが報告してくれたけど状況が詳しくわからず解決できないとなってしまうことが多いのではないでしょうか。Cacooの図の編集画面では、エラーが起きるとその情報をサーバへ送信して、すぐにTypetalk(社内のチャット)に流れてくるようになっています。することで大きなメリットがあります。ユーザーが報告しなくてもエラーが起きていることがすぐにわかり対応できる問い合わせがあったときにJavaScriptエラーが原因なのか切り分けがすぐにできる問い合わせの内容とエラーの内容を突き合わせることで問題の解決につながるいつも見ているTypetalkにエラーが流れてくるので問題を意識するようになる実際、HTML5版Cacooの社内Beta期間に、この機能のおかげで大量のバグを発見・修正できています。問題の報告を受ける前に開発側から「今さっき問題が起きていたようなので詳しく状況を教えてください」と聞きにいくこともありました。多くの開発者が真っ先に考えるのは、エラーメッセージとスタックトレースでしょうか。実際、みなさん開発中はブラウザのコンソールを開いて、コンソール上に表示されたメッセージとスタックトレースを手がかりにデバッグを行っていると思います。(下の方で説明します)を使ってこれらを取得し、エラーを送信している方もいるかもしれません。Cacooの場合はこれだけでは問題の解決が難しい状況があります。CacooではIndexedDB、XMLHttpRequestの呼び出しが多くPromiseチェーンが多用されています。エラーをcatchしても、非同期処理を挟んでいるのでスタックトレースだけでは処理の流れを追うことはできないのです。DBに情報を保存した図形を削除した例えば上記のような情報です。最新の100件分など、数に制限をつけてメモリ上に保持しています。具体的な図の内容がわかるような画像などを送信するのではなく、操作の内容や変更する値などの情報になります操作ログは問題の原因を探る大きな手がかりになります。不正なデータ(例えばundefined)が原因でエラーが起きたとします。ここでは不正な場合の対処でなく、不正な状態にならない根本的な対処が必要になります。操作ログからエラーが起きる前にどんな操作を行っていたか確認して、不正なデータが作られる原因を探っていきます。当然ですが非常に重要です。エラーが発生した時刻だけでなく、上記の操作ログにも時刻を含めています。短時間で複数の操作が行われていた場合はタイミングによって問題が起きているのかもしれないですし、異常に時間がかかっている場合、特別遅い処理が存在するのかもしれません。一度問題が起きると、その問題が別の問題を起こすことがあります。何度もエラーが送信されている場合、まずは最初のエラーを確認します。他にもいくつかありますが、変わったところだとscriptタグの情報(src、type、crossorigin属性とタグの中身の先頭部分)も送っています。Extensionがscriptタグを挿入していて、その影響で問題が起きるということがあったからです。エラーの捕捉プログラムの中でチェックして異常を検出した場合、単にその詳しい状況を送信すればよいですが、想定していないエラーが起きた場合はそのエラーを捕捉する必要があります。catchされなかったエラーをハンドルすることができます。CodePen.ブラウザのサポート状況IE10以前では利用できません。then()、catch()でハンドリングされていないときに発生するイベントです。前にも述べたとおり、CacooではIndexedDBやXMLHttpRequestなど非同期処理が多用されPromiseチェーンがたくさん出てきます。Promiseとして処理が続きます。したがって、Promiseを利用している場合はこちらも利用します。});2つイベントがあるのは、Promiseがrejectされたあと遅れてcatchされた場合に対応するためです。下のサンプルコードを見ていただけるとわかると思います。一定時間catchされてないか確認する必要があります。未対応のブラウザが多い状態ですが、エラーの捕捉であれば使える環境だけでも積極的に使っていくべきだと思います。情報がない場合があります。JavaScriptファイルをCDNなど別ドメインで配布している場合に発生します。セキュリティ上、情報が取れないようになっているんですね(W3C)。いう属性をscriptタグに付けて、JavaScriptファイルのHTTPレスポンスにもCORSヘッダを追加してください。これで詳細な情報が取れるようになります。https://cacoo.comエラーを開発者へ迅速に届ける最初の方で述べた通り、Cacooではエラーが起きるとすぐに社内のTypetalkに流れるようになっています。Typetalk上でエラーメッセージなどの概要を見て、Kibanaから操作ログ、スタックトレース、HTTPヘッダなどの詳細な情報を確認します。KibanaからはフロントのNginxのログも見れるので、必要に応じてそれ以前HTTPリクエストも確認していきます。まとめCacooのクライアントサイドで行っているエラー発生時の対応を紹介しました。Cacooの社内Beta期間にエラーはかなり減らしたのですが、リリースした直後は大量のエラーが送信されてきました(数秒で1件!)。社内Beta期間には見ることのなかったエラーばかりでした。公開直後から調査・対応を進めて今はかなり減ってきています。エラーの内容や操作ログを見ても原因がわからなかったり再現できないことはたくさんあります。動作していないけどエラーは起きていないという状況には対応できません。解決できる問題もたくさんあるのと、エラーが把握できるということで非常に役に立っています。Reserved.EnglishEnglish。