Taro引入Arms阿里前端监控
Taro引入Arms阿里前端监控使得在支付宝和微信环境下同时能够运作,此方法同时也能适用于其他第三方小程序构建方式中。由于一开始只是构建微信小程序,所以就用了arms提供的wl.js但是仍然达不到需求,因此还手动修改过一点原代码,后来升级到taro3.0又出问题了。
通过实践,一般用第三方的小程序构建方式一般不会发生静默上报;要达到有用户信息和用户路径和api等可以通过中间件;
首先看Monitor配置:
/**
* Created by TzuHsing on 2020-08-04
*/
import Taro from '@tarojs/taro'
// import { WXLogger } from "./wxLogger";
import AlipayLogger from 'alife-logger/alipay'
import WXLogger from 'alife-logger/lib/wl'
import { isWeChat } from './index'
// const Monitor = MiniProgramLogger.init({
// pid: 'xxx',
// uid: 'userxxx', // 设置用户uid,用于统计UV信息。
// region: 'cn', // 指定应用部署的地域:中国设为cn,中国以外地域设为sg。默认值为cn。
// // 基础小程序监控需要手动传入RPC。请按照实际业务写实现方法,以下示例为钉钉E应用中的调用方式。
//
// });
const Monitor_info = {
pid: isWeChat() ? 'fgsej6dyy1@84bb1fb8e******' : 'fgsej6dyy1@b1c9d070e******',
region: 'cn',
behavior: true,
enableConsole: true,
release: process.env.VERSION,
environment: process.env.NODE_ENV === 'production' ? 'prod' : 'local',
sendResource: true,
disableHook: !isWeChat(),
enableLinkTrace: true,
useFmp: true,
getCurrentPage: function() {
if (
typeof Taro.getCurrentPages !== 'undefined' &&
typeof Taro.getCurrentPages === 'function'
) {
const pages = Taro.getCurrentPages() || []
const pageLength = pages.length
const currPage = pages[pageLength - 1]
return (currPage && currPage.route) || null
}
}
}
export const Arms = isWeChat()
? WXLogger.init(Monitor_info)
: AlipayLogger.init(Monitor_info)
在app.ts中
import Taro, { getCurrentInstance } from '@tarojs/taro'
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { MINI_ENV, USER_INFO } from '@/const/localstorage'
import { IS_CLICK_PAY_BILL } from '@/const/sessionStorage'
import {
DISCOVERBAR_SCENE,
MONITOR_TEXT,
PULLDOWN_SCENE,
SCENE_STORAGE, SUSPEND_SCENE
} from '@/const/index'
import { isWeChat } from '@/utils/index'
import { setGlobalData } from '@/utils/global'
import { getCurrentPageUrl, removeTableCode } from '@/utils/wxUtil'
import { Arms } from '@/utils/monitor'
// import { util } from '@/utils/wxLogger';
import configStore from './store'
import './app.scss'
const store = configStore()
declare let wx: any
class App extends Component {
componentWillMount() {
try {
Arms.appLaunch()
} catch (e) {
Arms.warn('app didMount error')
}
}
componentDidMount() {
try {
Arms.appLaunch()
} catch (e) {
if (isWeChat()) {
// util.warn.bind(this.hookedHandler, 'app didMount error');
} else {
Arms.warn('app didMount error')
}
}
isWeChat() && wx.onAppRoute(async () => {
await Arms.pageShow()
})
try {
console.log('WXLogger:', Arms.warn)
setGlobalData(MONITOR_TEXT, Arms.warn)
Arms.setConfig({
setUsername: () => {
const { account } = Taro.getStorageSync(USER_INFO)
return account ? String(account) : null
},
})
} catch (i) {
console.log('this.hookedHandler:', Arms)
// util.warn('didmount error ' + String(i));
}
}
componentWillUnmount() {
Arms.pageHide()
}
async componentDidShow() {
// 场景码
const { router } = getCurrentInstance()
const param = router ? router.params : null
if (param) {
const scene = parseInt(param[SCENE_STORAGE] as any)
try {
Arms.addBehavior({ data: { name: 'scene update:', message: `${scene},${JSON.stringify(param)}` }, page: getCurrentPageUrl() })
Arms.reportBehavior()
} catch (e) {
console.log(e)
}
}
}
componentDidCatchError(r) {
try {
Arms.reportBehavior()
Arms.error(r)
Arms.warn(r)
} catch (e) {
console.log('componentDidCatchError:', r)
}
}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render() {
return (
<Provider store={store}>
{this.props.children}
</Provider>
)
}
}
export default App
其外最重要的api静默上报就无法实现了,我是通过api请求时同时添加上报的:
Arms.api(
baseURL + '/' + url,
true,
null,
'statusCode' in res ? res.statusCode : '',
JSON.stringify(res)
)
还有就是中间件可以通过组件输出的时候添加:
//taro3.0中使用异步中间件会报错
export default (ele: any) => {
if(isWeChat()){
Arms.pageShow();
return ele;
}else{
// Arms.pageShow();
return ele
// return Arms.hookPage(ele)
}
}
2 條評論
请教下uni-app接入的方法
都是一样的方法