用微信小程序云開發(fā)做一個(gè)錯(cuò)誤日志
發(fā)布時(shí)間：2018-12-29 08:39 所屬欄目：小程序開發(fā)教程
為什么要用云開發(fā)做錯(cuò)誤日志：
我司沒有測(cè)試，所以產(chǎn)品上線的話比較多不確定性
云開發(fā)業(yè)務(wù)并不穩(wěn)定，且有限制，所以不建議直接用做整個(gè)小程序的后臺(tái)開發(fā)。
做錯(cuò)誤日志并不會(huì)影響小程序的流程
出bug后，難定位問(wèn)題，尤其是線上錯(cuò)誤
如果叫后端小伙伴給接口記錄錯(cuò)誤，總是不方便，還是自己動(dòng)手豐衣足食
嘗鮮
基于以上的原因，在小程序云開發(fā)剛出來(lái)沒多久，我就開始著手在我的小程序上嘗試構(gòu)建一個(gè)錯(cuò)誤日志:
一般用一門新技術(shù)的第一步，你需要先瀏覽一下小程序云開發(fā)的官方文檔：
https://developers.weixin.qq....
初始化環(huán)境
然后你需要一個(gè)小程序，一個(gè)小程序開發(fā)工具：
新建一個(gè)空白的小程序后，點(diǎn)擊左上角的云開發(fā)按鈕，初始化一個(gè)云開發(fā)的環(huán)境
我這里給它取名叫error-storage。當(dāng)然我是因?yàn)橹笪业男〕绦蛞膊惶赡軙?huì)用到云開發(fā)做后臺(tái)，所以可以浪費(fèi)一個(gè)環(huán)境命名。如果你是要用云開發(fā)做后臺(tái)業(yè)務(wù)的話。那么還是按照微信推薦，一個(gè)做測(cè)試一個(gè)做正式，命名也盡量規(guī)范一點(diǎn)。
然后它的環(huán)境限制也是我們目前不拿它當(dāng)主要后端腳本的主要原因之一。
ok，點(diǎn)擊確定就創(chuàng)建了一個(gè)云開發(fā)后臺(tái)了。
然后我們回到代碼。
我們需要寫后端腳本記錄錯(cuò)誤信息，那么根據(jù)云開發(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ù)集合，打開云開發(fā)控制臺(tái)，點(diǎn)擊數(shù)據(jù)庫(kù)。添加一個(gè)叫errors的集合
編寫接收錯(cuò)誤的云函數(shù)
然后我們先開始寫接收錯(cuò)誤的云函數(shù)
用微信開發(fā)工具打開代碼，然后點(diǎn)擊目錄樹上面的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)單啊）
寫小程序端的錯(cuò)誤處理函數(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)一些錯(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();
// 只有不在開發(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ò)誤:\n', '時(shí)間:\n', new Date(), '\n錯(cuò)誤信息:\n', message, '\nvvvvvvvvvvvvvv\n', 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)聽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)聽上，由于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)完成了，愉快的開發(fā)，再也不擔(dān)心出現(xiàn)完全沒有頭緒的錯(cuò)誤啦
最后貼一張我收集到的錯(cuò)誤吧。但是有些字段我做了調(diào)整
最后還是要吐槽一下微信本身它自己的bug有點(diǎn)多。實(shí)在是很無(wú)奈的
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://m.u-renovate.com/wxmini/doc/course/25053.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
