Chrome 확장 중 오류 추적
다행히도 크롬 확장에 추가할 수 있는 오류 기록 서비스가 아주 많습니다.
서비스 선택
첫 번째 단계는 당신이 어떤 서비스를 사용하고 싶은지 찾아내는 것이다.무수한 오류 감시와 보고 도구가 있기 때문에 나는 당신이 연구할 수 있는 도구를 열거해서 어떤 것이 당신의 요구에 적합한지 볼 것입니다.여기에는 다음이 포함됩니다.
입문
우선 Sentry 대시보드에 들어가서 새 프로젝트를 만듭니다.항목 페이지의 오른쪽 상단에서 이 단추를 찾을 수 있습니다.
다음은 프로젝트 유형으로 브라우저 Javascript를 선택하겠습니다.확장자가 NPM 또는 Yarn (즉, React 등을 사용하여 구축 중) 을 사용하는 경우 간단한 Javascript 를 선택해야 합니다. NPM 패키지를 설치하도록 안내하기 때문입니다.대부분의 공급자에게도 이와 유사한 기본 JavaScript 변형이 있어야 합니다.프로젝트를 만들면 다음과 같은 스크립트를 추가하기 위한 설명이 제공될 수 있습니다.
<script
src="https://browser.sentry-cdn.com/5.23.0/bundle.min.js"
integrity="sha384-5yYHk2XjpqhbWfLwJrxsdolnhl+HfgEnD1UhVzAs6Kd2fx+ZoD0wBFjd65mWgZOG"
crossorigin="anonymous"
></script>
init 함수는 다음과 같이 보입니다.Sentry.init({ dsn: 'my-sentry-dsn-here' });
이 간단한 연습을 실현하기 위해서 우리는 다음 절에서 첫 번째 방법을 소개할 것이다.
분산에 추가
먼저 3개의 파일을 포함하는 새로운 예시 확장자를 만듭니다.
manifest.json, index.html, scripts.js입니다.manifest.json: 확장 목록 파일 index.html: scripts.js: 저희가 페이지에 불러온 스크립트입니다. Sentry를 초기화하는 것 외에 전체적인 확장 논리도 포함됩니다. manifest.json 파일은 다음과 같습니다.{
"manifest_version": 2,
"name": "Error Tracking Example",
"version": "1.0.0",
"browser_action": {
"default_popup": "index.html",
"default_title": "Open Popup"
},
"content_security_policy": "script-src 'self' https://browser.sentry-cdn.com; object-src 'self'"
}
content_security_policy 부분에서 우리의 Sentry 스크립트를 불러오고 소스 간 통신을 할 수 있다는 것이다.기본적으로 Chrome 확장은 잠재적인 크로스 사이트 스크립트 공격을 줄이기 위해 모든 크로스 소스 요청을 비활성화합니다.이런 상황에서 우리는 크롬에게 우리가 특정한 보초병의 출처에서 불러오고 싶다는 것을 알게 했다.자세한 내용은 click here으로 문의하십시오.index.html 파일은 다음과 같습니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Error Tracking Example</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<p>Hello World!</p>
<script
src="https://browser.sentry-cdn.com/5.23.0/bundle.min.js"
integrity="sha384-5yYHk2XjpqhbWfLwJrxsdolnhl+HfgEnD1UhVzAs6Kd2fx+ZoD0wBFjd65mWgZOG"
crossorigin="anonymous"
></script>
<script src="scripts.js"></script>
</body>
</html>
scripts.js 파일은 다음과 같이 보입니다.// Init sentry
Sentry.init({ dsn: 'my-dsn-here' });
// Call a random, undefined function. This will cause an error
myUndefinedFunction();
테스트
현재 테스트 확장 설정이 있습니다.
chrome://extensions/으로 이동하여 개발자 모드를 사용하도록 하십시오.다음으로 포장되지 않은 확장을 로드하고 브라우저 모음에서 확장 아이콘 을 클릭합니다.
chrome://extensions/으로 다시 이동하면 로컬 확장에 오류가 발생했습니다.만약 우리가 오류 감시를 하지 않았다면, 사용자는 이런 상황을 만났을 것이다. 우리는 그것이 발생했는지 몰랐을 뿐만 아니라, 그들이 우리에게 필요한 정보를 제공하지 않는 한 그것을 복제할 수 없었을 것이다.
이것은 우리가 그것을 복구하려고 시도하기 전에 인터넷 상점에 대한 부정적인 평론을 초래할 수 있기 때문에 그다지 좋지 않다.다행히도 여기에서 오류 처리가 소개되었다.
그것의 운행 상황을 보기 위해서, 우리는 Sentry 대시보드로 돌아가서, 이 오류가 포착되어 우리에게 발송되었는지 확인할 수 있습니다.모든 것이 순조롭다면 다음과 같은 내용을 볼 수 있을 것입니다.
이 문제를 클릭하면 오류가 발생한 곳, 사용자의 크롬 버전, 운영체제 유형 등 더 많은 정보를 볼 수 있습니다. 이 정보는 문제를 해결하는 데 도움을 줄 수 있는 배경을 제공할 수 있습니다.
최종 주석
앞에서 설명한 바와 같이, 이 예는 확장에 HTML 페이지가 있다고 가정하지만, 모든 확장이 이렇게 작동하는 것은 아닙니다.확장자가 출력할 HTML 페이지가 없거나, HTML 페이지에서 인용한 스크립트 이외에 오류 추적을 해야 한다면, 스크립트 태그와 init Sentry를 주입하는 배경 스크립트를 포함해야 합니다.이것은 두 가지 부분이 필요합니다. 목록을 업데이트하여 새로운 배경 스크립트를 인용하고 초기화를 배경 스크립트 자체에 추가합니다.
또 하나는 CDN을 통해 보초 창고가 포함됐다는 점이다.오류 추적 도구의 원본 코드를 다운로드하여 확장자와 묶으면 이러한 상황을 피할 수 있지만, 예를 들어 파일이 새 버전이 발표될 때 최신을 유지해야 한다는 도전이 생길 수 있습니다. (최신의Sentry 코드를 사용하여 웹 상점으로 확장자를 업데이트해야 할 수도 있습니다.)
Chrome 확장 환경에서 오류 처리에 대한 기본 설명을 제공하여 확장이 미래에 모든 사용자에게 순조롭게 실행될 것이라고 믿을 수 있기를 바랍니다.
만약 당신에게 무슨 문제가 있으면 언제든지 저에게 연락 주세요.그 밖에 저는 ChromeExtensionKit을 만들었습니다. 이것은 크롬의 확장 개발과 성장 과정을 간소화하는 데 도움을 주는 도구 패키지입니다. 마음대로 보십시오!
Reference
이 문제에 관하여(Chrome 확장 중 오류 추적), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rfitz/error-tracking-in-chrome-extensions-38j2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
