關於一次線上出錯的思考--如何規避線上程序崩盤

近日在工做中因爲疏忽問題致使某個客戶的系統直接崩盤，極大的影響了用戶使用產品的體驗。在通過修改以後，不得不思考下在平常開發中的一些壞習慣以及如何規避這些平常問題了。

在平常開發中，咱們每每會有不少很差的習慣，寫出一些很是不健壯的代碼，致使因爲數據和條件的多樣性，程序未能做出很好的預判。同時因爲咱們未能對錯誤進行好的處理，致使程序直接卡死。雖然這些問題多是很是「低級」的錯誤，但也是很是常見的錯誤，因此有必要拿出來講一說。

1.爲鍵值匹配設定默認值

針對如下這種鍵值匹配，咱們每每並不能對全部的可能進行枚舉，建議對其設置通用的默認值，也避免了在業務邏輯中進行重複的處理。避免爲匹配到正確的值而報錯。

const map = (obj, defaultValue) => {
  return new Proxy(obj, {
    get (target, key) {
      // 你能夠在這裏進行其餘處理
      return Reflect.get(target, key, receiver) || defaultValue
    }
  })
}
const typeValueMap = map({
  a: {
    color: 'red',
    desc: '紅色'
  },
  b: {
    color: 'blue',
    desc: '藍色'
  }
}, {
  color: 'ccc',
  desc: '灰色'
})

const result = typeValueMap[type]

2.當css-modules不能正確匹配時，不直接throw

css-modules會針對未能匹配的樣式名，直接拋出問題，使整個模塊崩掉。在生產環境中，我的以爲這種作法可能過於激進了，固然官方也提供了handleNotFoundStyleName參數，用於設置未匹配時，是直接throw, warn仍是忽略。在此咱們能夠進行統一的處理：

import cssmodules from 'react-css-modules'

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

3.對未知的事件進行try/catch

程序的執行過程當中，咱們每每沒法保證傳入的數據是咱們想要的，所以咱們須要對一些不能保證的過程進行try/catch，防止程序卡死。這也是很基礎的一個內容了，可是保持良好的代碼風格仍是很重要的！

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

4.使用ErrorBoundary對錯誤進行友好提示，保證其餘模塊的可用性

相似try/catch，在react 16中也提供了對組件內部異常進行捕獲的機制。咱們能夠利用這個機制，對錯誤進行友好的提示，避免整個程序卡死，保證其餘模塊是可用的，同時能夠進行錯誤上報等操做。

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 <ErrorBlock error={error} />
    }
    return this.props.children
  }
}

5.及時進行錯誤回傳，監控平臺的穩定性

經過配合相似sentry這樣的平臺錯誤上報與收集，能夠很方便的拿到用戶的錯誤信息，錯誤時的props等數據，方便定位問題，拿到重要的反饋信息。

6.總結

總的來講，不少狀況下錯誤的誕生仍是因爲咱們代碼的「不健壯」致使的，因此在使用其餘方案進行規避的同時，如何提高代碼質量，保證代碼穩定運行，是咱們須要不斷追求與提高的。