日志通常用户定位用户问题的时候使用,我们常常需要发布前就在代码中设计好业务关键流程执行时需要打印的日志。否则,当我们需要定位问题的时候,才发现自己并没有输出相关的日志会比较被动。这个时候只好临时改代码加日志,重新发布。有没有一种方案,可以在遇到问题的时候,再去代码中相应位置加日志,用户执行改业务流程时就能立刻打印出相关日志,而不用重新走一遍发布流程。
woodpecker-proxy 提供了一种解决方案,将浏览器JS请求代理到目标服务器,修改JS并发布到目标服务器后你可以在用户端随意打印上报用于调试的log。支持只针对特定JS目标、特定用户生效。
当前还未被生成环境大规模验证,线上请谨慎使用。
将 dist/wp-proxy.umd.js 直接内联到 <head>
标签中,并置于所有资源开始加载之前。
使用webpack等打包工具,直接将npm库上的wp-proxy内容使用script标签包裹后置于html的 <head>
标签中。
提供regex参数以正则匹配待调试JS的path部分,得到待调试目标JS数组后,辅助protocol、host参数以替换成代理服务器JS地址。
foo://example.com:8042/over/there?name=ferret#nose
\_/ \______________/\_________/
| | |
protocol host path
- path: 数组类型,表示path匹配规则,遍历数组内对象,使用regex匹配待调试JS,然后以replace(regex, value)的方式尝试替换目标JS。必选参数。
- protocol: 字符串类型,指定代理后JS地址的协议。如
http:
表示将以http协议从代理服务器上加载JS。可选参数。 - host: 对象类型,表示将对象key替换为对象value。如
{'example.com': 'log-server.com'}
表示将example.com的JS代理到log-server.com。可选参数。 - logLevel: 字符串类型,
'debug', 'info', 'warn', 'error', 'silent'
。 默认'info'
。可选参数。 - logProvider: logProvider,,默认
window.console
。可选参数。
安装SDK后,简单初始化待调试目标JS的path规则及代理JS地址规则即可。使用以下配置,http://localhost:5000/js/script-1.js
将被代理成http://my-log-server.com/js/script-1.log.js
<script src="../dist/wp-proxy.umd.js" type="text/javascript"></script>
<script>
WoodpeckerProxy.init({
path: [
{
regex : /\/js\/script-[1,3]/,
value: '/js/script-1.log',
},
{
regex : /\/js\/script-on-need-1/,
value: '/js/script-on-need-1.log'
},
{
regex : /\/js\/script-on-need-3/,
value: '/js/script-on-need-3.log'
}
],
host: {
'localhost:5000': 'my-log-server.com',
},
protocol: 'http:',
logLevel: 'debug'
});
</script>
安装依赖并启动本地server服务
$ npm i
$ npm run build
$ npm run examples
查看Demo,本地浏览器打开http://localhost:5000/demo/
查看示例项目realworld example, http://localhost:5000/examples/realworld/dist/
执行Demo的npm脚本,另外再进入examples/realworld项目内运行打包脚本。
# 打包原始JS,得到bundle.js
cd examples/realworld
$ npm run build
# 修改原始JS添加log`console.log('test woodpecker-proxy😁')`,打包后得到bundle.log.js
cd examples/realworld/src/pages/Home/index.js
$ npm run log
运行单测及端到端测试
$ npm i
$ npm run lint
$ npm run build
$ npm test
$ npm run e2e
47+ ✔ | 15+ ✔ |
The MIT License (MIT)