惠达前端SDK 插件

项目入口文件引入配置

import { init } from 'hahake-monitor-sdk';

init({
  appId: 'vue0001', // appId
  userId: 'user0001', // userId
  reportUrl: 'http://localhost:3009/report/actions', // 请求的后端地址
  delay: 0, // 延时上报的时间
  autoTracker: false, // 自动埋点
  hashPage: false, // 是否为hash路由，为fasle的话则默认为history路由
  errorReport: true, // 是否开启错误监控
});

VUE 中使用

<template>
  <div>
    <h2>page1</h2>
    <!-- 手动埋点 -->
    <button 
      style="marginRight: 20px"
      @click="tracker('click', '按钮1被点击了')"
    >按钮1</button>

    <!-- 属性埋点 -->
    <button 
      data-target="按钮2被点击了"
      style="marginRight: 20px"
    >按钮2</button>

    <!-- 自动埋点 -->
    <button style="marginRight: 20px">按钮3</button>
  </div>
</template>

<template>
  <div>
    <h2>page2</h2>
    <!-- 语法错误 -->
    <button 
      style="marginRight: 20px"
      @click="handleSyntaxError"
    >语法错误</button>

    <!-- 同步错误 -->
    <button 
      style="marginRight: 20px"
      @click="handleSyncError"
    >同步错误</button>

    <!-- 异步错误 -->
    <button 
      style="marginRight: 20px"
      @click="handleAsyncError"
    >异步错误</button>

    <!-- promise错误 -->
    <button 
      style="marginRight: 20px"
      @click="handlePromiseError"
    >promise错误</button>

    <!-- resource错误 -->
    <button 
      style="marginRight: 20px"
      @click="handleRescourceError"
    >resource错误</button>
    <img v-if="show" src="localhost:8000/images/test.png" alt="">
  </div>
</template>

<script>
import { errorCaptcher } from 'monitor-sdk';

export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleSyntaxError: function() {
      // try {
      //   let name = 'heima; // 少一个单引号
      //   console.log(name);
      // } catch (error) {
      //   console.log('----捕获到了语法错误-----');
      // }
    },
    handleSyncError: function() {
      // try {
      //   const name = 'heima';
      //   name.map();
      // } catch (error) {
      //   console.log('---- 捕获到同步错误 ---');
      //   errorCaptcher(error, '同步执行错误')
      // }  
    },
    handleAsyncError: function() {
      // 异步错误无法被trycatch捕获
      // try {
      //   setTimeout(() => {
      //     undefined.map();
      //   }, 0);
      // } catch (error) {
      //   console.log('-----异步错误-----')
      // }
    },
    handlePromiseError: function() {
      // Promise.reject('promise error');
    },
    handleRescourceError: function() {
      // this.show = true;
    }
  }  
}
</script>

React中使用，小程序中使用，有时间再写

# 本地测试
npm link
# 在项目里面 `npm link hahake-monitor-sdk` 即可安装到项目中