usersnapでクライアント側のバグレポートを実装します

キーテイクアウト

• usersNapは、スクリーンショットをマークしてJavaScriptコンソールですべてのデータを送信することにより、ユーザーがWebサイトからバグを直接報告できるツールです。クライアントのWebサイトに統合して、バグのレポートと解決を促進することができます。
開発者は、usersNapを使用してサーバー側のエラーやログを収集することもできます。単純なクラスを使用することにより、デバッグに必要なすべてのエラーとログを記録できます。これは、usersNapに渡すことができます。これにより、より速く、より効率的なバグ修正が可能になります
• UsersNapは、画面サイズ、ブラウザバージョン、OS、インストールされたブラウザープラグインなどの追加情報も提供しています。この機能は、必要なときにのみオンにすることができ、IPフィルタリングや開発者の開設などの方法により、その可用性は制限できます。*サブドメイン。
• 次のシナリオを想像してみてください。クライアントはウェブサイトにアクセスして（これを想像してみましょう）、予想される結果以外のことを見てください。通常の反応は、（最も不適切な時間に）あなたに電話して、お金を失っているのでできるだけ早く修正するように頼むことです。
ユーザーがバグをできるだけ正確に報告するのを支援するにはどうすればよいですか？

バグ

私たちのケースを再現できるようにするために、本当にシンプルなJSONリクエストとエラーを持ってみましょう。

今すぐテストWebサイトにアクセスした場合、問題があることに気付くでしょう。

問題は - クライアントがバグと戦うために必要なすべてのデータをどのように速く報告できるか：

<span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>
<span>//we will simulate the json data, but imagine that this is the normal data exchanged daily between your client’s website and a 3rd party API
</span>
<span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');                                                                 
</span><span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                
</span><span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                                  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                'Content-Type: application/json',                      
</span>        <span>'Content-Length: ' . strlen($json_data)));
</span>                                                                                                             
<span>//the normal CURL request, nothing strange here:
</span><span>$result = curl_exec($ch);
</span>
<span>//receiving the data back
</span><span>$f_data =  json_decode($result,true);
</span>
<span>//showing a greeting with the output
</span><span>echo  “Welcome”. $f_data['username'];</span>

jsonデータ、

サーバー側JavaScriptおよびxmlhttpsRequestエラー、

いくつかのコアPHPエラー
…およびメタデータ。
この情報を収集するための興味深いソリューションは、usersnapです。ユーザーが参加しているサイトのスクリーンショットをマークアップし、JavaScriptコンソールにあるすべてを送信できるウィジェット。しかし、PHPエラーはそこに至りませんか？それらを作りましょう。まず、サーバー側のエラーを収集します
• エラーの収集
• 必要なデータを収集する方法を確認するために、例にさらにコードを追加しましょう。私たちを助けるために本当にシンプルなクラスを紹介します：

このクラスを使用して、必要なすべてのエラーとログを記録しましょう。

usersnap

に渡します

ページの最後にusersNapコードスニペットを追加して、何が起こるかを見てみましょう。 （このウィジェットを使用するにはアカウントが必要になる場合があります。UsersNapは、オープンソースプロジェクトの無料ライセンスと、商業用プロジェクトの無料テスト期間を提供しています。

<span><span><?
</span></span><span><span>class SendToUsersnap
</span></span><span><span>{
</span></span><span>    <span>var $m;
</span></span><span>    <span>//Save all logs in an array. You can use an even more elegant approach but right now I need it to be simple for the sake of this tutorial.
</span></span><span>    <span>function log ( $data, $type ) {
</span></span><span>    
</span><span>        <span>if( is_array( $data ) || is_object( $data ) ) {
</span></span><span>            <span>$this->m[]= "console.".$type."('PHP: ".json_encode($data)."');";
</span></span><span>        <span>} else {
</span></span><span>            <span>$this->m[] = "console.".$type."('PHP: ".$data."');";
</span></span><span>        <span>}
</span></span><span>    <span>}
</span></span><span>  <span>// Print all logs that have been set from the previous function. Let’s keep it simple.
</span></span><span>    <span>function  out (){
</span></span><span>         <span>for ($i=0;$i<count($this->m);$i++)
</span></span><span>          <span>{
</span></span><span>              <span>echo $this->m[$i]."\n";
</span></span><span>          <span>}
</span></span><span>        
</span><span>        
</span><span>        <span>}
</span></span><span><span>}</span></span>

注：実際のフレームワークのビューテンプレートでこれを行いますが、ここで実際のMVCアプリを使用していないため、その部分をスキップしています。

ユーザーはページに「バグをレポートする」ボタンが表示され、「機能していない、できるだけ早く修正」などのメッセージを書きます。一般的に、これは役に立たない情報になるでしょうが、今回は、このゴージャスなエラーログも添付されます：

今、あなたは初期化が整っていることがわかります：

<span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>
<span>//we will simulate the json data, but imagine that this is the normal data exchanged daily between your client’s website and a 3rd party API
</span>
<span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');                                                                 
</span><span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                
</span><span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                                  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                'Content-Type: application/json',                      
</span>        <span>'Content-Length: ' . strlen($json_data)));
</span>                                                                                                             
<span>//the normal CURL request, nothing strange here:
</span><span>$result = curl_exec($ch);
</span>
<span>//receiving the data back
</span><span>$f_data =  json_decode($result,true);
</span>
<span>//showing a greeting with the output
</span><span>echo  “Welcome”. $f_data['username'];</span>

送信するデータを見ることができます - 通常と同じ

<span><span><?
</span></span><span><span>class SendToUsersnap
</span></span><span><span>{
</span></span><span>    <span>var $m;
</span></span><span>    <span>//Save all logs in an array. You can use an even more elegant approach but right now I need it to be simple for the sake of this tutorial.
</span></span><span>    <span>function log ( $data, $type ) {
</span></span><span>    
</span><span>        <span>if( is_array( $data ) || is_object( $data ) ) {
</span></span><span>            <span>$this->m[]= "console.".$type."('PHP: ".json_encode($data)."');";
</span></span><span>        <span>} else {
</span></span><span>            <span>$this->m[] = "console.".$type."('PHP: ".$data."');";
</span></span><span>        <span>}
</span></span><span>    <span>}
</span></span><span>  <span>// Print all logs that have been set from the previous function. Let’s keep it simple.
</span></span><span>    <span>function  out (){
</span></span><span>         <span>for ($i=0;$i<count($this->m);$i++)
</span></span><span>          <span>{
</span></span><span>              <span>echo $this->m[$i]."\n";
</span></span><span>          <span>}
</span></span><span>        
</span><span>        
</span><span>        <span>}
</span></span><span><span>}</span></span>

そして、出力を見ることができます。はい、問題はそこにあります。明らかに認証の問題があります。

<span>require_once('Usersnap.class.php'); 
</span>    <span>$s = new SendToUsersnap;
</span>
    <span>$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';
</span>    <span>$s->log('Initializing the JSON request',"info");
</span>    <span>$s->log($json_data,"log");
</span> 
    <span>$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');             
</span>    <span>curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
</span>    <span>curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                           
</span>    <span>curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                         
</span>    <span>curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                 
</span>        <span>'Content-Type: application/json',                           
</span>        <span>'Content-Length: ' . strlen($json_data)));                                                                                                                   
</span> 
    <span>$result = curl_exec($ch);
</span>    <span>$f_data =  json_decode($result,true);
</span>    
    <span>echo  'Welcome'. $f_data['usersname'];
</span>    
    <span>$s->log($f_data,"log");
</span>    <span>$s->log(error_get_last(),"error");</span>

デバッグを支援するために、コアPHPエラーさえも取得できます。

<span><span><span><script</span> type<span>="text/javascript"</span>></span><span>
</span></span><span><span>  <span>(function() {
</span></span></span><span><span>  <span>var s = document.createElement("script");
</span></span></span><span><span>    s<span>.type = "text/javascript";
</span></span></span><span><span>    s<span>.async = true;
</span></span></span><span><span>    s<span>.src = '//api.usersnap.com/load/'+
</span></span></span><span><span>            <span>'your-api-key-here.js';
</span></span></span><span><span>    <span>var x = document.getElementsByTagName('script')[0];
</span></span></span><span><span>    x<span>.parentNode.insertBefore(s, x);
</span></span></span><span><span>  <span>})();
</span></span></span><span><span>
</span></span><span><span> <span>var _usersnapconfig = {
</span></span></span><span><span>   <span>loadHandler: function() {
</span></span></span><span><span>        <span><span><?php
</span></span></span></span><span><span><span>    <span>//just print all errors collected from the buffer.
</span></span></span></span><span><span><span> <span>$s->out(); ?></span>
</span></span></span><span><span>     <span>}
</span></span></span><span><span> <span>};
</span></span></span><span><span></span><span><span></script</span>></span></span>

クライアントはボタンを1回だけクリックする必要があり、バグと戦うために必要なすべてをより速く取得する必要があります：

1. エラーとログ（上記のように）
2. 注釈付きスクリーンショット - 問題がこの単純な例よりも複雑な場合
3. 画面サイズ、ブラウザバージョン、OS、ブラウザにインストールされているプラ​​グイン

もちろん、クライアントが必要なときにのみ、この機能をオンにすることができます。ウィジェットの可用性を制限するには、IPフィルターまたはクエリパラマリバリアを追加し、開発者を開きます。

結論

これはスクリプトモニタリングツールではなく、問題が表示されたときに自動的に情報を提供しません。このアプローチは、ユーザーまたはクライアントがバグを報告し、開発者としてのあなたまたはQAがバグと戦う方法に関するより多くの情報が必要な場合にのみ機能します。リモートデバッガーとして想像してくださいが、クライアント側のエラーイベントやデータの場合は、PHPからJavaScriptに送信します。

あなたの質問のすべてに答えたいです！以下にフィードバックを残してください！

ユーザーとのクライアント側のバグレポートに関するよくある質問（FAQ）

ユーザーNapは、クライアント側のバグレポートでどのように機能しますか？

usersNapは、ユーザーがWebアプリケーションからバグを直接報告できる視覚的なバグ追跡ツールです。問題のスクリーンショットをキャプチャし、重要なブラウザ情報をキャプチャすることで機能し、開発チームに送信されます。これにより、前後の通信の必要性がなくなり、バグ修正プロセスが高速化されます。 usersnapは人気のあるプロジェクト管理およびコミュニケーションツールとも統合されており、さまざまなチームの多用途のソリューションになります。バグレポートのためのツール。これらには、スクリーンショットのキャプチャ、ブラウザ情報コレクション、コンソールログ録音、ユーザーフィードバックコレクションが含まれます。また、Slack、Jira、Trelloなどの人気のあるツールとの統合も提供しています。さらに、usersNapは、他のシステムとのさらなるカスタマイズと統合のためのAPIを提供します。 usersnapをWebアプリケーションに統合するにはどうすればよいですか？

​​ usersNapをWebアプリケーションに統合するのは簡単です。 UsersNapアカウントにサインアップし、新しいプロジェクトを作成してから、提供されたJavaScriptコードをWebアプリケーションに追加する必要があります。このコードはアプリケーションにusersNapウィジェットをロードし、ユーザーがバグを直接レポートできるようにします。

ユーザーnapウィジェットをカスタマイズできますか？ウィジェットの色、テキスト、位置を変更して、ブランドに合わせて変更できます。フィードバックフォームをカスタマイズして、ユーザーから特定の情報を収集することもできます。これらはすべて、usersNapダッシュボードを介して、またはAPIを介して実行できます。バグ、usersnapは、問題をより速く特定して修正するのに役立ちます。視覚的なフィードバックと詳細なブラウザ情報は、開発チームが問題を簡単に理解して再現するのに役立ちます。これにより、バグの修正と改善が速くなり、Webアプリケーションの全体的な品質が向上します。プログラムでユーザーと対話できるプログラミングインターフェイス。 APIを使用して、プロジェクトを作成、更新、管理したり、ユーザーSnapウィジェットをカスタマイズしたりできます。 APIは安らかで、標準のHTTPメソッドを使用しているため、既存のシステムと簡単に統合できます。このツールは、同意なしにユーザーアクティビティを追跡したり、個人データを収集したりしません。収集されたすべてのデータは安全に保存され、バグレポートの目的でのみ使用されます。 usersNapは、GDPRやその他のプライバシー規制にも準拠しています。

モバイルバグレポートにusersNapを使用できますか？ usersNapウィジェットはレスポンシブであり、モバイルデバイスでうまく機能します。これにより、ユーザーはモバイルブラウザからバグを直接報告し、モバイルWebアプリケーションを改善するための貴重なフィードバックを提供できます。視覚的なフィードバックと詳細なブラウザ情報のために、バグの報告と修正により効率的になります。また、さまざまなカスタマイズオプションと人気のあるツールとの統合も提供します。他のツールは同様の機能を提供する可能性がありますが、usersNapのシンプルさと汎用性により、多くのチームにとって好ましい選択肢になります。これには、詳細なドキュメント、APIリファレンス、およびツールを最大限に活用できるようにするための例が含まれます。 usersnapは、あなたが持っている可能性のあるクエリや問題の電子メールサポートも提供します。

以上がusersnapでクライアント側のバグレポートを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。