記一次前端打包錯誤排查

雖然標題稱錯誤爲前端打包錯誤，但更具體的說這個錯誤是react-native打bundle包的時候出現的。由於排查過程有必定的通用性，因此我將這個錯誤描述成是前端打包的錯誤。

錯誤信息以下圖所示：

從錯誤信息能夠看出這個錯誤是json字串解析錯誤（JSON.parse），而且跟緩存相關(Cache.get)。然而除此以外就看不出更多的信息了（上面的描述跟react native沒有任何關係，沒有引入過上面說的包，我也不清楚是哪的錯誤）。

那麼天然可以想到的方案是先清空npm包緩存，而後再看錯誤是否重現。我就這麼作了，清空緩存沒效後我又刪除了依賴包，從新install。也是然並軟。

接下來這麼辦？去Google搜索這招我以爲沒毛病。然而也許是這種類型的bug太常見（指JSON解析錯誤），也有多是react-native這種打包錯誤不多見。我將關鍵詞增增減減搜了半天愣是沒有找到相關的錯誤。

正當我束手無策之時，我發現這個打包錯誤也能定位到對應的打包代碼段。代碼以下，

class FileStore {
  /*...*/
    get(key) {
        try {
            return JSON.parse(fs.readFileSync(this._getFilePath(key), "utf8"));
        } catch (err) {
            if (err.code === "ENOENT") {
                return null;
            }

            throw err;
        }
    }
    _getFilePath(key) {
        return path.join(
            this._root,
            key.slice(0, 1).toString("hex"),
            key.slice(1).toString("hex")
        );
    }
    /*...*/
}
複製代碼

能夠發現字符串由fs.readFileSync從文件中讀取，而文件路徑由this._getFilePath(key)獲取。那麼咱們只要將字符串和文件路徑打印出來就能夠發現具體出問題的地方了。修改的代碼過於簡單就不發出來了。

小插曲

固然你也許會問爲何不使用打斷點的方式，而使用這麼low B的方案。緣由是我並不知道react-native bundle的命令如何打斷點，網上也沒找到相關說明。若是是npm調用node執行程序的話，在webstorm中，能夠經過在npm scripts命令調用前設置調試字符串實現斷點

webstorm的說明以下，有興趣的能夠看下：

To debug the "pkg" script, make sure the %NODE_DEBUG_OPTION% string is specified as the first argument for the node command you'd like to debug.
For example:
  "scripts": {
    "start": "node %NODE_DEBUG_OPTION% server.js"
  }
複製代碼

經過以上打出的路徑能夠發現，緩存文件存在於用戶目錄下的臨時文件中(AppData\Local\Temp)。

打開文件夾後能夠看到，跟bug說起的名字相關的文件夾具備兩個metro-cache與metro-bundler，將他們同時刪除問題解決。在刪除以前我還作了個備份，防止出現意外，我真是個機靈鬼。

然而故事到此尚未結束

使用react-native bundle --help命令打印能夠發現，react-native bundle自己帶有一個選項--reset-cache。

將原來的緩存放入以後執行：react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --assets-dest ./bundles --dev false --reset-cache

竟然也能夠解決。。。

這個故事事故告訴咱們，解決bug和寫代碼同樣都須要靈性。