UsersNap을 사용하여 클라이언트 측 버그보고를 구현하십시오

키 테이크 아웃

usernap은 스크린 샷을 표시하고 JavaScript 콘솔에서 모든 데이터를 전송하여 웹 사이트에서 직접 버그를보고 할 수있는 도구입니다. 버그보고 및 해결을 신속하게하기 위해 고객의 웹 사이트에 통합 될 수 있습니다. 개발자는 또한 UsersNap을 사용하여 서버 측 오류 및 로그를 수집 할 수도 있습니다. 간단한 클래스를 사용하면 디버깅에 필요한 모든 오류와 로그를 녹음 할 수 있으며, 이로 인해 UsersNap에 전달 될 수 있습니다. 이를 통해 더 빠르고 효율적인 버그 수정이 가능합니다 usernap은 화면 크기, 브라우저 버전, OS 및 설치된 브라우저 플러그인과 같은 추가 정보도 제공합니다. 이 기능은 필요할 때만 켜질 수 있으며 IP 필터링 또는 Dev.* subdomain과 같은 방법을 통해 가용성이 제한 될 수 있습니다.

다음 시나리오를 상상해보십시오. 고객이 웹 사이트를 방문하고 (이것을 상상하자) 예상 결과 외에는 아무것도보십시오. 정상적인 반응은 (가장 부적절한시기에) 전화를 걸어 돈을 잃고 있기 때문에 최대한 빨리 고치라고 요청하는 것입니다.

. 사용자가 버그를 가능한 한 정확하게보고하는 데 어떻게 도움이 될 수 있습니까?

버그 정말 간단한 JSON 요청과 우리의 사례를 재현 할 수있는 오류를 보자.
• 지금 테스트 웹 사이트를 방문하면 문제가 있음을 알게 될 것입니다.
질문은 - 버그와 싸우는 데 필요한 모든 데이터를 통해 클라이언트가 어떻게 더 빨리보고 할 수 있습니까?
• JSON 데이터, 서버 측 JavaScript 및 XmlhttpsRequest 오류,

  일부 핵심 PHP 오류

이 정보를 수집하기위한 흥미로운 솔루션은 UsersNap입니다. 사용자가 사이트의 스크린 샷을 표시하고 JavaScript 콘솔에있는 모든 것을 보내주는 위젯. 그러나 PHP 오류는 끝나지 않습니까? 그들을 만들어 봅시다. 먼저 서버 측 오류를 수집합니다 수집 오류 필요한 데이터를 수집 할 수있는 방법을보기 위해 예제에 더 많은 코드를 추가하겠습니다. 우리를 도울 수있는 정말 간단한 수업을 소개합니다 :

이제이 클래스를 사용하여 필요한 모든 오류와 로그를 기록해 봅시다.

usersnap 에 전달하십시오 페이지 끝에 사용자nap 코드 스 니펫을 추가하고 어떻게되는지 확인해 보겠습니다. (이 위젯을 사용하려면 계정이 필요할 수 있습니다. UsersNap은 오픈 소스 프로젝트에 대한 무료 라이센스와 상업용 무료 테스트 기간을 제공합니다.

참고 : 실제 프레임 워크의 뷰 템플릿 에서이 작업을 수행하지만 여기에서 실제 MVC 앱을 사용하지 않으므로 해당 부분을 건너 뜁니다.

. 사용자는 페이지에 "보고서 버그"버튼을보고 "작동하지 않고 최대한 빨리 수정"과 같은 메시지를 작성합니다. 일반적으로 이것은 쓸모없는 정보이지만 이번에는이 화려한 오류 로그가 첨부됩니다.

이제 초기화가 있음을 알 수 있습니다.

당신은 우리가 보낼 데이터를 볼 수 있습니다 - 평소와 마찬가지로

그리고 출력을 볼 수 있습니다. 예, 문제가 있습니다. 분명히 인증 문제가 있습니다.

핵심 PHP 오류조차도 디버깅에 도움이 될 수 있습니다.

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

클라이언트는 버튼을 한 번만 클릭하면 버그를 더 빨리 싸우는 데 필요한 모든 것을 얻게됩니다.

오류 및 로그 (위와 같이) 주석이 달린 스크린 샷 - 문제 가이 간단한 예보다 더 복잡한 경우
스크린 크기, 브라우저 버전, OS 및 브라우저에 설치된 플러그인

물론 클라이언트가 필요할 때만이 기능을 켜면이 기능을 켜면이 기능이 켜질 수 있습니다. 위젯의 가용성을 제한하려면 IP 필터 또는 쿼리 매개 변수 배리어를 추가하고 Dev.* subdomain 등을 엽니 다.

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

결론 이것은 스크립트 모니터링 도구가 아니며 문제가 나타나는 경우 및 경우 정보를 자동으로 전달하지 않습니다. 이 접근법은 사용자 나 클라이언트가 버그를보고하고 개발자 또는 QA가 버그와 싸우는 방법에 대한 더 많은 정보가 필요한 경우에만 작동합니다. 원격 디버거로 상상하지만 클라이언트 측 오류 이벤트 및 데이터는 PHP에서 JavaScript로 보내는 데이터를 상상해보십시오. 나는 당신의 모든 질문에 답하고 싶습니다! 아래에 피드백을 남겨주세요! usersnap 에 대한 질문 (FAQ)은 자주 묻습니다. 클라이언트 측 버그보고에 대한 사용자nap은 어떻게 작동합니까?

usernap은 사용자가 웹 애플리케이션에서 직접 버그를보고 할 수있는 시각적 버그 추적 도구입니다. 중요한 브라우저 정보와 함께 문제의 스크린 샷을 캡처 한 후 개발 팀에 전송됩니다. 이를 통해 앞뒤 커뮤니케이션의 필요성을 제거하고 버그 수정 프로세스 속도를 높입니다. 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>

사용자nap의 주요 기능은 무엇입니까?

사용자nap은 강력하게 만드는 몇 가지 주요 기능을 제공합니다. 버그보고 도구. 여기에는 스크린 샷 캡처, 브라우저 정보 수집, 콘솔 로그 녹음 및 사용자 피드백 수집이 포함됩니다. 또한 Slack, Jira 및 Trello와 같은 인기있는 도구와 통합을 제공합니다. 또한 사용자nap은 다른 시스템과의 추가 사용자 정의 및 통합을위한 API를 제공합니다. usernap을 내 웹 응용 프로그램에 통합하려면 어떻게해야합니까?

usernap을 웹 애플리케이션에 통합하는 것이 간단합니다. UsersNap 계정에 가입하고 새 프로젝트를 작성한 다음 제공된 JavaScript 코드를 웹 응용 프로그램에 추가해야합니다. 이 코드는 응용 프로그램에 사용자nap 위젯을로드하여 사용자가 버그를 직접보고 할 수 있습니다.

usersnap 위젯을 사용자 정의 할 수 있습니까?

예, UsersNap은 위젯에 대한 다양한 사용자 정의 옵션을 제공합니다. 브랜드와 일치하도록 위젯의 색상, 텍스트 및 위치를 변경할 수 있습니다. 피드백 양식을 사용자 정의하여 사용자로부터 특정 정보를 수집 할 수도 있습니다. 이 모든 것은 UsersNap 대시 보드 또는 API를 통해 수행 할 수 있습니다.

사용자 나 맵은 내 웹 애플리케이션의 품질을 향상시키는 데 어떻게 도움이됩니까?

사용자가보고 할 수있는 간단하고 효율적인 방법을 제공함으로써 버그, usersNap은 문제를 더 빨리 식별하고 수정하는 데 도움이됩니다. 시각적 피드백과 자세한 브라우저 정보는 개발 팀이 문제를 쉽게 이해하고 재현하는 데 도움이됩니다. 이로 인해 버그 수정 및 개선이 더 빠르면 웹 애플리케이션의 전반적인 품질이 향상됩니다.

사용자nap API는 무엇이며 어떻게 사용할 수 있습니까?

사용자nap API는 일련의 세트입니다. 프로그래밍 방식으로 사용자와 상호 작용할 수있는 인터페이스 프로그래밍 인터페이스. API를 사용하여 프로젝트를 작성, 업데이트 및 관리 할 수있을뿐만 아니라 UsersNap 위젯을 사용자 정의 할 수 있습니다. API는 편안하고 표준 HTTP 메소드를 사용하여 기존 시스템과 쉽게 통합 할 수 있습니다.

사용자nap은 사용자 개인 정보를 어떻게 처리합니까?

usersnap은 사용자 개인 정보를 심각하게 받아들입니다. 이 도구는 동의없이 사용자 활동을 추적하거나 개인 데이터를 수집하지 않습니다. 수집 된 모든 데이터는 안전하게 저장되며 버그보고 목적으로 만 사용됩니다. usernap은 또한 GDPR 및 기타 개인 정보 보호 규정을 준수합니다.

모바일 버그보고에 UsersNap을 사용할 수 있습니까?

예, UsersNap은 모바일 버그보고를 지원합니다. UsersNap 위젯은 반응이 좋으며 모바일 장치에서 잘 작동합니다. 이를 통해 사용자는 모바일 브라우저에서 직접 버그를보고 할 수 있으므로 모바일 웹 애플리케이션을 개선하기위한 귀중한 피드백을 제공합니다.

usernap은 다른 버그보고 도구와 어떻게 비교됩니까? usersnap이 눈에 띄게됩니다. 시각적 피드백과 자세한 브라우저 정보는 버그보고 및 수정을보다 효율적으로 만들 수 있습니다. 또한 다양한 사용자 정의 옵션과 인기있는 도구와의 통합을 제공합니다. 다른 도구는 유사한 기능을 제공 할 수 있지만 UsersNap의 단순성과 다양성은 많은 팀에게 선호하는 선택입니다.

사용자nap은 어떤 지원을 제공합니까?

usersnap은 사용자에게 포괄적 인 지원을 제공합니다. 여기에는 자세한 문서, API 참조 및 도구를 최대한 활용하고 최대한 활용하는 데 도움이되는 예제가 포함됩니다. usernap은 또한 당신이 가질 수있는 모든 쿼리 또는 문제에 대한 이메일 지원을 제공합니다.

위 내용은 UsersNap을 사용하여 클라이언트 측 버그보고를 구현하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!