服务端渲染(前后端未分离)项目探针安装教程

一步一个脚印一个坑 1年前 ⋅ 1983 阅读
ad

对于服务端渲染(前后端未分离)的项目,探针安装会有一些区别。

因为探针的运行环境是浏览器,在服务端环境中,是无法运行的。所以探针的引入时机应该是在页面加载时,执行探针代码。

一、创建项目

步骤如下:1.选择项目类型;2.输入项目名称;3选择环境变量;4.选择所属团队(如没有,创建后刷新即可)

二、引入探针代码

1. 进入项目设置页(projectSetting.html),复制探针代码,将探针代码保存为文件,上传至CDN服务器中。

2. 然后再将探针代码以文件的形式引入:

<script src="https://www.xxx.cn/resource/monitor.fetch.min.js" async></script>

3. 在页面加载后,执行初始化代码:

if (window) {
      window.sessionStorage.CUSTOMER_WEB_MONITOR_ID = "webfunny_20221204_00000_pro"
      window.localStorage.wmUserInfo = JSON.stringify({ userId: 'userId', userTag: 'tag', projectVersion: '1.0.1', env: 'pro' })
}

这里的CUSTOMER_WEB_MONITOR_ID就是项目对应的标识ID.

三、如何引入环境变量?

之前的版本没有环境变量的概念,每个环境都需要单独创建一个项目,非常麻烦。这一期,我们推出了环境变量,只需要引入一次探针代码,即可覆盖多个环境。分别为:开发(dev)、测试(sit)、预发布(stag)、生产(pro);

如上图所示,同时勾选多个,则可以一次性创建多个环境。

1. 在项目设置页(projectSetting.html),有探针代码的安装教程。

2. 探针代码引入后,需要传入对应的环境变量,环境变量必须跟下边四个一一对应,不可以自定义,如果你们的环境变量跟这四个不一样,需要写代码判断转换成我需要的环境变量

环境变量为:开发(dev)、测试(sit)、预发布(stag)、生产(pro);

3. userId、userTag、projectVersion、env 均为动态传入的。

window.localStorage.wmUserInfo = JSON.stringify({ userId: 'userId', userTag: 'tag', projectVersion: '1.0.1', env: 'pro' })

 

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • 一步一个脚印一个坑
    共发布126篇文章 获得4个收藏
全部评论: 0