为何要用云开辟做毛病日记：

1. 我司没有测试，所以产物上线的话比较多不肯定性
2. 云开辟营业并不稳固，且有限定，所以不发起直接用做全部小顺序的背景开辟。
3. 做毛病日记并不会影响小顺序的流程
4. 出bug后，难定位题目，尤其是线上毛病
5. 假如叫后端小伙伴给接口纪录毛病，老是不方便，照样自身动手饱食暖衣
6. 尝鲜

基于以上的缘由，在小顺序云开辟刚出来没多久，我就最先动手在我的小顺序上尝试构建一个毛病日记:

平常用一门新技术的第一步，你须要先阅读一下小顺序云开辟的官方文档：
https://developers.weixin.qq….

初始化环境
然后你须要一个小顺序，一个小顺序开辟工具：
新建一个空缺的小顺序后，点击左上角的云开辟按钮，初始化一个云开辟的环境

我这里给它取名叫error-storage。固然我是由于以后我的小顺序也不太可能会用到云开辟做背景，所以能够糟蹋一个环境定名。假如你是要用云开辟做背景营业的话。那末照样依据微信引荐，一个做测试一个做正式，定名也只管范例一点。
然后它的环境限定也是我们如今不拿它当重要后端剧本的重要缘由之一。
ok，点击肯定就创建了一个云开辟背景了。

然后我们回到代码。

我们须要写后端剧本纪录毛病信息，那末依据云开辟的文档，我们须要修正project.config.json
给他设置一下小顺序代码放在那里，后端代码放在那里。
以下是我的设置:

我把小顺序文件都放在了根目次下的client文件夹内，而云函数的文件则都放在了根目次的server文件夹的cloudFunctions里
那末如今我们的目次构造是如许的。我们须要手动挪动一下我们的小顺序代码。

注重这里project.config.json是在根目次

如今先增加一个数据库鸠合，翻开云开辟控制台，点击数据库。增加一个叫errors的鸠合

编写吸收毛病的云函数

然后我们先最先写吸收毛病的云函数

1. 用微信开辟工具翻开代码，然后点击目次树上面的cloudFunctiions目次，新建一个云函数，我们将它取名叫做errorHandler
2. 然后写上我们的代码逻辑

// 云函数进口文件
const cloud = require('wx-server-sdk');

cloud.init();

const db = cloud.database();
const errorCllection = db.collection('errors');

function addError(data) {
  return errorCllection.add({
    data: {
      ...data,
      createTime: Date.now()
    }
  });
}

// 云函数进口函数
exports.main = async event => {
  event.openid = event.userInfo.openId;
  delete event.userInfo;
  await addError(event);
  return true;
};

这面这段代码很简朴就是将小顺序端传过来的毛病写进数据库内里，毛病信息是什么由小顺序端决议，它仅仅只是将一切数据丢进数据库去罢了
保留字后再次右键cloudFunctions挑选上传并布置。那末我们的服务端就基础搞定了。（好简朴啊）

写小顺序端的毛病处置惩罚函数

起首，依据教程，我们要在app.js内里做云才能初始化
在app.js的第一行增加代码

try {
  wx.cloud.init({ // 云开辟初始化
    env: '云环境id',
    traceUser: true
  });
} catch(err) {}

给它加上catch是由于防备涌现一些毛病致使app.js运转失利，那简直是灾害吧！
这里的env是你的云环境id，那末在那里拿呢，在这里

然后我们在client/utils文件夹内里增加一个处置惩罚毛病的模块吧
名字就叫 error.js

const { config } = require('./config.js');

global.onError = function (message, showModal = true) {
  return function (error) {
    wx.hideLoading();
    if (showModal) {
      wx.showModal({
        title: '毛病',
        content: error.msg || message,
        // 这里的error.msg是由于与后端商定假如有什么毛病，则带一个msg的形貌
        // 而message则是传入进来备用的毛病信息
        confirmText: '返回首页',
        cancelText: '继承操纵',
        success: res => {
          if (res.confirm) {
            // 从新加载首页
            wx.switchTab({
              url: '/pages/index/index'
            });
          } else {
            // 作废就不管了
          }
        }
      });
    }
    // 上传到小顺序云数据库
    try {
      let userInfo = getApp().globalData.userInfo,
        systemInfo = wx.getSystemInfoSync(),
        page = getCurrentPages();
      // 只要不在开辟工具上触发的才上报
      if (systemInfo.platform !== 'devtools') {
        wx.getNetworkType({
          success: res => {
            wx.cloud.callFunction({
              name: 'errorHandler',
              data: {
                username: userInfo.nickName,
                uid: userInfo.id,
                clientType: systemInfo.model,
                systemInfo: JSON.stringify(systemInfo),
                pageRoute: page[page.length - 1].route,
                message: error.msg || message,
                version: config.version,
                networkType: res.networkType,
                errorTime: new Date(),
                error: typeof error === 'object' ? JSON.stringify(error) : String(error)
              }
            });
          }
        });
      }
    } catch(err) {}
    console.error('顺序发作毛病:\n', '时刻:\n', new Date(), '\n毛病信息:\n', message, '\nvvvvvvvvvvvvvv\n', error);
  };
};

如上，除了毛病信息以外，还贮存了体系信息，收集范例，最顶部的页面路由，毛病时刻，用户信息，版本号等(这里我加了个config.js用以贮存版本号，版本形貌等信息)

用try catch包起来也是为了防备触发毛病致使死循环

而且为了方便运用，我将其直接挂载到global。不喜欢全局变量的童鞋能够挑选export出去再援用

而且在触发毛病的时刻弹出一个提醒框提醒毛病了。

毛病处置惩罚函数的运用
那末接下来就是对这个要领的运用了，起首我们要监听app.js的onError要领，小顺序页面逻辑涌现毛病都邑到这个要领内

request('./utils/error.js'); // 别忘了引入error.js
App({
    onError: global.onError('顺序发作毛病') // 这里返回接收毛病的函数的闭包，而且传入的'顺序发作毛病'则是未知毛病发作时的提醒语
});

而其他的运用基础是运用到在promise的毛病监听上，由于promise中的毛病不会被app.js的onError吸收到，所以我们须要在每一个promise的catch中运用global.onError
这也是我为何将onError挂载global的缘由，由于基础每一个页面都邑用到，所以每一个页面去援用的话很贫苦

例子:
demo.js

Page({
    onLoad() {
        wx.showLoading();
        this.requestList()
            .then(res => {
                // 做一些事变
            })
            .catch(global.onError('猎取列表数据失利!'));
    },
    requestList() {
        return new Promise((resolve, reject) => {
            wx.request({
                url: 'https://mock.com/aaa',
                success: resolve,
                fail: reject
            });
        });
    }
});

那末，到如今，基础上已完成了，兴奋的开辟，不再忧郁涌现完整没有眉目的毛病啦
末了贴一张我收集到的毛病吧。然则有些字段我做了调解

末了照样要吐槽一下微信自身它自身的bug有点多。实在是很无法的