一次由於全鏈路追蹤引發的 503 問題 一個由非法 header 引發的事故 週六晚上，我剛準備開始在《戴森球計劃》中體驗一把快樂的曲速飛行，一個突如其來的 incident 打斷了我的旅程。它來自於 BFF 的監控告警——503 頻率高到嚇人。 我熟練地登上 Datadog 平臺的 oncall 頁面，點了 acknowledge 按鈕後開始調查。奇怪的是，我沒發現任何可用的 trace。轉頭確認 pod 狀態，發現 po... 2025-12-09 安全
Pcap 流量分析初體驗 前言 雖然我在若干年前打 CTF 的時候已經做過一些流量分析題，但都是非常簡單的題目，例如： 給定一個 pcap 檔案，找到其中的 flag：一般來說直接開啟 WireShark 搜尋即可。 給定一個 pcap 檔案，找到其中的某個檔案：WireShark 選單的 File -> Export Objects 可以直接匯出 HTTP、FTP 等協議的檔案。 但你們也能看出來... 2024-10-28 安全
在 Mac 上實現雷蛇鍵盤幻彩視覺化：燈隨音動，炫出心動 為了應付音遊“高手速、短鍵程、快速回彈”的特點，我入手了雷蛇的獵魂光蛛鍵盤。它除了可以滿足音遊的需求以外，還可以透過 Razer Synapse 3 實現燈光效果的個性化設定，例如透過幻彩視覺化軟體，讓鍵盤的燈光隨著音樂節奏變化。 Windows 上的幻彩視覺化 這是官方的演示影片： 可以看到鍵盤有兩個燈光效果，一個是按鍵區域被當成了螢幕，顯示了音樂的頻譜，另一個是鍵盤的邊框燈光效果，... 2024-06-02 環境
你好，Medium！ 可能你已經發現，這個部落格已經支援了英文的介面，部分文章也提供了英文版本，這是因為我希望自己的一些實踐經驗和思考能被更多的人看到。 為了進一步擴大文章的受眾範圍，我決定將（自認為高質量的）技術文章映象到 Medium 平臺，舊文章也會慢慢同步過去。 這個部落格依舊會作為我釋出內容的主力，包括一些與技術無關的文章，以及一些新的網站模組（或許以後會有畫廊？）。所以敬請期待吧！ ... 2024-03-03 日常
發版輔助工具：因為規範，所以有效 業務擴張導致的問題 隨著公司前幾年的擴張，部門內的團隊越來越多、業務越來越複雜。為了應對這種情況，前端團隊使用了微前端，後端團隊則使用了微服務。單個倉庫的維護成本確實變低了，但這又帶來了另外幾個問題： 業務模組歸屬的團隊可能會變化，例如“訂單追蹤服務”之前屬於團隊 A，但有一天拆到了團隊 B； 很難整理出網狀的模組呼叫關係，一個業務需求可能會改動到多個倉庫的程式碼，例如我們對接一個新的物流... 2024-02-06 環境
【多圖預警】日本のシティウォーク（ＣＩＴＹ ＷＡＬＫ）！ 說來慚愧，我的第一本護照在十年間完全沒有用上，然後就要過期了……只能讓第二本護照來解決了。 五年前，我有考慮過出國玩一玩，但後來隨著拖延症和疫情就完全沒有開始做計劃；直到今年十一，看到一個朋友去日本來了一場說走就走的旅行，加上剛好另一個朋友在日本工作，我的熱情又燃起來了——於是也來了一場說走就走的旅行。 護照和簽證 今年初疫情“結束”後，我立即抓緊時間申請了護照換髮，新的護照就能用到 20... 2023-11-18 日常
另一種形式的“微前端”——彈窗內嵌子應用 有些時候，架構設計不需要大張旗鼓，一些簡單的技術組合也能解決問題。 為了使用者體驗 去年 Q1 我所負責的專案有一個需求，當用戶點選編輯頁面內的某些按鈕時，會彈出一個彈窗，用於配置其它域的內容。這裡以最經典的使用者配置流程舉例（只是舉例，實際需求不是使用者管理，域的內容遠比這個複雜，而且域之間的關聯也不止這麼簡單）： 系統中有使用者、角色、許可權碼三個域，分別有各自的管理頁面； 三個域之間有關聯... 2023-08-10 開發
一次 PNA 問題的定位經驗（Chrome NetLog Viewer 入門） 作為一個電商平臺，使用者下單時，我們提供了一個頁面讓其選擇自提點。一天下午，同事突然發現這個頁面會多請求一遍介面，具體現象是： 先是一個 Pre-flight/OPTIONS 請求（因為介面跨域），但是這個介面失敗了，從 F12 的 network 介面只能看到 net::ERR_FAILED ，看不到具體的錯誤資訊，從 console 介面也沒有任何報錯。 然後是一個正常的 Pre-fl... 2023-06-02 環境
為 PNPM peer 新增 NPM alias 支援（PNPM 與 VSCode 動態除錯入門） 在之前做元件庫的多版本共存時，我遇到了這樣一個問題： PNPM 如何安裝多個版本的包？ 似乎唯一的解決方法是使用 alias（下文的 components 是示例包名，不是 NPM 上面實際的包）： pnpm i components@3 pnpm i components-next@npm:components@4 import xxxV3 from 'componen... 2023-03-26 開發
追根究底：不開啟 DevTools 時，console.log 會不會記憶體洩漏？ 太長不看：會。並且雖然 Chromium 有試圖做限制，但因為方法不合適所以並沒能解決問題。 JavaScript 的記憶體洩漏原因有很多，例如 DOM、計時器、閉包、意外的全域性變數，以及本文的主題： console.log 。關於 console.log 會不會造成記憶體洩漏，掘金上面有大佬發過兩篇文章： 千萬別讓 console.log 上生產！用 Performance 和 Mem... 2023-02-28 環境
多版本共存——巨型專案元件庫升級的必經之路 Update 2023-07-19 目前已經有更簡單的方式：PNPM 已經支援帶有 alias 的 peer dependencies 查詢，不需要用 hooks 了；透過實現跟 Ant Design 類似的 prefixCls 和 modifyVars 功能，也可以控制組件庫選擇器的字首以避免樣式衝突。 元件庫升級是一個令開發者頭痛的事情，即使像 Ant Design 這種... 2023-01-20 環境