🥇JavaScript로 작성된 프런트엔드 애플리케이션에서 Sentry를 사용하여 오류 모니터링: 1부

서비스 보초 다음으로 작성된 프런트엔드 애플리케이션의 버그를 원격으로 모니터링할 수 있습니다. 자바 스크립트.

프런트엔드 애플리케이션의 문제를 해결하려고 합니다. 자바 스크립트 이는 종종 액세스할 수 없는 사용자의 브라우저에서 발생하기 때문에 까다로울 수 있습니다. 하지만, 보초 버그를 원격으로 모니터링할 수 있습니다.

여기에 이 문서에서 설명하는 솔루션을 다운로드할 수 있습니다.

필요한 것

이러한 예제를 사용하려면 다음이 필요합니다.

Node.js를: 애플리케이션의 일부가 아닌 기능이 풍부한 개발 도구입니다. 최신 LTS 버전(8.12.0)을 다운로드했습니다.
보초: Sentry 서비스의 계정(월 최대 10개의 버그를 무료로 기록할 수 있음) 또는 설치된 로컬 Sentry - https://github.com/getsentry/onpremise

서버에 설치

서버에 Sentry On-Premise를 설치하려면 두 가지 방법을 사용할 수 있습니다.

rpm을 빌드하고 설치하십시오 - https://habr.com/ru/post/500632/

공식 설치 프로그램을 사용하세요:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

표준 사용

시작하려면 서비스 웹사이트에서 새 서비스를 추가하세요. 보초-응용 프로그램에 대한 프로젝트입니다. 원하는 언어를 선택하면 해당 문서를 받게 됩니다. 우리의 경우에는 선택했습니다. 자바 스크립트.

첫 번째 예는 표준입니다. 자바 스크립트. 여기에는 두 개의 버튼이 있습니다. "안녕하세요" (안녕하세요) 그리고 "오류" (오류).

버튼을 클릭하신 후 "안녕하세요", 화면이 재부팅되고 차단됩니다. 시도 버그를 감지하고 잡아낼 것입니다. 버그가 "발견"된 후 오류 보고서가 서비스에 수동으로 전송됩니다. 보초.

"오류" 버튼을 사용하면 버그를 쉽게 감지할 수 있습니다.

바닐라/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Hello</button>
  <button id="error">Error</button>
  <div id="output"></div>
  <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      'use strict';
      Sentry.init({ dsn: 'https://[email protected]/1289664' });
      var helloEl = document.getElementById('hello');
      var errorEl = document.getElementById('error');
      var outputEl = document.getElementById('output');
      helloEl.addEventListener('click', handleHelloClick);
      errorEl.addEventListener('click', handleErrorClick);
      function handleHelloClick() {
        outputEl.innerHTML = 'Hello World';
        try {
          throw new Error('Caught');
        } catch (err) {
          Sentry.captureException(err);
        }
      }
      function handleErrorClick() {
        throw new Error('Uncaught');
      }
    })();
  </script>
</body>
</html>

참고 사항 :

Sentry는 CDN에서 설치되어 전역 변수로 노출됩니다.
조금 더 일찍 우리는 JavaScript로 Sentry를 출시했습니다.

이 예를 테스트하기 위해 정적 웹 서버 플랫폼을 사용할 수 있습니다. Node.js를: http 서버. 파일이 저장된 폴더로 이동 index.html 페이지, 다음 줄을 입력(캐싱 비활성화 옵션)하여 브라우저에서 주소를 엽니다. http://localhost:8080.

잡힌 버그가 표시되는 방식

먼저 버튼을 클릭하세요. "안녕하세요".

버그가 발견되어 호출 스택이 팝업되지 않으므로 콘솔에서 모니터링되지 않습니다. 그러나 우리는 다음으로 보내므로 보초 버그를 수동으로 보고하면 계정에 관련 메시지가 표시됩니다.

참고 사항 :

버그가 포함된 행(24)을 추적할 수 있습니다.
또한 이동 경로 추적에는 오류를 발생시킨 브라우저 작업이 표시됩니다.

발견되지 않은 버그가 표시되는 방법

버튼 클릭 "오류".

버그가 호출 스택에 나타나므로 오류 메시지가 콘솔에 표시됩니다. 이후 Sentry는 추가 조치 없이 자동으로 버그를 모니터링합니다.

참고 사항 :

어느 줄(30)에서 버그가 손실되었는지 확인할 수 있습니다.
탐색경로 트레일이 없습니다(이유는 잘 모르겠습니다).

프로젝트 보안을 보장하는 방법

프로젝트에 오류를 보고할 수 있는 페이지를 제어하는 방식을 눈치챘을 것입니다. 보초; 도움을 받아 DSN 기록. 문제는 페이지의 소스 코드를 보는 사람이 입력 내용을 볼 수 있다는 것입니다.

이를 방지하려면 프로젝트에 오류 보고서를 제출할 수 있는 도메인 수를 제한해야 합니다. 이 예에서는 로컬 호스트 (로컬 호스트). 이 옵션은 설정 탭에서 구성됩니다. 보초-프로젝트, 센트리 프로젝트 설정.

릴리스

어떻게 활용할까 생각해보면 보초 애플리케이션의 다양한 변형에서는 버전 번호로 오류를 표시하는 일종의 메커니즘이 필요합니다.

결국 우리는 우리가 고친 버그가 다시 나타나는 것을 원하지 않으며, 우리가 고친 것이 작동하지 않았다고 생각합니다. 또한 사용자가 캐시된 이전 버전의 애플리케이션을 실행했을 수도 있습니다.

문제를 해결하려면 식별자를 입력해야 합니다. 석방하다 (버전) 시작 시 보초.

바닐라/index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://[email protected]/1289664',
  release: RELEASE,
});
...

이후에는 모든 새로운 오류가 다음과 같이 표시됩니다. 릴리스 (0.1.0)즉, 올바른 버전의 코드에 연결됩니다.

참고 사항 :

우리는 릴리스를 사용하는 간단한 방법을 알아냈습니다.
Sentry를 사용하면 더 많은 것을 사용할 수 있습니다 복잡한 그들의 의 사용, 이는 와 밀접한 관련이 있습니다. GitHub의. 이 기능을 사용하면 특정 작업을 수행하기 전에 버그를 추적할 수 있습니다.

PS XNUMX부는 내용이 길어서 따로 포스팅하겠습니다.

PS 텔레그램 채팅 센트리 https://t.me/sentry_ru

PS 나는 이것이 게시물의 번역임을 표시하는 것을 잊었습니다. https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

출처 : habr.com

JavaScript로 작성된 프런트엔드 애플리케이션에서 Sentry를 사용하여 오류 모니터링: 1부

코멘트를 추가 답장을 취소