關(guān)于一次線上出錯(cuò)的思考--如何規(guī)避線上程序崩盤

LiuRhoRamen 發(fā)布于2019-08-22 17:57 / 2809人閱讀

摘要：近日在工作中由于疏忽問題導(dǎo)致某個(gè)客戶的系統(tǒng)直接崩盤，極大的影響了用戶使用產(chǎn)品的體驗(yàn)。在經(jīng)過修改之后，不得不思考下在日常開發(fā)中的一些壞習(xí)慣以及如何規(guī)避這些日常問題了。同時(shí)由于我們未能對(duì)錯(cuò)誤進(jìn)行好的處理，導(dǎo)致程序直接卡死。

近日在工作中由于疏忽問題導(dǎo)致某個(gè)客戶的系統(tǒng)直接崩盤，極大的影響了用戶使用產(chǎn)品的體驗(yàn)。在經(jīng)過修改之后，不得不思考下在日常開發(fā)中的一些壞習(xí)慣以及如何規(guī)避這些日常問題了。

在日常開發(fā)中，我們往往會(huì)有很多不好的習(xí)慣，寫出一些非常不健壯的代碼，導(dǎo)致由于數(shù)據(jù)和條件的多樣性，程序未能作出很好的預(yù)判。同時(shí)由于我們未能對(duì)錯(cuò)誤進(jìn)行好的處理，導(dǎo)致程序直接卡死。雖然這些問題可能是非常“低級(jí)”的錯(cuò)誤，但也是非常常見的錯(cuò)誤，所以有必要拿出來(lái)說一說。

1.為鍵值匹配設(shè)定默認(rèn)值

針對(duì)以下這種鍵值匹配，我們往往并不能對(duì)所有的可能進(jìn)行枚舉，建議對(duì)其設(shè)置通用的默認(rèn)值，也避免了在業(yè)務(wù)邏輯中進(jìn)行重復(fù)的處理。避免為匹配到正確的值而報(bào)錯(cuò)。

const map = (obj, defaultValue) => {
  return new Proxy(obj, {
    get (target, key) {
      // 你可以在這里進(jìn)行其他處理
      return Reflect.get(target, key, receiver) || defaultValue
    }
  })
}
const typeValueMap = map({
  a: {
    color: "red",
    desc: "紅色"
  },
  b: {
    color: "blue",
    desc: "藍(lán)色"
  }
}, {
  color: "ccc",
  desc: "灰色"
})

const result = typeValueMap[type]

2.當(dāng)css-modules不能正確匹配時(shí)，不直接throw

css-modules會(huì)針對(duì)未能匹配的樣式名，直接拋出問題，使整個(gè)模塊崩掉。在生產(chǎn)環(huán)境中，個(gè)人覺得這種做法可能過于激進(jìn)了，當(dāng)然官方也提供了handleNotFoundStyleName參數(shù)，用于設(shè)置未匹配時(shí)，是直接throw, warn還是忽略。在此我們可以進(jìn)行統(tǒng)一的處理：

import cssmodules from "react-css-modules"

export default (style, allowMutiple = false) => cssmodules(style, {
  allowMultiple,
  handleNotFoundStyleName: "log"
})

3.對(duì)未知的事件進(jìn)行try/catch

程序的執(zhí)行過程中，我們往往無(wú)法保證傳入的數(shù)據(jù)是我們想要的，因此我們需要對(duì)一些不能保證的過程進(jìn)行try/catch，防止程序卡死。這也是很基礎(chǔ)的一個(gè)內(nèi)容了，但是保持良好的代碼風(fēng)格還是很重要的！

let ret
try {
  ret = JSON.parse(json)
} catch (error) {
  // 錯(cuò)誤處理，錯(cuò)誤上報(bào)
}

4.使用ErrorBoundary對(duì)錯(cuò)誤進(jìn)行友好提示，保證其他模塊的可用性

類似try/catch，在react 16中也提供了對(duì)組件內(nèi)部異常進(jìn)行捕獲的機(jī)制。我們可以利用這個(gè)機(jī)制，對(duì)錯(cuò)誤進(jìn)行友好的提示，避免整個(gè)程序卡死，保證其他模塊是可用的，同時(shí)可以進(jìn)行錯(cuò)誤上報(bào)等操作。

export default class ErrorBoundary extends Component {
  state = {
    error: false
  }

  componentDidCatch(error, info) {
    const { onError = report, children, ...others } = this.props
    this.setState({
      error: {
        error,
        info,
        prop: others
      }
    })
    onError(error, info, others)
  }

  render() {
    const { error } = this.state

    if (error) {
      return 
    }
    return this.props.children
  }
}

5.及時(shí)進(jìn)行錯(cuò)誤回傳，監(jiān)控平臺(tái)的穩(wěn)定性

通過配合類似sentry這樣的平臺(tái)錯(cuò)誤上報(bào)與收集，可以很方便的拿到用戶的錯(cuò)誤信息，錯(cuò)誤時(shí)的props等數(shù)據(jù)，方便定位問題，拿到重要的反饋信息。

6.總結(jié)

總的來(lái)說，很多情況下錯(cuò)誤的誕生還是由于我們代碼的“不健壯”導(dǎo)致的，所以在使用其他方案進(jìn)行規(guī)避的同時(shí)，如何提升代碼質(zhì)量，保證代碼穩(wěn)定運(yùn)行，是我們需要不斷追求與提升的。