- 目标：查看生产上用户前端页面的报错信息，包括查看页面上的报错，接口调用的信息等等。
- 准备工作
- 官方docker镜像
- k8s
- 前端工程
- nginx（需要安装有htpasswd插件，因为构建的pagespy是没有鉴权功能的）
官方网址：https://www.pagespy.org/
官方GitHub：https://github.com/HuolalaTech/page-spy-web
步骤
- 获取官方的docker镜像
1
| docker pull ghcr.io/huolalatech/page-spy-web:latest
|
- 构建k8s的Deployment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| kind: Deployment
apiVersion: apps/v1
metadata:
name: pagespy
namespace: default
labels:
k8s-app: pagespy
spec:
replicas: 1
selector:
matchLabels:
k8s-app: pagespy
template:
metadata:
name: pagespy
creationTimestamp: null
labels:
k8s-app: pagespy
spec:
containers:
- name: pagespy
image: 'zquoctest/pagespy:1.0'
env:
- name: TZ
value: Asia/Shanghai
resources:
limits:
cpu: '1'
memory: 1Gi
requests:
cpu: '1'
memory: 1Gi
imagePullPolicy: IfNotPresent
restartPolicy: Always
|
- 构建k8s中的service（用于在k8s中的服务发现，直接通过name中的pagespy就能访问该容器）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| kind: Service
apiVersion: v1
metadata:
name: pagespy
namespace: default
labels:
k8s-app: pagespy
spec:
ports:
- name: pagespy
protocol: TCP
port: 6752
targetPort: 6752
selector:
k8s-app: pagespy
|
注意：这里端口使用的6752是因为镜像中的默认启动端口为6752
- nginx.conf的配置（pagespy默认访问地址为ip:port）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65;
server {
listen 81;
listen [::]:81;
server_name localhost;
location / {
auth_basic "Please input password";
auth_basic_user_file /etc/nginx/htpasswd;
proxy_pass http://pagespy:6752/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
location ~ /(api|page-spy) {
proxy_pass http://pagespy:6752;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
|
这里的设置只有页面需要鉴权，后端接口和ws跳过鉴权。（鉴权方式请查阅资料nginx的htpasswd）
- 嵌入前端代码（html + js）
在现有的公共js文件中引入相关js（需要前面配置的nginx和前端工程在同一个域下面，如果nginx中htpasswd在前端工程配置的nginx里面没有，需要配置多个nginx）
1
2
| document.write("<script type=text/javascript src='/zqApcWeb/pagespy/page-spy/index.min.js'><\/script>");
CACHE_UTIL.removeSessionItem('page-spy-room')
|
这里的 CACHE_UTIL.removeSessionItem(‘page-spy-room’) 是清除当前页面key为page-spy-room的session缓存，目的是为了每跳转一个新的页面则创建，否则打开新页面时还是复用的之前的缓存数据，导致用的是同一个房间。
实例化pagespy
1
2
3
4
5
6
7
8
9
10
11
12
13
|
try {
const title = $('title').text() + '/' + acceptOperNo;
const apiPreFix = window.location.hostname + ":" + window.location.port
window.$pageSpy = new PageSpy({
api: apiPreFix + "/zqApcWeb/pagespy",
project: "zq-pc",
title: title,
autoRender: false
});
} catch (e) {
}
|
需要在页面加载完成后再实例化，其中的参数介绍：
api：针对访问pagespy的接口有虚拟目录的情况，例如通过nginx配置了前缀路径，需要配置这个参数，否则会自动请求根目录的pagespy接口。
project：房间列表中展示房间信息的项目名称
title：房间列表中展示房间信息的标题名称
autoRender：默认为true，会在引入js的页面上展示一个logo
pagespy成功引入后展示房间列表
访问页面后，在pagespy页面中能看到房间数据表示接入成功。9d0c表示房间ID，自动生成。下面的为房间的title是实例化pagespy设置，可以格局需求自定义名称设置，这里我采用的是页面名称+访问用户名，拼接构成。下面的project也是实例化参数。
