基于vue+Nuxt服务端渲染的埋点

搜索了一圈技术博文只有找到路由访问埋点(在router的beforeEach里配置)所以补充ssr模式下的另一种埋点方式

命令式埋点

由于需要和埋点接口配合使用，需要通过inject方式获取到上下文，解构后获得封装好的axios并注入到ssr生命周期内。

// plugins/stat.js
export default ({ $axios }, inject) => {
  inject('stat', {
    send(arg) {
      
      const postData = {
        ...arg
      };
      // console.log('postData', postData);
      return $axios.post(url, postData, {
        handleFlag: true //埋点接口报错不影响业务接口，在封装的axios里配置
      });
    }
  });
};

nuxt.config.js配置

plugins: [
    ...,
    { src: '@/plugins/stat.js', ssr: false },

axios配置

// 部分代码
axios.onResponseError(error => {
    console.log('error :', error.config.url);
    vm.$Spin.hide();
 
      // 埋点接口不做错误处理
      if (error.config.handleFlag) return;
      

页面内使用方式 使用时需要注意，插件在created时是还没注入，可以再mounted里调用，如果在方法里调用需要按如下方式写

this.$stat && this.$stat({...})