Melaksanakan pelaporan pepijat pelanggan dengan usernap

Takeaways Key

UsersNap adalah alat yang membolehkan pengguna melaporkan pepijat terus dari laman web dengan menandakan tangkapan skrin dan menghantar semua data dalam konsol JavaScript. Ia boleh diintegrasikan ke laman web pelanggan untuk mempercepat pelaporan dan resolusi pepijat.
Pemaju juga boleh menggunakan UserNap untuk mengumpulkan kesilapan dan log sisi pelayan. Dengan menggunakan kelas yang mudah, mereka boleh merakam semua kesilapan dan balak yang diperlukan untuk debugging, yang kemudiannya boleh dihantar ke UserNap. Ini membolehkan pembetulan pepijat yang lebih cepat dan lebih cekap.
UsersNap juga menyediakan maklumat tambahan seperti saiz skrin, versi penyemak imbas, OS, dan plugin pelayar yang dipasang. Ciri ini boleh dihidupkan hanya apabila diperlukan, dan ketersediaannya boleh dibatasi melalui kaedah seperti penapisan IP atau membuka dev.* Subdomain.

Bayangkan senario berikut: Pelanggan anda melawat laman web (mari kita bayangkan yang satu ini) dan lihat apa -apa tetapi hasil yang diharapkan. Reaksi biasa adalah memanggil anda (pada masa yang paling tidak sesuai) dan meminta anda untuk memperbaikinya ASAP, kerana mereka kehilangan wang.

bagaimana kita dapat membantu pengguna melaporkan pepijat sebaik mungkin?

bug

mari kita mempunyai permintaan JSON yang sangat mudah dan ralat untuk dapat menghasilkan semula kes kita:

<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>

Jika anda melawat laman web ujian sekarang, anda akan melihat bahawa ada masalah.

Soalannya - bagaimana pelanggan dapat melaporkannya lebih cepat dengan semua data yang anda perlukan untuk melawan bug:

data json,
javascript sisi pelayan dan kesilapan xmlhttpsrequest,
beberapa kesilapan PHP teras
... dan data meta.

Penyelesaian yang menarik untuk mengumpulkan maklumat ini adalah UserNap. Widget yang membolehkan pengguna anda menandakan tangkapan skrin laman web yang mereka lakukan dan menghantar semua yang ada di konsol JavaScript. Kesalahan PHP tidak berakhir di sana, walaupun, adakah mereka? Mari buat mereka. Pertama, kami akan mengumpulkan ralat sampingan pelayan.

mengumpul kesilapan

Mari tambahkan lebih banyak kod kepada contoh untuk melihat bagaimana kita dapat mengumpul data yang kita perlukan. Memperkenalkan kelas yang sangat mudah untuk membantu kami:

<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>

Sekarang mari kita gunakan kelas ini untuk merakam semua kesilapan dan log yang kita perlukan.

lulus ke usernap

<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>

Mari tambahkan coretan kod pengguna di hujung halaman kami dan lihat apa yang berlaku. (Anda mungkin memerlukan akaun untuk menggunakan widget ini. UsersNap menawarkan lesen percuma untuk projek sumber terbuka dan tempoh ujian percuma untuk yang komersial.

NOTA: Anda akan melakukan ini dalam templat paparan dalam rangka kerja sebenar, tetapi kerana kami tidak menggunakan aplikasi MVC sebenar di sini, kami melangkau bahagian itu.

<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>

Pengguna akan melihat butang "Laporan Bug" pada halaman dan akan menulis mesej seperti "Ia tidak berfungsi, memperbaikinya ASAP". Umumnya, ini akan menjadi maklumat yang tidak berguna, tetapi kali ini, kami mendapat log ralat cantik ini juga:

Sekarang anda dapat melihat bahawa terdapat permulaan di tempat:

<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>

anda dapat melihat data yang akan kami hantar - sama seperti biasa

<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>

dan anda dapat melihat output. Ya, masalahnya ada. Jelas ada masalah auth.

<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>

anda boleh mendapatkan kesilapan PHP teras untuk membantu anda dengan debugging.

<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>

pelanggan anda hanya perlu mengklik butang sekali dan anda akan mendapat semua yang anda perlukan untuk melawan bug lebih cepat:

ralat dan log (seperti yang ditunjukkan di atas)
tangkapan skrin anotasi - jika masalahnya lebih kompleks daripada contoh mudah ini
saiz skrin, versi penyemak imbas, OS dan plugin yang dipasang di penyemak imbas

Sudah tentu anda boleh menghidupkan ciri ini hanya apabila pelanggan anda memerlukannya. Untuk mengehadkan ketersediaan widget, tambahkan penapis IP atau penghalang param pertanyaan, buka dev.* Subdomain, dan lain -lain

Kesimpulan

Ini bukan alat pemantauan skrip dan tidak akan memberikan maklumat secara automatik apabila dan jika masalah itu muncul. Pendekatan ini akan berfungsi hanya jika pengguna atau pelanggan melaporkan pepijat dan anda sebagai pemaju atau QA memerlukan lebih banyak maklumat tentang cara melawan bug. Bayangkan ia sebagai debugger jauh, tetapi untuk peristiwa dan data kesilapan pelanggan yang anda hantar dari PHP ke JavaScript.

Saya suka menjawab semua soalan anda! Tinggalkan maklum balas anda di bawah!

Soalan Lazim (Soalan Lazim) Mengenai Pelaporan Pepijat Side Pelanggan dengan UserNap

Bagaimanakah pengguna berfungsi untuk pelaporan pepijat klien? Ia berfungsi dengan menangkap tangkapan skrin isu bersama dengan maklumat penyemak imbas penting, yang kemudiannya dihantar ke pasukan pembangunan. Ini menghapuskan keperluan untuk komunikasi back-and-forth dan mempercepatkan proses penetapan pepijat. UsersNap juga mengintegrasikan dengan alat pengurusan dan komunikasi projek yang popular, menjadikannya penyelesaian yang serba boleh untuk pelbagai pasukan. alat untuk pelaporan pepijat. Ini termasuk penangkapan tangkapan skrin, pengumpulan maklumat penyemak imbas, rakaman log konsol, dan koleksi maklum balas pengguna. Ia juga menawarkan integrasi dengan alat popular seperti Slack, Jira, dan Trello, antara lain. Di samping itu, UsersNap menyediakan API untuk penyesuaian dan integrasi selanjutnya dengan sistem lain.

Bagaimana saya boleh mengintegrasikan pengguna ke dalam aplikasi web saya?

Mengintegrasikan UserNap ke dalam aplikasi web anda adalah mudah. Anda perlu mendaftar untuk akaun UsersNap, membuat projek baru, dan kemudian tambahkan kod JavaScript yang disediakan ke aplikasi web anda. Kod ini akan memuatkan widget pengguna pada aplikasi anda, yang membolehkan pengguna melaporkan pepijat secara langsung.

Bolehkah saya menyesuaikan widget pengguna? Anda boleh menukar warna, teks, dan kedudukan widget untuk memadankan jenama anda. Anda juga boleh menyesuaikan borang maklum balas untuk mengumpul maklumat khusus dari pengguna anda. Semua ini boleh dilakukan melalui papan pemuka pengguna atau melalui API. Bugs, UsersNap membantu anda mengenal pasti dan membetulkan isu lebih cepat. Maklum balas visual dan maklumat penyemak imbas terperinci membantu pasukan pembangunan anda memahami dan menghasilkan semula isu -isu dengan mudah. Ini membawa kepada pembetulan dan penambahbaikan pepijat yang lebih cepat, dengan itu meningkatkan kualiti keseluruhan aplikasi web anda. Antara muka pengaturcaraan yang membolehkan anda berinteraksi dengan UserNap secara programatik. Anda boleh menggunakan API untuk membuat, mengemas kini, dan menguruskan projek, serta menyesuaikan widget UserNap. API adalah tenang dan menggunakan kaedah HTTP standard, menjadikannya mudah untuk diintegrasikan dengan sistem anda yang sedia ada. Alat ini tidak menjejaki aktiviti pengguna atau mengumpul data peribadi tanpa persetujuan. Semua data yang dikumpulkan disimpan dengan selamat dan hanya digunakan untuk tujuan pelaporan pepijat. UsersNap juga mematuhi GDPR dan peraturan privasi lain.

Bolehkah saya menggunakan UsersNap untuk pelaporan pepijat mudah alih? Widget UserNap responsif dan berfungsi dengan baik pada peranti mudah alih. Ini membolehkan pengguna anda melaporkan pepijat terus dari pelayar mudah alih mereka, memberikan anda maklum balas yang berharga untuk meningkatkan aplikasi web mudah alih anda. Untuk maklum balas visual dan maklumat penyemak imbas terperinci, yang membuat pelaporan pepijat dan penetapan lebih cekap. Ia juga menawarkan pelbagai pilihan penyesuaian dan integrasi dengan alat yang popular. Walaupun alat lain mungkin menawarkan ciri -ciri yang sama, kesederhanaan dan fleksibiliti UserNap menjadikannya pilihan pilihan untuk banyak pasukan. Ini termasuk dokumentasi terperinci, rujukan API, dan contoh untuk membantu anda memulakan dan memanfaatkan sepenuhnya alat ini. UsersNap juga menyediakan sokongan e -mel untuk sebarang pertanyaan atau isu yang mungkin anda miliki.

Atas ialah kandungan terperinci Melaksanakan pelaporan pepijat pelanggan dengan usernap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!