Статьи

Реализация отчетов об ошибках на стороне клиента с помощью UserSnap

Октябрь 23, 2018

Представьте себе следующий сценарий: ваши клиенты посещают веб-сайт (давайте представим этот ) и видим все, кроме ожидаемого результата. Обычная реакция — позвонить вам (в самое неподходящее время) и попросить исправить это как можно скорее, потому что они теряют деньги.

Как мы можем помочь пользователю сообщить об ошибке максимально точно?

Ошибка

Давайте получим действительно простой запрос JSON и ошибку, чтобы иметь возможность воспроизвести наш случай: 

$json_data = '{"value":1,"apples":2,"name":3,"oranges":4,"last one":5}';

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

$ch = curl_init('http://talkweb.eu/labs/fr/json_callback.php');                                                                 
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                
curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);                                  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                'Content-Type: application/json',                      
        'Content-Length: ' . strlen($json_data)));
                                                                                                             
//the normal CURL request, nothing strange here:
$result = curl_exec($ch);

//receiving the data back
$f_data =  json_decode($result,true);

//showing a greeting with the output
echo  “Welcome”. $f_data['username'];

Если вы посетите тестовый веб-сайт сейчас, вы заметите, что есть проблема.

Вопрос в том, как клиент может сообщить об этом быстрее со всеми данными, необходимыми для борьбы с ошибкой:

  • Данные Json,
  • Ошибки Javascript и XmlHttpsRequest на стороне сервера,
  • Некоторые основные ошибки PHP
  • … и метаданные.

Интересным решением для сбора этой информации является UserSnap. Виджет, который позволяет пользователям отмечать скриншот сайта, на котором они находятся, и отправлять вам все, что есть в консоли JavaScript. Ошибки PHP там не заканчиваются, правда? Давайте сделаем их. Сначала мы соберем ошибки на стороне сервера.

Сбор ошибок

Давайте добавим немного кода в пример, чтобы увидеть, как мы можем собирать нужные нам данные. Представляем действительно простой класс, чтобы помочь нам: 

 <?
class SendToUsersnap
{
    var $m;
    //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.
    function log ( $data, $type ) {
    
        if( is_array( $data ) || is_object( $data ) ) {
            $this->m[]= "console.".$type."('PHP: ".json_encode($data)."');";
        } else {
            $this->m[] = "console.".$type."('PHP: ".$data."');";
        }
    }
  // Print all logs that have been set from the previous function. Let’s keep it simple.
    function  out (){
         for ($i=0;$i<count($this->m);$i++)
          {
              echo $this->m[$i]."\n";
          }
        
        
        }
}

Теперь давайте используем этот класс для записи всех ошибок и журналов, которые нам могут понадобиться. 

 require_once('Usersnap.class.php'); 
    $s = new SendToUsersnap;

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

Передайте это UserSnap

Давайте добавим фрагмент кода UserSnap в конце нашей страницы и посмотрим, что произойдет. (Для использования этого виджета может потребоваться учетная запись. Usersnap предлагает бесплатные лицензии для проектов с открытым исходным кодом и бесплатный период тестирования для коммерческих. 

 <script type="text/javascript">
  (function() {
  var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = '//api.usersnap.com/load/'+
            'your-api-key-here.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  })();

 var _usersnapconfig = {
   loadHandler: function() {
        <?php
    //just print all errors collected from the buffer.
 $s->out(); ?>
     }
 };
</script>

Примечание. Это можно сделать в шаблоне представления в реальной среде, но поскольку здесь мы не используем настоящее приложение MVC, мы пропускаем эту часть.

Пользователь увидит кнопку «сообщить об ошибке» на странице и напишет вам сообщение «это не работает, исправьте это как можно скорее». Как правило, это будет бесполезная информация, но на этот раз мы также прикрепляем этот великолепный журнал ошибок:

A beatiful error log attached to your bug

Теперь вы можете видеть, что инициализация на месте: 

 $s->log('Initializing the JSON request',"info");

Вы можете увидеть данные, которые мы отправим — как обычно 

 $s->log($json_data,"log");

И вы можете увидеть результат. Да, проблема есть. Очевидно, есть проблема с аутентификацией. 

 $s->log($f_data,"log");

Вы можете получить даже основные ошибки PHP, чтобы помочь вам с отладкой. 

 $s->log(error_get_last(),"error");

Вашему клиенту нужно будет всего лишь нажать кнопку один раз, и вы получите все необходимое, чтобы быстрее справиться с ошибкой:

  1. Ошибки и журналы (как показано выше)
  2. Аннотированный скриншот — если проблема сложнее, чем этот простой пример
  3. Размер экрана, версия браузера, ОС и плагины, установленные в браузере

Конечно, вы можете включить эту функцию только тогда, когда она нужна вашему клиенту. Чтобы ограничить доступность виджета, добавьте IP-фильтр или барьер параметров запроса, откройте поддомен dev. * И т. Д.

Вывод

Это не инструмент мониторинга сценариев, и он не будет автоматически доставлять информацию, когда и если возникнет проблема. Этот подход будет работать только в том случае, если пользователь или клиент сообщит об ошибке, а вам, как разработчику или QA, потребуется дополнительная информация о том, как с ней бороться. Представьте, что это удаленный отладчик, но для ошибок на стороне клиента + события и данные, которые вы отправляете из PHP в JavaScript.

Я хотел бы ответить на все ваши вопросы! Оставьте свой отзыв ниже!

36
Share: