記錄並分析分析一個yarn存在6年之久的bug

最近遇到一個yarn的bug，搜尋之後發現它竟然存在6年之久，這到底是個怎樣神奇的問題？經過一番分析排查，我給了6個解決方案。 。 。

1、問題描述

最近接手的幾個專案套件管理器用的是yarn@v1.22.19，在安裝依賴後無論是否成功，總是出現網路連線問題而且會卡很長時間，然後會出現幾行這樣的異常日誌：info There appears to be trouble with your network connection. Retrying...。

有時一些神奇的套件(例如 node-sass)出現異常會導致安裝失敗，結果卡了半天才發現失敗，真的讓人很崩潰。另外在yarn 的 github 倉庫中有數十條相關的 issue，時間跨度從2016年到2022年足足6年，原因和方案眾說紛紜。我很好奇這到底是個什麼神奇的問題居然6年都沒解決，因此決定一探究竟。 【相關教學推薦：nodejs影片教學 、程式設計影片】

2、問題排查

2.1、關鍵字搜尋

2.1.1、搜尋github

碰到沒啥思路的問題和報錯，第一技巧是搜它。在yarn 的github 倉庫中搜尋報錯訊息There appears to be trouble with your network connection，可以看到結果中有1個相關程式碼和91個相關issue。在 issue

裡找了一會兒沒找到合適的方案，接著進入下一步：搜尋程式碼。

2.1.2、搜尋程式碼

因為網路原因這裡直接前往本機 yarn 的安裝目錄進行尋找。用vscode 開啟yarn 的安裝目錄（我的本機目錄是~/.volta/tools/image/yarn/1.22.19），全域搜尋關鍵字There appears to be trouble with your network connection。可以看到結果同樣只有1個，整串錯誤訊息賦值給了一個變數offlineRetrying

。

全域搜尋關鍵字offlineRetrying 共2處結果，除去上一步驟的結果只有1處引用。這裡的程式碼主要是拋出異常和重試，沒有更多關鍵字可以挖掘。接下來進入調試環節，在 offlineRetrying

這行程式碼前面打個斷點，調試看看具體錯誤訊息和上下文。

2.2、程式偵錯

2.2.1、確定偵錯指令

安裝依賴需要執行指令yarn， 那要怎麼除錯它呢？ yarn 是一個npm 套件，執行時實際上是呼叫node xxx.js，而這個xxx.js 一般配置在package.json 的bin 欄位中。從下圖可以看到yarn 對應的檔案是./bin/yarn.js，所以可以用這行偵錯指令：node --inspect-brk ~/ .volta/tools/image/yarn/1.22.19/bin/yarn.js。 （關於Node.js 的調試可以參考官方文件

）

2.2.2、開始調試

先在變數offlineRetrying 所在的程式碼行cli.js:66099之前加入debugger

語句。 ######

然後回到業務專案的根目錄中，執行偵錯指令 node --inspect-brk ~/.volta/tools/image/yarn/1.22.19/bin/yarn.js。此時程式掛起等待偵錯工具連接，並列印以下日誌：

接著開啟chrome 內建的偵錯頁面chrome://inspect/#devices，找到檔案路徑相同的Target，點選inspect按鈕開始偵錯。

接著chrome 會開啟一個獨立的DevTools 窗口，由於使用的是node --inspect-brk 指令，此時DevTools 自動斷點在被偵錯檔案的起始位置，需要按下F8 跳過該斷點繼續執行。

等待一小段時間後，DevTools 停在先前新增的斷點處，可以看到這是一個逾時異常，導致異常的請求是GET: https://yarnpkg.com/latest-version。使用 curl 請求這個鏈接，結果是 210s 逾時。使用代理程式存取這個連結可以成功，但是請求被重定向到 classic.yarnpkg.com/latest-vers…，其回傳結果是 1.22.19。

至此問題基本上清楚了，主要是請求超時並且多次重試導致了文章開頭的問題，可以使用代理規避這個問題。如果排查到此結束就沒意思了。

2.2.3、深入檢查

為了進一步了解yarn 為什麼要請求yarnpkg.com/latest-vers…，以此連結為關鍵字在程式碼中搜索，找到了這個關鍵字鏈：https://yarnpkg.com/latest-version -> SELF_UPDATE_VERSION_URL -> _checkUpdate -> checkUpdate，實際呼叫關係則剛好相反，具體如下圖：

##3、確定原因

前面已經推斷出逾時連結的呼叫關係是：

checkUpdate ->  _checkUpdate  ->  SELF_UPDATE_VERSION_URL -> https://yarnpkg.com/latest-version，再結合checkUpdate函數的註解和程式碼來看，每次執行yarn 安裝指令的時候都會要求yarnpkg.com/latest-vers…，從而檢查是否有新版本需要更新。但這個連結存取逾時而且失敗後會重試，預設的超時時間為 30s 重試次數為 4 次，所以安裝完成後還會卡 120s 程式才會真正結束。

4、解決方案

引發問題的關鍵因素有3個：檢查更新、逾時、重試，因此可以從優化網路、調整超時時間、跳過檢查更新3個方向去解決問題，以下有6個解決方案可以參考。

4.1、優化網路

這個想法很容易想到，既然存取逾時，那就提升請求速度。

【方案1】使用代理程式最佳化網路（建議）

• $ yarn install --proxy "http://{domain}:{port}" --https-proxy "http://{domain}:{port}"

#以我的開發環境舉例，指令長這樣：

yarn install --proxy "http://10.180.55.191:7890" --https-proxy "http://10.180.55.191:7890"

4.2、調整超時時間

這個想法比較直接，適用場景更多些，如果其他方法不奏效可以試試。

【方案2】修改network-timeout（看情況）

#預設逾時時間為30s 可以改小為2s，修改後異常依然存在，但可以讓檢查更新快速失敗不用等幾分鐘。

yarn install --network-timeout 2000

有一部分開發者表示出現異常是因為某些大型

npm 套件安裝太久超過了預設逾時時間30s，因此也可以把network-timeout 改得更大避免異常。

4.3、跳過檢查更新

這個想法的解決方案主要來自

checkUpdate 函數中的幾個終止條件。

• 【方案3】修改配置禁止检查更新（推荐）

$ yarn config set disable-self-update-check true$ yarn install

• 【方案4】修改配置把上次更新时间调到百年后（推荐）

$ yarn config set lastUpdateCheck 1e13
$ yarn install

• 【方案5】执行命令时禁用交互式提示（推荐）

$ yarn install --non-interactive

• 【方案6】修改代码跳过检查更新（不推荐）
  • 找到 yarn 的安装目录注释 checkUpdate 的调用，具体代码行为 cli.js:7261，修改后长这样：// this.checkUpdate();
  • 也可以修改其他可以阻断 checkUpdate 函数的代码...

5、最后

以上主要是分享一些问题分析排查的经验，另外也提供了一些 yarn install 超时异常的解决方案，希望能对前端同学们有所帮助。

在快写完这篇文章的时候，yarnpkg.com/latest-vers… 已经可以正常访问，不知道还会不会有人再遇到这个问题。

另外我在 yarn 的 github issue 中回复了以上的解决方案，希望前端同学们少受点折磨，也希望官方早点修复这个6年陈的老Bug。?

更多编程相关知识，请访问：编程教学！！

以上是記錄並分析分析一個yarn存在6年之久的bug的詳細內容。更多資訊請關注PHP中文網其他相關文章！