探针安装(H5)

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

 

hello,大家好,欢迎使用webfunny前端监控系统,这里将介绍一下H5探针安装的具体过程。

如果没有趁手的前端项目试验,可以使用我们的demo项目进行测试,DEMO下载地址

服务端渲染(SSR),探针部署可以参考这文档:https://www.webfunny.cn/blog/post/147

一、创建项目

步骤如下:

1. 选择项目类型;

2. 输入项目名称;

3. 选择环境变量;

4. 绑定TraceId;(默认不绑定)

5. 选择所属团队(如没有,创建后,点刷新即可)

二、引入探针代码

npm安装方式:npm安装教程

创建完成,等待10s后,可以看到项目设置页(或者点击应用设置按钮也可以打开)

在设置页中,可以看到探针的安装教程,复制探针代码,安插到你项目的html模板中,如下图所示。

三、如何区分多个环境

正常情况下,每个项目都会有多个环境,如:开发、测试、生产等。webfunny可以设置环境变量,只需要传入环境变量,即可区分多个环境。分别为:开发(dev)、测试(sit)、预发布(stag)、生产(pro);

如第一步示例图所示,同时勾选多个,则可以一次性创建多个环境,每个环境占用一个项目额度。

1. 引入探针代码(pro环境)后,需要传入对应的环境变量,环境变量必须跟下边四个一一对应,不可以自定义,如果你们的环境变量跟这四个不一样,需要写代码判断转换成webfunny需要的环境变量名称,环境变量值分别为:dev、sit、stag、pro;

if (window.WebfunnyMonitor) { WebfunnyMonitor.init({ projectVersion: "1.0.0", env: "pro"}); }  // 应用版本&环境变量

2. userId、userTag均为动态传入的,示例代码中均为默认值

if (window.WebfunnyMonitor) { WebfunnyMonitor.initUser({ userId: "userId", userTag: "标签", }) }

好了,这样探针就引入成功了。如有疑问,请联系我们的客服(webfunny2),或者加入技术交流群来问我吧。

关于Webfunny

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

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