Sematext Browser SDK를 사용한 프런트엔드 성능 모니터링 시작

전 세계가 장기적으로 사용한 후에 볼 수 있는 코드 라이브러리를 개발하는 것은 좋은 경험이다.너는 너의 사용자가 무엇을 원하는지 관심을 가져야 한다.당신은 당신의 사용자가 당신의 제품을 사용할 때 좋은 체험을 하기를 바랍니다.모든 것을 적절하게 안배해야 한다.성능, 응답 능력, 사용자 체험 등이 모두 매우 훌륭해야 한다.이것이 바로 내가 전단 성능 지표가 매우 중요하다고 생각하는 이유다.

프런트엔드 성능을 향상시키려면 어떤 지표를 모니터링해야 합니까?

너는 너의 page load times가 얼마나 빠른지 알고 싶다(또는 느리다!)HTTP 요청은 입니다.DOM 요소의 Apdex 분수를 측정해야 합니다.최대 내용 그리기(Maximum contentful paint)와 같은 사용자 중심의 성능 지표는 페이지 로드 성능을 평가하고, 첫 번째 입력 지연은 상호작용을 평가하며, 누적 레이아웃 변화는 웹 응용 프로그램의 시각적 안정성에 대한 정보를 제공합니다.Tips and tricks about how to optimize website performance에서 이 지표에 대한 정보를 더 많이 읽을 수 있습니다.
그러나 이것들은 단지 기본적인 예일 뿐이다.
Sematext Browser SDK를 사용하면 더욱 복잡한 모니터링 솔루션을 실현하고 실제 브라우저의 실제 사용자로부터 필요한 정확한 지표를 실시간으로 수집할 수 있습니다.와, 한 마디에 이렇게 많은'real'의 용법이 있다니!하나 더 하실래요?What is Real User Monitoring ? 또 하나?5 Best Practices for Real User Monitoring . 밤새 이러고 있을 수 있어.

Sematext Browser SDK를 사용한 프런트엔드 성능 모니터링

Sematext에서 소스 오픈 프로젝트를 진행할 때 우리는 코드 라이브러리를 보는 것이 얼마나 중요한지 알게 되었다.솔루션을 보다 잘 이해하고 원하는 대로 편집할 수 있습니다.이 제품을 사용하는 지역사회에서 공헌자와 오류 복구를 받을 때도 가치가 있습니다.
이것이 바로 우리가 개원한 이유Sematext Browser SDK의 원인이다.도서관은 우리Sematext Experience의 데이터 수집에 동력을 제공했다.이제 Github에서 Apache 2.0 라이센스를 사용할 수 있습니다.이것은 SDK가 어떻게 지표를 수집하는지, 데이터를 Sematext Cloud, 저희 cloud monitoring solution 에게 어떻게 보내는지, 원하시면 스크립트 자체를 수정할 수 있음을 의미합니다.

개시하다

Sematext 브라우저 SDK를 사용하려면 Github에 액세스하여 복제합니다.이 프로젝트는 ECMAScript 2015를 사용하여 개발하고 다음과 같은 다양한 도구를 사용합니다.

npm 패키지 매니저

사선 패키지 의존 관계 관리자

유량 정적 유형 탐지기

측백나무.io 통합 테스트 프레임워크

SDK 맞춤형 구성 예

Sematext 브라우저 SDK의 오픈소스가 새로운 가능성을 가져왔다.웹 사이트나 웹 응용 프로그램에 대한 스크립트의 역할을 볼 수 있을 뿐만 아니라 체험 스크립트의 행동도 수정할 수 있습니다.
다음과 같은 몇 가지 예제 수정 사항이 포함되어 있지만 이에 국한되지는 않습니다.

페이지 로드 및 백그라운드에서 발생한 HTTP 요청 포함

사용자가 Ctrl+F5

를 사용할 때 보내는 리셋으로 인한 페이지 리셋을 기록합니다

일부 데이터를 보내는 것을 피한다. 원소의 시간, 네트워크의 관건 또는 사용에 관한 정보를 수집하고 싶지 않니?할 수 있어!

URL의 해석 방식을 변경하고 일부 내용을 생략합니다(예를 들어 URL의 조회 부분

.
다음은 소스 소스의 Sematext Browser SDK를 사용하는 방법에 대한 예일 뿐입니다.
그중의 맞춤형 제작을 봅시다.예를 들어 tos는 백엔드에서 발생하는 페이지 불러오기와 HTTP 요청을 데이터로 Sematext Experience, 우리real user monitoring tool에 어떻게 보냅니다.

백그라운드에 페이지 로드 및 HTTP 요청을 포함하는 방법

기본적으로 웹 브라우저의 탭이 백그라운드에 있을 때 Sematext Browser SDK는 페이지 로드 탐지, HTTP 요청, 요소 타이머 지표를 정지합니다.그걸 포함시키고 싶을 수도 있어.다음은 네가 어떻게 한 것이냐?
index.js 파일에서 시작합니다.스크립트가 시작되는 동안, 이른바 DocumentVisibility Observer를 만들었습니다. 도량 수집 메커니즘의 내용이 보이는지 숨겨지는지 알려 줍니다.코드는 다음과 같습니다.

const visibilityObserver = new DocumentVisibilityObserver();
const pageLoadDispatcher = new PageLoadDispatcher();
const ajaxDispatcher = new AjaxDispatcher();
const elementTimingDispatcher = new ElementTimingDispatcher();

visibilityObserver.addListener(pageLoadDispatcher);
visibilityObserver.addListener(ajaxDispatcher);
visibilityObserver.addListener(elementTimingDispatcher);

PageLoadDispatcher, AjaxDispatcher, ElementTimingDispatcher는 명령을 만들고 메트릭을 발송합니다.인스턴스를 작성한 후 작성된 DocumentVisibilityObserver에 추가합니다.

visibilityObserver.addListener(pageLoadDispatcher);
visibilityObserver.addListener(ajaxDispatcher);
visibilityObserver.addListener(elementTimingDispatcher);

페이지가 백그라운드에 있을 때 페이지 부하, HTTP 요청과 요소 시간 지표를 계속 측정하려면 위의 코드를 삭제해야 합니다.그게 다야.물론 코드를 지우고 DocumentVisibility Observer를 완전히 삭제할 수 있지만, 우리의 생활을 복잡하게 하지 말고, 한 번에 한 번만 변경할 수 있습니다.

체험 스크립트 구축 방법

일단 이러한 변화에 만족한다면 다음과 같은 몇 가지를 해야 한다.

코드가 실크 벨벳을 운행하여 벨벳을 전달하는지 검사한다.

방사선 흐름 검사를 통해 코드가 정적 형식 검사를 통과했는지 확인합니다.

사선 e2e 운행을 통해 통합 테스트가 통과되었는지 확인한다.

만약 모든 것이 정상이라면, 너는 달리기를 할 수 있다.

$ yarn build

출력은 다음과 유사해야 합니다.

➜ browser-sdk git:(master) ✗ yarn build
yarn run v1.22.5
$ webpack --mode production
Hash: 801dbe739470081f7282
Version: webpack 4.44.1
Time: 1885ms
Built at: 10/13/2020 5:05:23 PM
 Asset Size Chunks Chunk Names
 experience.js 135 KiB 0 [emitted] main
experience.js.LICENSE.txt 1.6 KiB [emitted]
Entrypoint main = experience.js
 [0] ./src/common.js 9.38 KiB {0} [built]
 [2] ./src/CommandExecutor.js 2.07 KiB {0} [built]
 [6] ./src/element/utils.js 4.41 KiB {0} [built]
 [8] ./src/constants.js 1.03 KiB {0} [built]
 [34] ./src/index.js 3.6 KiB {0} [built]
 [88] ./src/dispatchers/PageLoadDispatcher.js 5.02 KiB {0} [built]
 [93] ./src/RumUploader.js 9.09 KiB {0} [built]
 [95] ./src/bootstrap.js 3.37 KiB {0} [built]
 [96] ./src/dispatchers/AjaxDispatcher.js 3.6 KiB {0} [built]
 [97] ./src/ajax/xhr.js 1.52 KiB {0} [built]
 [98] ./src/ajax/fetch.js 1.81 KiB {0} [built]
 [99] ./src/DocumentVisibilityObserver.js 2.32 KiB {0} [built]
[100] ./src/dispatchers/ElementTimingDispatcher.js 3.04 KiB {0} [built]
[101] ./src/dispatchers/WebVitalsDispatcher.js 2.43 KiB {0} [built]
[103] ./src/dispatchers/MemoryUsageDispatcher.js 2.91 KiB {0} [built]
 + 90 hidden modules
✨ Done in 3.21s.

이것은 체험 스크립트를 사용할 수 있고 체험을 찾을 수 있다는 것을 의미한다.프로젝트의 dist 디렉터리에 있는 js 파일입니다.
Sematext Browser SDK 동작을 수정하고 자체 버전을 구축했기 때문에 사용자 정의 체험을 불러와야 합니다.js 파일.응용 프로그램이나 웹 페이지와 함께 관리할 수도 있고, Cloudflare와 같은 어떤 CDN에 전송할 수도 있습니다.
완료되면 다음을 추가하지 마십시오.

(window,document,"script","//cdn.sematext.com/experience.js","strum");

프로그램이나 웹 페이지의 머리 부분까지 수정 파일의 위치를 지정하기만 하면 됩니다.예를 들어 수정된 체험을 주관하는 경우.js 파일이 참 좋아요.사이트com:

(window,document,"script","https://awesome.website.com/experience.js","strum");

사용자 정의 스크립트를 사용하여 전단 지표를 Sematext 체험에 보내면, 수시로 Sematext 브라우저인 SDK repo에서 변경 사항을 추출하고 복제된 리포와 통합하기를 원할 수도 있습니다.이러한 방식을 통해 귀하는 개선, 오류 수리, 또는 경험에서 수집하고 공개하는 추가 데이터를 얻을 수 있습니다.

다음 단계

Sematext Browser SDK를 사용하여 체험 스크립트를 수정하는 것은 복잡하지 않으며 필요에 따라 조정할 수 있습니다.우리는 당신이 이 코드들을 시험하고 실험하도록 격려합니다.
체험 스크립트에 대한 자세한 정보를 원하신다면 정부dedicated documentation 페이지에서 Sematext docs를 보시기 바랍니다.Github에서 지원되는 명령, 글로벌 상수 및 설치 지침 목록을 확인할 수 있습니다.
우리는 문제, 건의, 개선, 잠재적인 복구를 기꺼이 받아들인다.언제든지 Github 문제를 해결하거나 개선 요청을 할 수 있습니다.어쨌든 우리는 너를 위해 한 것이다🙂

브라우저 SDK 경험으로부터 시작하다

Sematext 브라우저 SDK를 사용하여 Sematext에 성능 지표를 보내면 전면을 더욱 좋게 할 수 있습니다.당신은 모든 관건적인 전단 지표와 이를 어떻게 개선하는지 깊이 이해할 수 있습니다.그것을 스테로이드 등대로 상상해 보세요.
사용하기 시작하려면 Sematext Cloud 로 이동하고 sign up의 시작 지침을 따릅니다.곧 Sematext에서 프런트엔드 성능 지표가 표시됩니다.