實務討論

2021/8/25

本次讀書會，成員們分享許多處理/追蹤工具，因為目前待的團隊規模都比較小，就沒有訂定這麼嚴謹的錯誤處理，都是出事了直接噴錯進去處理。很多工具也是第一次聽到。

blocking/non-blocking and async/sync

system programming => OS

log常用等級

  • error

  • warning

  • info

  • debug

後端處理

  • 讀 model

  • 量過載

  • 接第三方（出事要甩鍋）

  • log server

  • monitor

  • broadcast KK也沒有做通知

前端處理

  • 渲染出錯 log 傳回後端

  • GTM 蒐集 error 分別成不同 error class 在丟給後端

sentryJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.ioJavascript Error Logging - Sentry.io

Track JS

error boundary

error boundary 會接除了 promise 以外的錯，所以 promise reject 接不到錯

[React] 使用Error Boundary 作為子組件渲染異常的破壞邊界

function loginValidation(data) {
  const schema = Joi.object({
    id: Joi.string()
      .regex(FORMATS.TW_ID)
      .required(),
    password
  });
  return schema.validate(data);
}
if (schema.isValid(data))
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

validation 處理

form表單驗證

react hook form 有接 yup, 背後是if else

if-else / try-catch

try {
   schema.validate(data)
} catch(err) {
    throw new InputError(err)
}
if (!schema.isValid(data)) {
    return res.send(400)
}

error first 有錯就排掉，不會巢狀

QA

都知道會出什麼錯，為什麼要 try-catch 不 if-else？

  • 可能是為了搜集錯誤類別

  • catch 到的要搜集 error 回傳

    axios 錯 mapping throw error msg

js log

  • console.error

  • console.log

有些公司會不拿掉直接在 production 環境上看 log (positive grid)

奇怪的錯誤

zwsp 零寬空格

其他討論

大家的公司每個 ticket 後面會接測試項目嗎？

通通都是bug？ 正常流程開需求的時候就要寫清楚需求，只驗PM有寫到的東西 沒寫的就以做的人為主。所以沒經驗的PM寫出來的需求一定不完整

Previousweek 5 JS 錯誤處理最佳實踐Nextmeno

Last updated