從《數字海洋》中的視頻播放Bug案例談程序員的態度

一、簡介

2019年，我曾經在一家公司擔任前端開發工程師，主要負責開發公司官網和數字海洋項目。數字海洋是一個提供在線視頻學習課程的平台，用戶可以通過該平台學習各種課程，但是在運營過程中，我們遇到了一個非常棘手的Bug：在播放視頻的時候，視頻會播放幾秒鐘後自動暫停，刷新頁面就可以繼續播放，但是僅僅是一時的解決辦法，很快又會復現此問題。

二、查找問題

我們經過仔細的分析，一開始懷疑是網路問題，但是通過檢測，網路沒有問題。緊接著我們又懷疑是伺服器問題，通過對伺服器進行排查，也未發現伺服器問題。我們還懷疑是客戶端瀏覽器的問題，但是驗證後也排除了這個問題。看來問題並不好找。

我們當時非常困擾，但是我們並沒有放棄，我們開始投入更多的時間去找尋問題的根源。我們檢查了代碼，嘗試了多種解決方案，但均以失敗告終。

幸運的是，在我與同事互相交流的過程中，我發現了一個通用現象：Bug出現後，刷新頁面就可以正常工作。有了這個線索後，我們逐漸鎖定了問題範圍。我們發現了是在訪問後端介面時出現了問題。

三、修改代碼

我們在開始修改代碼之前，先從後端入手。我們對後台源代碼進行了仔細的檢查，逐一排查可能存在的問題，最終鎖定了問題出現的位置。在請求視頻的URL之後，後端返回的結果中，有一種情況是會返回特定的錯誤代碼。在錯誤代碼出現時，前端客戶端會自動停止向伺服器發送獲取視頻流的請求，導致視頻暫停。

為了解決這個問題，我們修改了相關代碼，使得在遇到該錯誤代碼時，客戶端能夠自動重新向伺服器發送請求，以獲取視頻流。之後，再運行測試，問題已得到解決。

四、總結

這個Bug的解決，雖然花費了我們很多的時間和精力，但是也使得我們對開發過程中的一些問題有了更深的理解。這個案例中最大的收穫就是我們真的牢記：「不要輕易認為你發現了問題的根源，充分探查相關信息，在各個角度下尋找解決方案，從而邁向更高級的程序員！」

五、代碼

async function getVideoStream(url, options) {
  let response = await fetch(url, options);

  let reader = response.body.getReader();
  let isRunning = true;

  while (isRunning) {
    let chunk = await reader.read();
    let buffer = chunk.done ? null : chunk.value.buffer;

    if (buffer) {
      // 處理獲取到的流
      handleVideoStream(buffer);
    } else {
      // 重新向伺服器發送請求，獲取視頻流
      let responseRe = await fetch(url, options);

      if (responseRe.status !== 200) {
        console.error(`Failed to get video stream : ${responseRe.statusText}`);
        isRunning = false;
      } else {
        reader = responseRe.body.getReader();
      }
    }
  }
}