You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by GitBox <gi...@apache.org> on 2020/12/13 13:39:01 UTC
[GitHub] [skywalking-website] tristan-tsl opened a new pull request #170: add skywalking-client-js in action
tristan-tsl opened a new pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170
add skywalking-client-js in action
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r545797436
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,76 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
Review comment:
文章示例代码格式不规整。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r545797151
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,76 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
+
+前端项目需要安装一下SkyWalking依赖:
+
+```
+npm install skywalking-client-js --save
+```
+
+每一个项目的package.json中的name都要用项目名称且不能与其他项目重复, version尽量保持有意义
+
+在路由/公共js中调整添加如下内容
+
+注意: router.beforeEach在实际项目中最好只声明一次
+
+```
+import ClientMonitor from 'skywalking-client-js'
+
+const router = createRouter() // 在router创建之后
+const package_json = require('../../package.json')
+const set_skywalking_monitor = async function(to, from, next) {
+ const skywalking_config = {
+ service: package_json.name,
+ serviceVersion: package_json.version,
+ pagePath: location.href.substring(0, location.href.indexOf('#') + 1) + to.path,
+ jsErrors: true,
+ apiErrors: true,
+ resourceErrors: true,
+ useFmp: true,
+ enableSPA: true,
+ autoTracePerf: true
+ }
+ try {
+ ClientMonitor.register(skywalking_config)
+ ClientMonitor.setPerformance(skywalking_config)
+ } catch (e) {
+ console.log(e)
+ }
+ next()
+}
+router.beforeEach(set_skywalking_monitor)
+```
+
+效果:
+
+目前能看到各个系统的前端页面访问记录的时间
+
+控制台的打印日志
+
+
+
+
+
+
+
+参考文档:
+
+https://github.com/apache/skywalking-client-js
+
+谢谢观看, 后续我会在SkyWalking-client-js这块写更多实战文章
Review comment:
建议删除此句。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] tristan-tsl commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
tristan-tsl commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r541929325
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, Nginx案例如下(Ingress-Nginx暂略)
Review comment:
已经更改了, 再看下呗
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, Nginx案例如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
+
+前端项目需要安装一下SkyWalking依赖:
+
+```
+npm install skywalking-client-js --save
+```
+
+每一个项目的package.json中的name都要用项目名称且不能与其他项目重复, version尽量保持有意义
+
+在路由/公共js中调整添加如下内容
+
+注意: router.beforeEach在实际项目中最好只声明一次
+
+```
+import ClientMonitor from 'skywalking-client-js'
+
+const router = createRouter() // 在router创建之后
+const package_json = require('../../package.json')
+const set_skywalking_monitor = async function(to, from, next) {
+ const skywalking_config = {
+ service: package_json.name,
+ serviceVersion: package_json.version,
+ pagePath: location.href.substring(0, location.href.indexOf('#') + 1) + to.path,
+ jsErrors: true,
+ apiErrors: true,
+ resourceErrors: true,
+ useFmp: true,
+ enableSPA: true,
+ autoTracePerf: true
+ }
+ try {
+ ClientMonitor.register(skywalking_config)
+ ClientMonitor.setPerformance(skywalking_config)
+ } catch (e) {
+ console.log(e)
+ }
+ next()
+}
+router.beforeEach(set_skywalking_monitor)
+```
+
+效果:
+
+目前能看到各个系统的前端页面访问记录的时间
+
+控制台的打印日志
+
+
+
+
+
+
+
+谢谢观看, 我会继续完善这篇文章
Review comment:
> This shows up again.
已经更改了, 再看下呗
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] tristan-tsl closed pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
tristan-tsl closed pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] tristan-tsl commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
tristan-tsl commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r541928343
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, Nginx案例如下(Ingress-Nginx暂略)
Review comment:
beacause the webfront project in nginx
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] tristan-tsl commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
tristan-tsl commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r542057880
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
+
+前端项目需要安装一下SkyWalking依赖:
+
+```
+npm install skywalking-client-js --save
+```
+
+每一个项目的package.json中的name都要用项目名称且不能与其他项目重复, version尽量保持有意义
+
+在路由/公共js中调整添加如下内容
+
+注意: router.beforeEach在实际项目中最好只声明一次
+
+```
+import ClientMonitor from 'skywalking-client-js'
+
+const router = createRouter() // 在router创建之后
+const package_json = require('../../package.json')
+const set_skywalking_monitor = async function(to, from, next) {
+ const skywalking_config = {
+ service: package_json.name,
+ serviceVersion: package_json.version,
+ pagePath: location.href.substring(0, location.href.indexOf('#') + 1) + to.path,
+ jsErrors: true,
+ apiErrors: true,
+ resourceErrors: true,
+ useFmp: true,
+ enableSPA: true,
+ autoTracePerf: true
+ }
+ try {
+ ClientMonitor.register(skywalking_config)
+ ClientMonitor.setPerformance(skywalking_config)
+ } catch (e) {
+ console.log(e)
+ }
+ next()
+}
+router.beforeEach(set_skywalking_monitor)
+```
+
+效果:
+
+目前能看到各个系统的前端页面访问记录的时间
+
+控制台的打印日志
+
+
+
+
+
+
+
+谢谢观看, 后续我会在SkyWalking告警这块写更多实战文章
Review comment:
> 描述错误，此文章不是告警文章。请仔细校对文章。
已经修改
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r542036957
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP端点处于前端项目的项目根目录, Nginx案例如下(Ingress-Nginx暂略)
Review comment:
```suggestion
首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP端点处于前端项目的项目根目录, Nginx案例如下(Ingress-Nginx暂略)
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r541928558
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, Nginx案例如下(Ingress-Nginx暂略)
Review comment:
Take a look at good example. http://skywalking.apache.org/zh/observe-service-mesh-with-skywalking-and-envoy-access-log-service/
Blog should give a full context about what is going on. Blog is not a replacement of the documentation.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r542036957
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP端点处于前端项目的项目根目录, Nginx案例如下(Ingress-Nginx暂略)
Review comment:
```suggestion
首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
```
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] tristan-tsl commented on pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
tristan-tsl commented on pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#issuecomment-748178879
好的
吴晟 Wu Sheng <no...@github.com> 于2020年12月18日周五 下午8:25写道：
> *@wu-sheng* commented on this pull request.
>
> 文章缺少连贯性，需要增强相关内容。官方blog不是练习笔记，我们要求完善的内容、章节、实例图等。
>
> —
> You are receiving this because you authored the thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/apache/skywalking-website/pull/170#pullrequestreview-555443686>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/ALEWV4BIFM3AKELM6RNTXVLSVNC35ANCNFSM4UZP7O6Q>
> .
>
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r542037609
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
+
+前端项目需要安装一下SkyWalking依赖:
+
+```
+npm install skywalking-client-js --save
+```
+
+每一个项目的package.json中的name都要用项目名称且不能与其他项目重复, version尽量保持有意义
+
+在路由/公共js中调整添加如下内容
+
+注意: router.beforeEach在实际项目中最好只声明一次
+
+```
+import ClientMonitor from 'skywalking-client-js'
+
+const router = createRouter() // 在router创建之后
+const package_json = require('../../package.json')
+const set_skywalking_monitor = async function(to, from, next) {
+ const skywalking_config = {
+ service: package_json.name,
+ serviceVersion: package_json.version,
+ pagePath: location.href.substring(0, location.href.indexOf('#') + 1) + to.path,
+ jsErrors: true,
+ apiErrors: true,
+ resourceErrors: true,
+ useFmp: true,
+ enableSPA: true,
+ autoTracePerf: true
+ }
+ try {
+ ClientMonitor.register(skywalking_config)
+ ClientMonitor.setPerformance(skywalking_config)
+ } catch (e) {
+ console.log(e)
+ }
+ next()
+}
+router.beforeEach(set_skywalking_monitor)
+```
+
+效果:
+
+目前能看到各个系统的前端页面访问记录的时间
+
+控制台的打印日志
+
+
+
+
+
+
+
+谢谢观看, 后续我会在SkyWalking告警这块写更多实战文章
Review comment:
描述错误，此文章不是告警文章。请仔细校对文章。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r545798026
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,76 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
+
+前端项目需要安装一下SkyWalking依赖:
+
+```
+npm install skywalking-client-js --save
+```
+
+每一个项目的package.json中的name都要用项目名称且不能与其他项目重复, version尽量保持有意义
+
+在路由/公共js中调整添加如下内容
+
+注意: router.beforeEach在实际项目中最好只声明一次
+
+```
+import ClientMonitor from 'skywalking-client-js'
+
+const router = createRouter() // 在router创建之后
Review comment:
`createRouter` 是vue相关语法，文章并没有做相应的交代。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r545797287
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,76 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们前端项目是通过Nginx代理出来。我们需要修改Nginx添加SkyWalking-OAP端点, 让SkyWalking-OAP可以被浏览器访问到。我们的Nginx配置如下(Ingress-Nginx暂略)
Review comment:
请补充项目部署架构图，明确这句话的背景。
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r541928003
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, Nginx案例如下(Ingress-Nginx暂略)
Review comment:
No background, can't follow the context.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [skywalking-website] wu-sheng commented on a change in pull request #170: add skywalking-client-js in action
Posted by GitBox <gi...@apache.org>.
wu-sheng commented on a change in pull request #170:
URL: https://github.com/apache/skywalking-website/pull/170#discussion_r541928118
##########
File path: content/zh/2020-12-13-skywalking-client-js-in-action/index.md
##########
@@ -0,0 +1,72 @@
+---
+title: SkyWalking-client-js实战体验
+date: 2020-12-13
+author: tristan-tsl
+description: 本文将详细介绍如何使用SkyWalking监控前端项目的页面加载情况及错误日志
+---
+
+
+
+首先我们得明白前端项目是通过Nginx代理出来, 我们得修改Nginx添加SkyWalking-OAP端点, Nginx案例如下(Ingress-Nginx暂略)
+
+```
+ location /browser {
+ proxy_pass http://<your_skywalking_oap_ip>:12800;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ }
+```
+
+前端项目需要安装一下SkyWalking依赖:
+
+```
+npm install skywalking-client-js --save
+```
+
+每一个项目的package.json中的name都要用项目名称且不能与其他项目重复, version尽量保持有意义
+
+在路由/公共js中调整添加如下内容
+
+注意: router.beforeEach在实际项目中最好只声明一次
+
+```
+import ClientMonitor from 'skywalking-client-js'
+
+const router = createRouter() // 在router创建之后
+const package_json = require('../../package.json')
+const set_skywalking_monitor = async function(to, from, next) {
+ const skywalking_config = {
+ service: package_json.name,
+ serviceVersion: package_json.version,
+ pagePath: location.href.substring(0, location.href.indexOf('#') + 1) + to.path,
+ jsErrors: true,
+ apiErrors: true,
+ resourceErrors: true,
+ useFmp: true,
+ enableSPA: true,
+ autoTracePerf: true
+ }
+ try {
+ ClientMonitor.register(skywalking_config)
+ ClientMonitor.setPerformance(skywalking_config)
+ } catch (e) {
+ console.log(e)
+ }
+ next()
+}
+router.beforeEach(set_skywalking_monitor)
+```
+
+效果:
+
+目前能看到各个系统的前端页面访问记录的时间
+
+控制台的打印日志
+
+
+
+
+
+
+
+谢谢观看, 我会继续完善这篇文章
Review comment:
This shows up again.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org