集成探针(前端)

本文介绍从天眼平台获得应用专属探针后,在应用里实现探针集成的操作过程。

因小程序应用形态的特殊性,天眼提供的前端探针也分为Web探针和小程序探针。另外,对于APP应用,前端探针如与MLogCollection插件配合使用能对APP的日志采集提供更全面的支持。 接下针对以上三种场景分别进行介绍。

Web应用集成探针

Web应用推荐使用CDN的方式进行集成,这种方式能最简单高效的完成探针的集成,并可支持在线修改探针的配置以及升级探针的版本

在应用入口(通常是index.html)优先于业务代码加载的的位置(推荐在head标签内)将以下代码插入即可完成集成

<script src="当前应用的探针地址"></script>

如果需要在探针(3.0.0+)加载完成后立即调用探针的接口方法,可以探针抛出的【初始化完成】事件进行监听,示例如下

<script src="当前应用的探针地址"></script>
<script>
  window.addEventListener('fasttrackerinited', function() {
    __myWebLogTracker__ && __myWebLogTracker__.registUser({
      tenant_code: 'mysoft',
      user_account: 'zhangsan',
      user_group: 'administrator'
    })
  });
</script>

在探针3.0.0版本之后,会在探针JS加载完成和初始化完成后分别抛出事件

  • 探针JS加载完成事件:fasttrackerloaded
  • 初始化完成事件:fasttrackerinited

对于<3.0.0的版本,则需要再未使用环境配置的情况下使用以下方式

<script>
  !(function(d){
    var n=d.createElement("script");
    var tag=d.getElementsByTagName("script")[0];
    n.async=1;
    n.src="应用所属的探针地址";
    // 在script标签onload之后调用探针API
    n.onload=function(){
      __myWebLogTracker__ && __myWebLogTracker__.registUser({
        tenant_code: 'mysoft',
        user_account: 'zhangsan',
        user_group: 'administrator'
      });
    };
    tag.parentNode.insertBefore(n,tag);
  })(document);
</script>

微信小程序集成探针

微信小程序,根据使用的框架不同,集成方式存在差异:

注意事项

  • 该探针只适用于未使用小程序第三方插件的小程序原生框架和mpvue框架,目前不支持使用了小程序插件的项目
  • 由于日志上报需要使用阿里云日志服务接口,需要在微信公众平台的小程序开发 > 开发设置 > 服务器域名中将prod.cn-hangzhou.log.aliyuncs.com添加到request合法域名

taro(1.x|2.x|3.x)框架集成

推荐开启在线配置,并在调整好配置参数后将探针下载到本地,由于taro框架与小程序原生框架和mpvue实现原理的不同,初始化探针需要将taro本身作为一项配置传入探针,下载到本地的探针需要再做一点调整

每次在线修改过探针配置后,都需要更新小程序工程目录中的探针文件,并且需要在文件末尾添加以下内容

const Taro = require('@tarojs/taro');
global.__myWebLogTracker__ = global.myWebLogTracker.default({
  // 把Taro框架通过参数传递给探针 需要进行一些改造
  "taro": Taro,
  "env_code": "prod",
  "product_code": "fast-test",
  "app_code": "xxx",
  "ignore_pages": [],
  "collect_event_types": ["event", "page", "api", "click", "error", "crash", "user-defined"],
  "is_spa": true,
  "replay": { "error": 0 },
  "log_event_attribute": "data-event",
  "report_logs_threshold": {"WeChat Mini Program": 20},
  "page_interval": 1800000,
  "manual_report_page_load": false,
  "api_url_regx": "",
  "log_module_attribute": "data-module",
  "report_api_params": false,
  "log_content_attribute": "data-log",
  "trace_config": null,
  "tenant_code_query": {"key": "", "range": ["url", "localstorage", "cookie"]},
  "user_account_query": {"key": "", "range": ["url", "localstorage", "cookie"]},
  "user_group_query": {"key": "", "range": ["url", "localstorage", "cookie"]},
  "include_search": true,
  "api_ignore_urls": []
});
Object.defineProperty(wx.__proto__, '__myWebLogTracker__', {
  value: global.__myWebLogTracker__,
  writable: false
});
exports.__myWebLogTracker__ = global.__myWebLogTracker__;

````js import { myWebLogTracker } from './utils/myWebLogTracker.min.wxmp.js'

// 可直接通过该实例调用探针接口方法 myWebLogTracker.report('自定义事件名称', { / 自定义事件内容对象 / });

myWebLogTracker.registUser({ tenant_code: 'mysoft', user_account: 'zhangss', user_group: 'admin' });


### <span id="mpvue-way">mpvue框架集成</span>

推荐开启在线配置,并在调整好配置参数后将探针下载到本地,接入小程序工程目录并在mpvue主入口文件中导入已初始化的探针实例,可直接通过该实例调用探针接口方法

> 每次在线修改过探针配置后,都需要更新小程序工程目录中的探针文件,并且需要在文件末尾添加以下内容
````js
global.__myWebLogTracker__ = global.myWebLogTracker.default({
  "env_code": "prod",
  "product_code": "fast-test",
  "app_code": "xxx",
  "ignore_pages": [],
  "collect_event_types": ["event", "page", "api", "click", "error", "crash", "user-defined"],
  "is_spa": true,
  "replay": { "error": 0 },
  "log_event_attribute": "data-event",
  "report_logs_threshold": {"WeChat Mini Program": 20},
  "page_interval": 1800000,
  "manual_report_page_load": false,
  "api_url_regx": "",
  "log_module_attribute": "data-module",
  "report_api_params": false,
  "log_content_attribute": "data-log",
  "trace_config": null,
  "tenant_code_query": {"key": "", "range": ["url", "localstorage", "cookie"]},
  "user_account_query": {"key": "", "range": ["url", "localstorage", "cookie"]},
  "user_group_query": {"key": "", "range": ["url", "localstorage", "cookie"]},
  "include_search": true,
  "api_ignore_urls": []
});
Object.defineProperty(wx.__proto__, '__myWebLogTracker__', {
  value: global.__myWebLogTracker__,
  writable: false
});
exports.__myWebLogTracker__ = global.__myWebLogTracker__;
// 项目主入口,app.js导入探针初始化实例,确保在项目初始化时,初始化天眼探针
import { __myWebLogTracker__ } from './utils/myWebLogTracker.min.wxmp.js'

// 可直接通过该实例调用探针接口方法
__myWebLogTracker__.report('自定义事件名称', {
  /* 自定义事件内容对象 */
});

__myWebLogTracker__.registUser({
  tenant_code: 'mysoft',
  user_account: 'zhangss',
  user_group: 'admin'
});

原生框架集成

推荐开启在线配置,并在调整好配置参数后将探针下载到本地,在小程序主入口app.js中最顶端引入探针,无需手动初始化探针,探针在引入时自动初始化,并将实例myWebLogTracker挂在到global对象上

每次在线修改过探针配置后,都需要更新小程序工程目录中的探针文件

require('./utils/myWebLogTracker.min.wxmp.js');
/* 
  引入探针后 探针将根据在线配置自动初始化 并将实例挂载到global对象上
*/

// 在需要主动调用探针方法时
global.__myWebLogTracker__ && global.__myWebLogTracker__.report('自定义事件名称', {
  /* 自定义事件内容对象 */
});

global.__myWebLogTracker__ && global.__myWebLogTracker__.registUser({
  tenant_code: 'mysoft',
  user_account: 'zhangss',
  user_group: 'admin'
})

混合APP集成探针

在混合APP中,推荐集成探针的同时为应用安装MLogCollection插件,MLogCollection是一个专门为天眼探针打造的Cordova插件,其赋予了探针获取设备信息的能力,在安装MLogCollection插件后与探针配合使用将会有以下变化:

  • 可采集应用的崩溃日志
  • 上传方式由调用日志服务接口改为将日志形成文件并压缩打包上传至OSS,自定义事件内容大小不再受到限制
  • 离线环境下仍然可以继续采集日志并且不会丢失

除插件以外,探针的集成方式与Web应用类似,当应用不存在离线场景时,探针的集成同样推荐使用CDN方式集成,如果应用存在较多离线使用场景,则需要通过以下方式进行集成:

1、如果项目是基于webpack构建,则首先推荐使用fast-tracker-integration-webpack-plugin进行集成

该插件还可以进行sourcemap上传(用于前端异常错误堆栈查看

在webpack中

import FastTrackerIntegrationWebpackPlugin from 'fast-tracker-integration-webpack-plugin';
import path from 'path';
plugins: [
  new FastTrackerIntegrationWebpackPlugin({
    // 公共参数
    product_code: '产品编码',
    app_code: '应用编码',
    // 探针集成相关参数
    integration_tracker: 'offline',
    env_code: '当前这一次构建所对应的环境变量 prod|beta|test|dev',
    // 输出目录的入口html文件  例如 dist/index.html  直接填充index.html
    file_path_arr: ['index.html', 'aaa/index.html'],
    // sourcemap上传相关参数
    update_sourcemap: true,// 是否开启sourcemap上传
    app_key: '应用的APP KEY',
    is_delete_source_map: true,
  })
]

需要注意的是,应避免在开发环境开启sourcemap上传功能,否则将导致文件修改后的热更新时间过长

2、通过npm包安装,并手动初始化

执行命令将依赖添加到项目

npm install fast-tracker --save

在项目的入口js中引入并初始化

import myWebLogTracker from 'fast-tracker';

// 执行初始化
const trackerInstance = myWebLogTracker({
  app_code: '应用编码XXX',
  product_code: '产品编码XXX',
  // 其他配置项
});

// 后续可使用得到的实例调用探针接口
trackerInstance.registUser({ tenant_code: 'mysoft' });

// 浏览器环境下可访问window对象下的__myWebLogTracker__
window.__myWebLogTracker__.registUser({ tenant_code: 'mysoft' });

results matching ""

    No results matching ""