摘要：那么還是按照微信推薦，一個(gè)做測(cè)試一個(gè)做正式，命名也盡量規(guī)范一點(diǎn)。

為什么要用云開(kāi)發(fā)做錯(cuò)誤日志：

我司沒(méi)有測(cè)試，所以產(chǎn)品上線的話比較多不確定性

云開(kāi)發(fā)業(yè)務(wù)并不穩(wěn)定，且有限制，所以不建議直接用做整個(gè)小程序的后臺(tái)開(kāi)發(fā)。

做錯(cuò)誤日志并不會(huì)影響小程序的流程

出bug后，難定位問(wèn)題，尤其是線上錯(cuò)誤

如果叫后端小伙伴給接口記錄錯(cuò)誤，總是不方便，還是自己動(dòng)手豐衣足食

嘗鮮

基于以上的原因，在小程序云開(kāi)發(fā)剛出來(lái)沒(méi)多久，我就開(kāi)始著手在我的小程序上嘗試構(gòu)建一個(gè)錯(cuò)誤日志:

一般用一門新技術(shù)的第一步，你需要先瀏覽一下小程序云開(kāi)發(fā)的官方文檔：
https://developers.weixin.qq....

初始化環(huán)境
然后你需要一個(gè)小程序，一個(gè)小程序開(kāi)發(fā)工具：
新建一個(gè)空白的小程序后，點(diǎn)擊左上角的云開(kāi)發(fā)按鈕，初始化一個(gè)云開(kāi)發(fā)的環(huán)境

我這里給它取名叫error-storage。當(dāng)然我是因?yàn)橹笪业男〕绦蛞膊惶赡軙?huì)用到云開(kāi)發(fā)做后臺(tái)，所以可以浪費(fèi)一個(gè)環(huán)境命名。如果你是要用云開(kāi)發(fā)做后臺(tái)業(yè)務(wù)的話。那么還是按照微信推薦，一個(gè)做測(cè)試一個(gè)做正式，命名也盡量規(guī)范一點(diǎn)。
然后它的環(huán)境限制也是我們目前不拿它當(dāng)主要后端腳本的主要原因之一。
ok，點(diǎn)擊確定就創(chuàng)建了一個(gè)云開(kāi)發(fā)后臺(tái)了。

然后我們回到代碼。

我們需要寫后端腳本記錄錯(cuò)誤信息，那么根據(jù)云開(kāi)發(fā)的文檔，我們需要修改project.config.json
給他配置一下小程序代碼放在哪里，后端代碼放在哪里。
以下是我的配置:

我把小程序文件都放在了根目錄下的client文件夾內(nèi)，而云函數(shù)的文件則都放在了根目錄的server文件夾的cloudFunctions里
那么現(xiàn)在我們的目錄結(jié)構(gòu)是這樣的。我們需要手動(dòng)移動(dòng)一下我們的小程序代碼。

注意這里project.config.json是在根目錄

現(xiàn)在先添加一個(gè)數(shù)據(jù)庫(kù)集合，打開(kāi)云開(kāi)發(fā)控制臺(tái)，點(diǎn)擊數(shù)據(jù)庫(kù)。添加一個(gè)叫errors的集合

編寫接收錯(cuò)誤的云函數(shù)

然后我們先開(kāi)始寫接收錯(cuò)誤的云函數(shù)

用微信開(kāi)發(fā)工具打開(kāi)代碼，然后點(diǎn)擊目錄樹(shù)上面的cloudFunctiions目錄，新建一個(gè)云函數(shù)，我們將它取名叫做errorHandler

然后寫上我們的代碼邏輯

// 云函數(shù)入口文件
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()
    }
  });
}

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

這面這段代碼很簡(jiǎn)單就是將小程序端傳過(guò)來(lái)的錯(cuò)誤寫進(jìn)數(shù)據(jù)庫(kù)里面，錯(cuò)誤信息是什么由小程序端決定，它僅僅只是將所有數(shù)據(jù)丟進(jìn)數(shù)據(jù)庫(kù)去而已
保存字后再次右鍵cloudFunctions選擇上傳并部署。那么我們的服務(wù)端就基本搞定了。（好簡(jiǎn)單?。?/p>

寫小程序端的錯(cuò)誤處理函數(shù)

首先，根據(jù)教程，我們要在app.js里面做云能力初始化
在app.js的第一行添加代碼

try {
  wx.cloud.init({ // 云開(kāi)發(fā)初始化
    env: "云環(huán)境id",
    traceUser: true
  });
} catch(err) {}

給它加上catch是因?yàn)榉乐钩霈F(xiàn)一些錯(cuò)誤導(dǎo)致app.js運(yùn)行失敗，那簡(jiǎn)直是災(zāi)難吧！
這里的env是你的云環(huán)境id，那么在哪里拿呢，在這里

然后我們?cè)赾lient/utils文件夾里面添加一個(gè)處理錯(cuò)誤的模塊吧
名字就叫 error.js

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

global.onError = function (message, showModal = true) {
  return function (error) {
    wx.hideLoading();
    if (showModal) {
      wx.showModal({
        title: "錯(cuò)誤",
        content: error.msg || message,
        // 這里的error.msg是因?yàn)榕c后端約定如果有什么錯(cuò)誤，則帶一個(gè)msg的描述
        // 而message則是傳入進(jìn)來(lái)備用的錯(cuò)誤信息
        confirmText: "返回首頁(yè)",
        cancelText: "繼續(xù)操作",
        success: res => {
          if (res.confirm) {
            // 重新加載首頁(yè)
            wx.switchTab({
              url: "/pages/index/index"
            });
          } else {
            // 取消就不管了
          }
        }
      });
    }
    // 上傳到小程序云數(shù)據(jù)庫(kù)
    try {
      let userInfo = getApp().globalData.userInfo,
        systemInfo = wx.getSystemInfoSync(),
        page = getCurrentPages();
      // 只有不在開(kāi)發(fā)工具上觸發(fā)的才上報(bào)
      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("程序發(fā)生錯(cuò)誤:
", "時(shí)間:
", new Date(), "
錯(cuò)誤信息:
", message, "
vvvvvvvvvvvvvv
", error);
  };
};

如上，除了錯(cuò)誤信息之外，還儲(chǔ)存了系統(tǒng)信息，網(wǎng)絡(luò)類型，最頂部的頁(yè)面路由，錯(cuò)誤時(shí)間，用戶信息，版本號(hào)等(這里我加了個(gè)config.js用以儲(chǔ)存版本號(hào)，版本描述等信息)

用try catch包起來(lái)也是為了防止觸發(fā)錯(cuò)誤導(dǎo)致死循環(huán)

并且為了方便使用，我將其直接掛載到global。不喜歡全局變量的童鞋可以選擇export出去再引用

并且在觸發(fā)錯(cuò)誤的時(shí)候彈出一個(gè)提示框提示錯(cuò)誤了。

錯(cuò)誤處理函數(shù)的使用
那么接下來(lái)就是對(duì)這個(gè)方法的使用了，首先我們要監(jiān)聽(tīng)app.js的onError方法，小程序頁(yè)面邏輯出現(xiàn)錯(cuò)誤都會(huì)到這個(gè)方法內(nèi)

request("./utils/error.js"); // 別忘了引入error.js
App({
    onError: global.onError("程序發(fā)生錯(cuò)誤") // 這里返回接受錯(cuò)誤的函數(shù)的閉包，并且傳入的"程序發(fā)生錯(cuò)誤"則是未知錯(cuò)誤發(fā)生時(shí)的提示語(yǔ)
});

而其他的應(yīng)用基本是應(yīng)用到在promise的錯(cuò)誤監(jiān)聽(tīng)上，由于promise中的錯(cuò)誤不會(huì)被app.js的onError接收到，所以我們需要在每個(gè)promise的catch中使用global.onError
這也是我為什么將onError掛載global的原因，因?yàn)榛久總€(gè)頁(yè)面都會(huì)用到，所以每個(gè)頁(yè)面去引用的話很麻煩

例子:
demo.js

Page({
    onLoad() {
        wx.showLoading();
        this.requestList()
            .then(res => {
                // 做一些事情
            })
            .catch(global.onError("獲取列表數(shù)據(jù)失敗!"));
    },
    requestList() {
        return new Promise((resolve, reject) => {
            wx.request({
                url: "https://mock.com/aaa",
                success: resolve,
                fail: reject
            });
        });
    }
});

那么，到現(xiàn)在，基本上已經(jīng)完成了，愉快的開(kāi)發(fā)，再也不擔(dān)心出現(xiàn)完全沒(méi)有頭緒的錯(cuò)誤啦
最后貼一張我收集到的錯(cuò)誤吧。但是有些字段我做了調(diào)整

最后還是要吐槽一下微信本身它自己的bug有點(diǎn)多。實(shí)在是很無(wú)奈的