Taro(mpvue/uniapp)引入Arms阿里前端监控

作者： TzuHsing Su
发布时间：2021-04-24
2721 次瀏覽
2 條評論
4622字数
分類： web前端

## 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

如果覺得我的文章對你有用，請隨意讚賞

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

評論 *

私密評論

名稱 *

🎲

郵箱 *

地址

2 條評論

不知名的男士
February 25th, 2022 at 11:19 am

请教下uni-app接入的方法

回复
1. TzuHsing Su
  March 10th, 2022 at 05:35 pm
  
  @不知名的男士
  
  都是一样的方法
  
  回复

Taro(mpvue/uniapp)引入Arms阿里前端监控

TzuHsing Su • 2021 年 04 月 24 日

通过实践，一般用第三方的小程序构建方式一般不会发生静默上报；要达到有用户信息和用户路径和api等可以通过中间件；
首先看Monitor配置：

```
在app.ts中

componentWillUnmount() {
    Arms.pageHide()
  }

componentDidCatchError(r) {
    try {
      Arms.reportBehavior()
      Arms.error(r)
      Arms.warn(r)
    } catch (e) {
      console.log('componentDidCatchError:', r)
    }
  }

```
### 其外最重要的api静默上报就无法实现了，我是通过api请求时同时添加上报的：

```

Taro(mpvue/uniapp)引入Arms阿里前端监控

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

2 條評論

当一名我这样的博主是怎样的体验

mac13.9 ventura vmvare fusion闪退解决方案

[建站方向]从购入vps到搭建wordpress或typecho

Vue组件-render函数与props传值

欢迎使用 Typecho

简单实现页面加载、滑动切换页面、淡出淡入效果

[生活]你理想的美好生活有这两样东西吗？

[uupdump提取] windows11 专业版 arm镜像-适用于树莓派、utm、m1等

canvas前端跨域的解决方案(不行你找我)

JavaScript Complex Info

Taro(mpvue/uniapp)引入Arms阿里前端监控

發表評論 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

2 條評論

Taro(mpvue/uniapp)引入Arms阿里前端监控

發表評論取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款