You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by qi...@apache.org on 2021/04/12 03:16:03 UTC
[skywalking-website] branch master updated: docs: add a blog for
browser agent (#254)
This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 97e8a52 docs: add a blog for browser agent (#254)
97e8a52 is described below
commit 97e8a5206a44ba4ccbd931f9df9f96b7e7067897
Author: Qiuxia Fan <fi...@outlook.com>
AuthorDate: Mon Apr 12 11:15:55 2021 +0800
docs: add a blog for browser agent (#254)
* docs: add a blog for browser agent
* fix: address pr
---
.../aircraft.jpg | Bin 0 -> 34188 bytes
.../errors.png | Bin 0 -> 144562 bytes
.../fetch.png | Bin 0 -> 188484 bytes
.../index.md | 147 +++++++++++++++++++++
.../interceptor.png | Bin 0 -> 312736 bytes
.../performance.png | Bin 0 -> 39850 bytes
.../trace.jpg | Bin 0 -> 37156 bytes
.../trends-errors.png | Bin 0 -> 66273 bytes
.../user.png | Bin 0 -> 57595 bytes
.../w3c.png | Bin 0 -> 18686 bytes
.../window.png | Bin 0 -> 91418 bytes
11 files changed, 147 insertions(+)
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/aircraft.jpg b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/aircraft.jpg
new file mode 100644
index 0000000..1e27637
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/aircraft.jpg differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/errors.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/errors.png
new file mode 100644
index 0000000..eeb8781
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/errors.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/fetch.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/fetch.png
new file mode 100644
index 0000000..c07c6a1
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/fetch.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md
new file mode 100644
index 0000000..59b7b59
--- /dev/null
+++ b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/index.md
@@ -0,0 +1,147 @@
+---
+title: "End-User Tracing in a SkyWalking-Observed Browser"
+date: 2021-03-25
+author: "[Qiuxia Fan](https://github.com/Fine0830). tetrate.io"
+description: This article describes how the skywalking-client-js extends its monitoring to include the browser, providing performance metrics and error collection to the SkyWalking backend.
+tags:
+- Observability, APM, Web-performance
+---
+
+
+
+> Origin: [End-User Tracing in a SkyWalking-Observed Browser - The New Stack](https://thenewstack.io/end-user-tracing-in-a-skywalking-observed-browser)
+
+[Apache SkyWalking](https://github.com/apache/skywalking): an APM (application performance monitor) system, especially
+designed for microservices, cloud native, and container-based (Docker, Kubernetes, Mesos) architectures.
+
+[skywalking-client-js](https://github.com/apache/skywalking-client-js): a lightweight client-side JavaScript exception, performance, and tracing library. It provides metrics and error collection to the SkyWalking backend. It also makes the browser the starting point for distributed tracing.
+
+
+## Background
+
+Web application performance affects the retention rate of users. If a page load time is too long, the user will give up. So we need to monitor the web application to understand performance and ensure that servers are stable, available and healthy. SkyWalking is an APM tool and the skywalking-client-js extends its monitoring to include the browser, providing performance metrics and error collection to the SkyWalking backend.
+
+
+## Performance Metrics
+
+The skywalking-client-js uses [window.performance] (https://developer.mozilla.org/en-US/docs/Web/API/Window/performance) for performance data collection. From the MDN doc, the performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the [Performance Timeline API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_Timeline), the [Navigation Timing API](https://developer.mozilla.o [...]
+
+
+
+We can better understand these attributes when we see them together in the figure below from [W3C](https://www.w3.org/TR/navigation-timing/?spm=a2c4g.11186623.2.14.2f495c7cmRef8Q#processing-model):
+
+
+
+The following table contains performance metrics in skywalking-client-js.
+
+|Metrics Name|Describe|Calculating Formulae|Note|
+|----|----|----|----|
+|redirectTime|Page redirection time|redirectEnd - redirectStart|If the current document and the document that is redirected to are not from the same [origin](http://tools.ietf.org/html/rfc6454), set redirectStart, redirectEnd to 0|
+|ttfbTime|Time to First Byte|responseStart - requestStart|According to [Google Development](https://developers.google.com/web/tools/chrome-devtools/network/reference?spm=a2c4g.11186623.2.16.2f495c7cmRef8Q#timing)|
+|dnsTime|Time to DNS query|domainLookupEnd - domainLookupStart|
+|tcpTime|Time to TCP link|connectEnd - connectStart|
+|transTime|Time to content transfer|responseEnd - responseStart|
+|sslTime|Time to SSL secure connection|connectEnd - secureConnectionStart|Only supports HTTPS|
+|resTime|Time to resource loading|loadEventStart - domContentLoadedEventEnd|Represents a synchronized load resource in pages|
+|fmpTime|Time to First Meaningful Paint|-|Listen for changes in page elements. Traverse each new element, and calculate the total score of these elements. If the element is visible, the score is 1 * weight; if the element is not visible, the score is 0
+|domAnalysisTime|Time to DOM analysis|domInteractive - responseEnd|
+|fptTime|First Paint Time|responseEnd - fetchStart|
+|domReadyTime|Time to DOM ready|domContentLoadedEventEnd - fetchStart|
+|loadPageTime|Page full load time|loadEventStart - fetchStart|
+|ttlTime|Time to interact|domInteractive - fetchStart|
+|firstPackTime|Time to first package|responseStart - domainLookupStart|
+
+Skywalking-client-js collects those performance metrics and sends them to the [OAP (Observability Analysis Platform) server](https://skywalking.apache.org/docs/main/latest/en/concepts-and-designs/backend-overview/) , which aggregates data on the back-end side that is then shown in visualizations on the UI side. Users can optimize the page according to these data.
+
+
+
+
+## Exception Metrics
+There are five kinds of errors that can be caught in skywalking-client-js:
+
+- The resource loading error is captured by `window.addeventlistener ('error ', callback, true)`
+- `window.onerror` catches JS execution errors
+- `window.addEventListener('unhandledrejection', callback)` is used to catch the promise errors
+- the Vue errors are captured by `Vue.config.errorHandler`
+- the Ajax errors are captured by `addEventListener('error', callback); addEventListener('abort', callback); addEventListener('timeout', callback); ` in send callback.
+
+The Skywalking-client-js traces error data to the OAP server, finally visualizing data on the UI side. For an error overview of the App, there are several metrics for basic statistics and trends of errors, including the following metrics.
+
+- App Error Count, the total number of errors in the selected time period.
+- App JS Error Rate, the proportion of PV with JS errors in a selected time period to total PV.
+- All of Apps Error Count, Top N Apps error count ranking.
+- All of Apps JS Error Rate, Top N Apps JS error rate ranking.
+- Error Count of Versions in the Selected App, Top N Error Count of Versions in the Selected App ranking.
+- Error Rate of Versions in the Selected App, Top N JS Error Rate of Versions in the Selected App ranking.
+- Error Count of the Selected App, Top N Error Count of the Selected App ranking.
+- Error Rate of the Selected App, Top N JS Error Rate of the Selected App ranking.
+
+
+
+For pages, we use several metrics for basic statistics and trends of errors, including the following metrics:
+
+- Top Unstable Pages / Error Rate, Top N Error Count pages of the Selected version ranking.
+- Top Unstable Pages / Error Count, Top N Error Count pages of the Selected version ranking.
+- Page Error Count Layout, data display of different errors in a period of time.
+
+
+
+
+## User Metrics
+
+SkyWalking browser monitoring also provides metrics about how the visitors use the monitored websites, such as PV(page views), UV(unique visitors), top N PV(page views), etc.
+
+In SPAs (single page applications), the page will be refreshed only once. The traditional method only reports PV once after the page loading, but cannot count the PV of each sub-page, and can't make other types of logs aggregate by sub-page.
+
+SkyWalking browser monitoring provides two processing methods for SPA pages:
+
+1. Enable SPA automatic parsing. This method is suitable for most single page application scenarios with URL hash as the route. In the initialized configuration item, set enableSPA to true, which will turn on the page's hashchange event listener (trigger re reporting PV), and use URL hash as the page field in other data reporting.
+
+2. Manual reporting. This method can be used in all single page application scenarios. This method can be used if the first method is not usable. The following example provides a set page method to manually update the page name when data is reported. When this method is called, the page PV will be re reported by default:
+
+```js
+app.on('routeChange', function (to) {
+ ClientMonitor.setPerformance({
+ collector: 'http://127.0.0.1:8080',
+ service: 'browser-app',
+ serviceVersion: '1.0.0',
+ pagePath: to.path,
+ autoTracePerf: true,
+ enableSPA: true,
+ });
+});
+```
+
+Let's take a look at the result found in the following image. It shows the most popular applications and versions, and the changes of PV over a period of time.
+
+
+
+
+## Make the browser the starting point for distributed tracing
+
+SkyWalking browser monitoring intercepts HTTP requests to trace segments and spans. It supports tracking these following modes of HTTP requests: XMLHttpRequest and fetch. It also supports tracking libraries and tools based on XMLHttpRequest and fetch - such as Axios, SuperAgent, OpenApi, and so on.
+
+Let’s see how the SkyWalking browser monitoring intercepts HTTP requests:
+
+
+
+After this, use `window.addEventListener('xhrReadyStateChange', callback)` and set the readyState value to`sw8 = xxxx` in the request header. At the same time, reporting requests information to the back-end side. Finally, we can view trace data on the trace page. The following graphic is from the trace page:
+
+
+
+To see how we listen for fetch requests, let’s see the source code of [fetch](https://github.com/github/fetch/blob/90fb680c1f50181782f276122c1b1115535b1603/fetch.js#L506)
+
+
+
+As you can see, it creates a promise and a new XMLHttpRequest object. Because the code of the fetch is built into the browser, it must monitor the code execution first. Therefore, when we add listening events, we can't monitor the code in the fetch. Just after monitoring the code execution, let's rewrite the fetch:
+
+```js
+import { fetch } from 'whatwg-fetch'; window.fetch = fetch;
+```
+
+In this way, we can intercept the fetch request through the above method.
+
+
+## Additional Resources
+
+- [End-User Tracing in a SkyWalking-Observed Browser](/blog/end-user-tracing-in-a-skywalking-observed-browser).
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/interceptor.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/interceptor.png
new file mode 100644
index 0000000..8db74dc
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/interceptor.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/performance.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/performance.png
new file mode 100644
index 0000000..a463d30
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/performance.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/trace.jpg b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/trace.jpg
new file mode 100644
index 0000000..933b3b0
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/trace.jpg differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/trends-errors.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/trends-errors.png
new file mode 100644
index 0000000..aea3eab
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/trends-errors.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/user.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/user.png
new file mode 100644
index 0000000..56795d1
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/user.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/w3c.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/w3c.png
new file mode 100644
index 0000000..c03ada0
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/w3c.png differ
diff --git a/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/window.png b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/window.png
new file mode 100644
index 0000000..a46aa86
Binary files /dev/null and b/content/blog/end-user-tracing-in-a-skyWalking-observed-browser/window.png differ