我們一起聊聊前端接口容災
作者：小歪
總結下，優點包括不入侵業務代碼，不影響現有業務，隨上隨用，盡可能避免前端純白屏的場景，成本低。劣勢包括使用局限，不適合對數據實效性比較高的業務場景，不支持 IE 瀏覽器。
開篇
你說，萬一接口掛了會怎么樣？
還能咋樣，白屏唄。
有沒有不白屏的方案？
有啊，還挺簡單的。
容我細細細細分析。
原因就是接口掛了，拿不到數據了。那把數據儲存起來就可以解決問題。
思考
存哪里?
第一時間反應瀏覽器本地存儲，想起了四兄弟。
選型對比
特性 | cookie | localStorage | sessionStorage | indexDB |
數據生命周期 | 服務器或者客戶端都可以設置、有過期時間 | 一直存在 | 關閉頁面就清空 | 一直存在 |
數據儲存大小 | 4KB | 5MB | 5MB | 動態，很大 大于250MB |
與服務器通信 | 每次都帶在header中 | 不帶 | 不帶 | 不帶 |
兼容性 | 都支持 | 都支持 | 都支持 | IE不支持，其他主流都支持 |
考慮到需要存儲的數據量，5MB 一定不夠的，所以選擇了 IndexDB。
考慮新用戶或者長時間未訪問老用戶，會取不到緩存數據與陳舊的數據。
因此準備上云，用阿里云存儲，用 CDN 來保障。
總結下：線上 CDN、線下 IndexDB。
整體方案
整體流程圖
圖片
CDN
先講講線上 CDN。
通常情況下可以讓后端支撐，本質就是更新策略問題，這里不細說。
我們講講另外一種方案，單獨啟個 Node 服務更新 CDN 數據。
流程圖
圖片
劫持邏輯
劫持所有接口，判斷接口狀態與緩存標識。從而進行更新數據、獲取數據、緩存策略三種操作
通過配置白名單來控制接口存與取
axios.interceptors.response.use(
async (resp) => {
const { config } = resp
const { url } = config
// 是否有緩存tag，用于更新CDN數據。目前是定時服務在跑，訪問頁面帶上tag
if (this.hasCdnTag() && this.isWhiteApi(url)) {
this.updateCDN(config, resp)
}
return resp;
},
async (err) => {
const { config } = err
const { url } = config
// 是否命中緩存策略
if (this.isWhiteApi(url) && this.useCache()) {
return this.fetchCDN(config).then(res => {
pushLog(`cdn緩存數據已命中，請處理`, SentryTypeEnum.error)
return res
}).catch(()=>{
pushLog(`cdn緩存數據未同步，請處理`, SentryTypeEnum.error)
})
}
}
);緩存策略
累計接口異常發生 maxCount 次，打開緩存開關，expiresSeconds 秒后關閉。
緩存開關用避免網絡波動導致命中緩存，設置了閥值。
/*
* 緩存策略
*/
useCache = () => {
if (this.expiresStamp > +new Date()) {
const d = new Date(this.expiresStamp)
console.warn(`
---------------------------------------
---------------------------------------
啟用緩存中
關閉時間：${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}
---------------------------------------
---------------------------------------
`)
return true
}
this.errorCount += 1
localStorage.setItem(CACHE_ERROR_COUNT_KEY, `${this.errorCount}`)
if (this.errorCount > this.maxCount) {
this.expiresStamp = +new Date() + this.expiresSeconds * 1000
this.errorCount = 0
localStorage.setItem(CACHE_EXPIRES_KEY, `${this.expiresStamp}`)
localStorage.removeItem(CACHE_ERROR_COUNT_KEY)
return true
}
return false
}唯一標識
根據 method、url、data 三者來標識接口，保證接口的唯一性
帶動態標識，譬如時間戳等可以手動過濾
/**
* 生成接口唯一鍵值
*/
generateCacheKey = (config) => {
// 請求方式，參數，請求地址，
const { method, url, data, params } = config;
let rawData = ''
if (method === 'get') {
rawData = params
}
if (method === 'post') {
rawData = JSON.parse(data)
}
// 返回拼接key
return `${encodeURIComponent([method, url, stringify(rawData)].join('_'))}.json`;
};更新數據
/**
* 更新cdn緩存數據
*/
updateCDN = (config, data) => {
const fileName = this.generateCacheKey(config)
const cdnUrl = `${this.prefix}/${fileName}`
axios.post(`${this.nodeDomain}/cdn/update`, {
cdnUrl,
data
})
}Node定時任務
構建定時任務，用 puppeteer 去訪問、帶上緩存標識，去更新 CDN 數據
import schedule from 'node-schedule';
const scheduleJob = {};
export const xxxJob = (ctx) => {
const { xxx } = ctx.config;
ctx.logger.info(xxx, 'xxx');
const { key, url, rule } = xxx;
if (scheduleJob[key]) {
scheduleJob[key].cancel();
}
scheduleJob[key] = schedule.scheduleJob(rule, async () => {
ctx.logger.info(url, new Date());
await browserIndex(ctx, url);
});
};
export const browserIndex = async (ctx, domain) => {
ctx.logger.info('browser --start', domain);
if (!domain) {
ctx.logger.error('domain為空');
return false;
}
const browser = await puppeteer.launch({
args: [
'--use-gl=egl',
'--disable-gpu',
'--no-sandbox',
'--disable-setuid-sandbox',
],
executablePath: process.env.CHROMIUM_PATH,
headless: true,
timeout: 0,
});
const page = await browser.newPage();
await page.goto(`${domain}?${URL_CACHE_KEY}`);
await sleep(10000);
// 訪問首頁所有查詢接口
const list = await page.$$('.po-tabs__item');
if (list?.length) {
for (let i = 0; i < list.length; i++) {
await list[i].click();
}
}
await browser.close();
ctx.logger.info('browser --finish', domain);
return true;
};效果
手動 block 整個 domain，整個頁面正常展示
圖片
IndexDB
線上有 CDN 保證了，線下就輪到 IndexDB 了，基于業務簡單的增刪改查，選用 localForage 三方庫足矣。
axios.interceptors.response.use(
async (resp) => {
const { config } = resp
const { url } = config
// 是否有緩存tag，用于更新CDN數據。目前是定時服務在跑，訪問頁面帶上tag
if (this.hasCdnTag() && this.isWhiteApi(url)) {
this.updateCDN(config, resp)
}
if(this.isIndexDBWhiteApi(url)){
this.updateIndexDB(config, resp)
}
return resp;
},
async (err) => {
const { config } = err
const { url } = config
// 是否命中緩存策略
if (this.isWhiteApi(url) && this.useCache()) {
return this.fetchCDN(config).then(res => {
pushLog(`cdn緩存數據已命中，請處理`, SentryTypeEnum.error)
return res
}).catch(()=>{
pushLog(`cdn緩存數據未同步，請處理`, SentryTypeEnum.error)
if(this.isIndexDBWhiteApi(url)){
return this.fetchIndexDB(config).then(res => {
pushLog(`IndexDB緩存數據已命中，請處理`, SentryTypeEnum.error)
return res
}).catch(()=>{
pushLog(`IndexDB緩存數據未同步，請處理`, SentryTypeEnum.error)
})
}
})
}
}
);總結
總結下，優點包括不入侵業務代碼，不影響現有業務，隨上隨用，盡可能避免前端純白屏的場景，成本低。劣勢包括使用局限，不適合對數據實效性比較高的業務場景，不支持 IE 瀏覽器。
接口容災我們也是剛弄不久，有許多細節與不足，歡迎溝通交流。
接口容災本意是預防發生接口服務掛了的場景，我們不會很被動。原來是P0的故障，能被它降低為 P2、P3，甚至在某些場景下都不會有用戶反饋。
責任編輯：武曉燕
來源：
政采云技術
