Loading... ## Taro引入Arms阿里前端监控 Taro引入Arms阿里前端监控使得在支付宝和微信环境下同时能够运作,此方法同时也能适用于其他第三方小程序构建方式中。由于一开始只是构建微信小程序,所以就用了arms提供的wl.js但是仍然达不到需求,因此还手动修改过一点原代码,后来升级到taro3.0又出问题了。 通过实践,一般用第三方的小程序构建方式一般不会发生静默上报;要达到有用户信息和用户路径和api等可以通过中间件; 首先看Monitor配置: ```javascript /** * 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中 ```javascript 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请求时同时添加上报的: ```javascript Arms.api( baseURL + '/' + url, true, null, 'statusCode' in res ? res.statusCode : '', JSON.stringify(res) ) ``` 还有就是中间件可以通过组件输出的时候添加: ```javascript //taro3.0中使用异步中间件会报错 export default (ele: any) => { if(isWeChat()){ Arms.pageShow(); return ele; }else{ // Arms.pageShow(); return ele // return Arms.hookPage(ele) } } ``` 最后修改:2021-05-12 © 允許規範轉載 讚賞 讚賞作者 支付宝微信 赞 如果覺得我的文章對你有用,請隨意讚賞
2 條評論
请教下uni-app接入的方法
都是一样的方法