99%的程式都沒有考慮的網路異常
> 本文由雲 + 社群發表
絕大多數程式只考慮了介面正常工作的場景,而使用者在使用我們的產品時遇到的各類異常,全都丟在看似 ok 的 try catch 中。如果沒有做好異常的相容和兜底處理,會極大的影響使用者體驗,嚴重的還會帶來安全和資損風險。
介面異常,通常可以分為以下三類:
- CGI 邏輯出錯。如呼叫方入參缺失類業務邏輯報錯;
- 服務不穩定。如伺服器不穩定導致 nginx 各類 500、502,cgi 路徑調整導致的 404
- 使用者網路環境差。如,網路不穩定、網速慢、運營商劫持等
那麼,我們在寫程式碼時,如何快速的模擬這些介面異常,做好程式的相容處理呢?
今天向大家介紹網路除錯神器 whistle 的網路異常除錯方法,如果你還沒用過 whistle,請參考《8102 年的程式設計師不需要 Hosts 和 Fiddler》。
假設我們有以下前端頁面 index.html,放置在自己的本地路徑:
<p id="success" style="color:green;"></p>
<p id="fail" style="color:red;"></p>
<script>
fetch(`/mock?r=${Math.random()}`)
.then(response => {
return response.json()
})
.then(v => {
document.getElementById('success').innerHTML = v.data;
}).catch(err => {
document.getElementById('fail').innerHTML = err.message;
})
</script>
接下來,開啟 whistle Rules 配置皮膚 http://127.0.0.1:8899/#rules ,配置模擬的 demo page 和 mock CGI:
*/mock file://({"code":0,"data":"success"}) # 配置 mock cgi 為模擬的 json 資料
example.com file:///Users/kaiye/Projects/Markdown/20181213/ # 配置任意域名到本地 demo 目錄,這裡注意替換成自己的路徑
開啟 http://example.com ,正常邏輯下頁面展示出了綠色的 success ,現在我們開始加入一些網路異常。
1、業務邏輯異常處理
例如 CGI 沒有返回 data
欄位,而是返回了一個錯誤碼 code
和對應的 message
,針對這種業務邏輯異常我們只需在第二個 then
中做好 code 值的判斷即可(注意,這裡的 code、message、data 只是示例,實際業務 CGI 中的 JSON 結構體的欄位名很可能不同):
fetch(`/mock?r=${Math.random()}`)
.then(response => response.json())
.then((v) => {
// 業務邏輯異常處理
if (v.code !== 0) {
return Promise.reject(new Error(`ERROR_LOGIC_CODE:${v.code}`));
}
document.getElementById('success').innerHTML = v.data;
})
.catch((err) => {
document.getElementById('fail').innerHTML = err.message;
});
相應的 whistle 配置如下:
*/mock file://({"code":12345,"message":"some_logic_error"}) # 模擬業務邏輯異常
2、伺服器異常處理
如果伺服器直接丟擲了 502 錯誤碼,我們希望程式碼能給使用者提示的同時,再做一個異常上報。
fetch(`/mock?r=${Math.random()}`)
.then((response) => {
// 伺服器異常處理
if (response.ok) {
return response.json();
}
return Promise.reject(new Error(`ERROR_STATUS_CODE:${response.status}`));
})
.then((v) => {
// 業務邏輯異常處理
if (v.code !== 0) {
return Promise.reject(new Error(`ERROR_LOGIC_CODE:${v.code}`));
}
document.getElementById('success').innerHTML = v.data;
})
.catch((err) => {
const [type, value] = err.message.split(':');
// 異常型別上報
console.log(type, value);
document.getElementById('fail').innerHTML = err.message;
});
通過 whistle 的模擬配置如下:
*/mock statusCode://502 # 模擬 HTTP 狀態碼異常
3、介面被劫持注入
如果 CGI 被運營商劫持注入,可能導致介面返回一個不合法的 JSON 結構,最前面的 response.json()
會拋異常,我們可以提前 catch 住:
fetch(`/mock?r=${Math.random()}`).then((response) => {
// 伺服器異常處理
if (response.ok) {
return (
response
.json()
// 介面資料解碼異常處理
.catch(err => Promise.reject(new Error('ERROR_DECODE_JSON')))
);
}
return Promise.reject(new Error(`ERROR_STATUS_CODE:${response.status}`));
});
whistle 模擬配置如下:
*/mock file://(<div>hijacking</div>{"code":0,"data":"success"}) # 模擬介面被劫持注入 1
藉助 htmlAppend 和 values 配置,可以模擬更復雜的注入示例:
*/mock file://({"code":0,"data":"success"}) htmlAppend://{hijacking.html} # 模擬介面被劫持注入 2
```hijacking.html
<script>
alert('hijacking')
</script>
## 4、使用者網路不穩定
**如果我們要模擬請求發出 10 秒後斷網或網路不通的情況**,可以通過 whistle 這樣配置:
```javascript
*/mock reqDelay://10000 enable://abort # 模擬 10 秒超時後網路不通
讓使用者苦苦等待 10 秒,再報錯的體驗太糟糕。我們可以封裝一個能配置超時時間的請求傳送函式,同時把上面提到的錯誤異常都一起配置進來。
<p id="success" style="color:green;"></p>
<p id="fail" style="color:red;"></p>
<script>
function myFetch(url, configOptions) {
const options = Object.assign(
{
timeout: 3000
},
configOptions
)
const { timeout } = options
return new Promise((resolve, reject) => {
// 超時異常處理
const timer = setTimeout(() => {
reject(new Error(`ERROR_TIMEOUT:${timeout}`))
}, timeout)
fetch(url, options)
.then(data => {
clearTimeout(timer)
resolve(data)
})
.catch(err => {
clearTimeout(timer)
reject(err)
})
})
.then(response => {
// 伺服器異常處理
if (response.ok) {
return (
response
.json()
// 介面資料解碼異常處理
.catch(err => Promise.reject(new Error('ERROR_DECODE_JSON')))
)
} else {
return Promise.reject(
new Error(`ERROR_STATUS_CODE:${response.status}`)
)
}
})
.then(v => {
// 業務邏輯異常處理
if (v.code !== 0) {
return Promise.reject(new Error(`ERROR_LOGIC_CODE:${v.code}`))
} else {
return v.data
}
})
.catch(err => {
const [type, value] = err.message.split(':')
// 異常型別上報
console.log(type, value)
return Promise.reject(err)
})
}
myFetch(`/mock?r=${Math.random()}`)
.then(data => {
document.getElementById('success').innerHTML = data
})
.catch(err => {
document.getElementById('fail').innerHTML = err.message
})
</script>
這樣,自定義的 myFetch
只需關注業務具體邏輯,針對不同的 catch error 做對應的處理。
除以上提到的協議命令字外,whistle 還支援 resSpeed 用於模擬低網速傳輸(單位:kb/s),tpl 協議則可以根據請求傳入引數來動態模擬不同的資料。在 Frames 皮膚,還可以對 WebSocket/Socket 請求進行暫停、延遲等網路異常的模擬。
小程式 fetch API 實現
最後,留一道思考題。
近來微信小程式開發非常火,小程式原生提供的 wx.request API 能用於傳送 HTTPS 請求,請在它的基礎之上進行封裝,支援 promise 呼叫和 timeout
超時時間定義(小程式預設的請求超時定義在 app.json 中,不夠靈活),並針對以上提到的 HTTP 狀態碼異常、介面劫持注入、慢網路、無網路狀態等各種網路異常進行相容處理。
歡迎留言分享你的程式碼實現
此文已由作者授權騰訊雲 + 社群釋出
- 加微信實戰群請加微信(註明:實戰群):gocnio
相關文章
- 學習網路安全可以考證嗎?常見的證書有哪些?
- Linux TCP程式設計常見問題考慮LinuxTCP程式設計
- 自學的程式設計師一點競爭力都沒有麼?投簡歷都沒有回應?程式設計師
- 資訊圖:沒有網際網路的世界
- 程式碼分層導致Hibernate懶載入失效的問題我認為沒有必要考慮
- 網站在架構時要考慮的事情網站架構
- Go的併發沒有它,就像iphone沒有網路一樣GoiPhone
- 網路異常測試初探
- Java培訓簡述如何處理沒有被捕獲的異常Java
- [轉]Oracle的異常控制編碼參考Oracle
- 採購網路損傷儀需要考慮的重點一、穩定性
- 2021年您應該考慮的網路升級問題
- 觸發器儘量考慮內部程式碼過程的封裝(在11g中沒有差別)觸發器封裝
- 阿里雲異常流量及異常網路連線的安全解決過程阿里
- muduo網路庫Exception異常類Exception
- 用Kotlin的方式來處理網路異常Kotlin
- 無線網路異常的一次診斷
- 計算機網路之面試常考計算機網路面試
- 有沒有什麼網路請求攔截的庫?
- 安卓7.0安裝app產生android.os.FileUriExposedException異常(都檢查檢查你的自動更新有沒有問題吧)安卓APPAndroidException
- 2023值得考慮的bi軟體有哪些?
- 有沒有cqrs的具體實現可供參考?
- 永遠考慮那個擁有更強寫作能力的程式設計師程式設計師
- Web應用上線前,程式設計師該考慮的技術有這些Web程式設計師
- 網站在架構階段所要考慮的事兒網站架構
- ubuntu沒有有線網路的一種解決辦法Ubuntu
- Win10提示lsp狀態異常如何解決 lsp網路連線異常的方法Win10
- 計算機網路之面試常考題計算機網路面試
- windows 打補丁後網路異常Windows
- 網際網路從此沒有 BATBAT
- 網路網賭系統注單異常賬戶異常提款不了怎麼辦?
- 什麼是異常?python處理異常的方式有幾種?Python
- 為什麼每家企業都應該考慮使用開源的 POS 系統
- win10網路連線配置異常如何解決_win10系統網路連線配置異常的解決教程Win10
- 物聯網裝置的5個關鍵考慮因素
- 基於網路回溯分析技術的異常行為分析
- MongoDB分片需要考慮的事項MongoDB
- 寫給考慮創業的年輕程式設計師創業程式設計師