用微信小程序云開發(fā)做一個錯誤日志
發(fā)布時間：2018-12-29 08:39 所屬欄目：小程序開發(fā)教程
為什么要用云開發(fā)做錯誤日志：
我司沒有測試，所以產(chǎn)品上線的話比較多不確定性
云開發(fā)業(yè)務(wù)并不穩(wěn)定，且有限制，所以不建議直接用做整個小程序的后臺開發(fā)。
做錯誤日志并不會影響小程序的流程
出bug后，難定位問題，尤其是線上錯誤
如果叫后端小伙伴給接口記錄錯誤，總是不方便，還是自己動手豐衣足食
嘗鮮
基于以上的原因，在小程序云開發(fā)剛出來沒多久，我就開始著手在我的小程序上嘗試構(gòu)建一個錯誤日志:
一般用一門新技術(shù)的第一步，你需要先瀏覽一下小程序云開發(fā)的官方文檔：
https://developers.weixin.qq....
初始化環(huán)境
然后你需要一個小程序，一個小程序開發(fā)工具：
新建一個空白的小程序后，點(diǎn)擊左上角的云開發(fā)按鈕，初始化一個云開發(fā)的環(huán)境
我這里給它取名叫error-storage。當(dāng)然我是因?yàn)橹笪业男〕绦蛞膊惶赡軙玫皆崎_發(fā)做后臺，所以可以浪費(fèi)一個環(huán)境命名。如果你是要用云開發(fā)做后臺業(yè)務(wù)的話。那么還是按照微信推薦，一個做測試一個做正式，命名也盡量規(guī)范一點(diǎn)。
然后它的環(huán)境限制也是我們目前不拿它當(dāng)主要后端腳本的主要原因之一。
ok，點(diǎn)擊確定就創(chuàng)建了一個云開發(fā)后臺了。
然后我們回到代碼。
我們需要寫后端腳本記錄錯誤信息，那么根據(jù)云開發(fā)的文檔，我們需要修改project.config.json
給他配置一下小程序代碼放在哪里，后端代碼放在哪里。
以下是我的配置:
我把小程序文件都放在了根目錄下的client文件夾內(nèi)，而云函數(shù)的文件則都放在了根目錄的server文件夾的cloudFunctions里
那么現(xiàn)在我們的目錄結(jié)構(gòu)是這樣的。我們需要手動移動一下我們的小程序代碼。
注意這里project.config.json是在根目錄
現(xiàn)在先添加一個數(shù)據(jù)庫集合，打開云開發(fā)控制臺，點(diǎn)擊數(shù)據(jù)庫。添加一個叫errors的集合
編寫接收錯誤的云函數(shù)
然后我們先開始寫接收錯誤的云函數(shù)
用微信開發(fā)工具打開代碼，然后點(diǎn)擊目錄樹上面的cloudFunctiions目錄，新建一個云函數(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;
};
這面這段代碼很簡單就是將小程序端傳過來的錯誤寫進(jìn)數(shù)據(jù)庫里面，錯誤信息是什么由小程序端決定，它僅僅只是將所有數(shù)據(jù)丟進(jìn)數(shù)據(jù)庫去而已
保存字后再次右鍵cloudFunctions選擇上傳并部署。那么我們的服務(wù)端就基本搞定了。（好簡單啊）
寫小程序端的錯誤處理函數(shù)
首先，根據(jù)教程，我們要在app.js里面做云能力初始化
在app.js的第一行添加代碼
try {
wx.cloud.init({ // 云開發(fā)初始化
env: '云環(huán)境id',
traceUser: true
});
} catch(err) {}
給它加上catch是因?yàn)榉乐钩霈F(xiàn)一些錯誤導(dǎo)致app.js運(yùn)行失敗，那簡直是災(zāi)難吧！
這里的env是你的云環(huán)境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是因?yàn)榕c后端約定如果有什么錯誤，則帶一個msg的描述
// 而message則是傳入進(jìn)來備用的錯誤信息
confirmText: '返回首頁',
cancelText: '繼續(xù)操作',
success: res => {
if (res.confirm) {
// 重新加載首頁
wx.switchTab({
url: '/pages/index/index'
});
} else {
// 取消就不管了
}
}
});
}
// 上傳到小程序云數(shù)據(jù)庫
try {
let userInfo = getApp().globalData.userInfo,
systemInfo = wx.getSystemInfoSync(),
page = getCurrentPages();
// 只有不在開發(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ā)生錯誤:\n', '時間:\n', new Date(), '\n錯誤信息:\n', message, '\nvvvvvvvvvvvvvv\n', error);
};
};
如上，除了錯誤信息之外，還儲存了系統(tǒng)信息，網(wǎng)絡(luò)類型，最頂部的頁面路由，錯誤時間，用戶信息，版本號等(這里我加了個config.js用以儲存版本號，版本描述等信息)
用try catch包起來也是為了防止觸發(fā)錯誤導(dǎo)致死循環(huán)
并且為了方便使用，我將其直接掛載到global。不喜歡全局變量的童鞋可以選擇export出去再引用
并且在觸發(fā)錯誤的時候彈出一個提示框提示錯誤了。
錯誤處理函數(shù)的使用
那么接下來就是對這個方法的使用了，首先我們要監(jiān)聽app.js的onError方法，小程序頁面邏輯出現(xiàn)錯誤都會到這個方法內(nèi)
request('./utils/error.js'); // 別忘了引入error.js
App({
onError: global.onError('程序發(fā)生錯誤') // 這里返回接受錯誤的函數(shù)的閉包，并且傳入的'程序發(fā)生錯誤'則是未知錯誤發(fā)生時的提示語
});
而其他的應(yīng)用基本是應(yīng)用到在promise的錯誤監(jiān)聽上，由于promise中的錯誤不會被app.js的onError接收到，所以我們需要在每個promise的catch中使用global.onError
這也是我為什么將onError掛載global的原因，因?yàn)榛久總€頁面都會用到，所以每個頁面去引用的話很麻煩
例子:
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)完成了，愉快的開發(fā)，再也不擔(dān)心出現(xiàn)完全沒有頭緒的錯誤啦
最后貼一張我收集到的錯誤吧。但是有些字段我做了調(diào)整
最后還是要吐槽一下微信本身它自己的bug有點(diǎn)多。實(shí)在是很無奈的
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://www.xiuhaier.com/wxmini/doc/course/25053.html 復(fù)制鏈接
如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
