https://harry-su-blog.com/blog A blog recording my coding and climbing journey zh-TW undefined (Harry) undefined (Harry) Thu, 05 Nov 2026 12:00:00 GMT https://harry-su-blog.com/blog/2026/11/05/facebook-sdk-error-reporting-retrospective https://harry-su-blog.com/blog/2026/11/05/facebook-sdk-error-reporting-retrospective 從 Facebook SDK 錯誤回報的幾次修改，回顧如何區分功能問題與監控誤報、確認根因、控制修改範圍，並建立可驗證的成功標準。 Thu, 05 Nov 2026 12:00:00 GMT undefined (Harry) facebook-sdkrollbardebuggingobservability https://harry-su-blog.com/blog/2026/11/05/facebook-sdk-error-reporting https://harry-su-blog.com/blog/2026/11/05/facebook-sdk-error-reporting 記錄 Facebook SDK unavailable 錯誤回報（ER0022）從 #1799、#1806 到 #1847 的三次調整：從觀測 SDK 載入失敗、只保留 timeout，到最後只在使用者實際看到登入介面時才開始監測，降低爬蟲與一般瀏覽造成的誤報。 Thu, 05 Nov 2026 00:00:00 GMT undefined (Harry) facebook-sdkrollbarerror-handlingobservability https://harry-su-blog.com/blog/2026/11/04/shadow-dom https://harry-su-blog.com/blog/2026/11/04/shadow-dom Shadow DOM 是瀏覽器原生的封裝機制，能為元件建立獨立的 DOM 與 CSS 邊界。本文整理它解決的問題、實務用法、發展歷史與採用率，並與 CSS Modules、styled-components、Scoped CSS、iframe 比較適用情境。 Wed, 04 Nov 2026 00:00:00 GMT undefined (Harry) shadow-domweb-componentscss https://harry-su-blog.com/blog/2026/10/28/sitemap-url-data-contract https://harry-su-blog.com/blog/2026/10/28/sitemap-url-data-contract 把公司評價面向與制度頁加入 sitemap 時，整理出三個要分開回答的問題：哪些頁面真的存在、哪些值得收錄、前後端如何避免產生不同的 URL。並記錄用 Google 文件驗證過的 sitemap 限制與 canonical 關係。 Wed, 28 Oct 2026 00:00:00 GMT undefined (Harry) seositemap https://harry-su-blog.com/blog/2026/10/08/mongodb-and-or-date-range https://harry-su-blog.com/blog/2026/10/08/mongodb-and-or-date-range 當日期拆成 year/month 兩個欄位存時，示範如何用 $or 包起點與終點條件、再用 $and 組合出區間查詢，並說明為什麼不能把兩個 $or 放在同一層物件裡。 Thu, 08 Oct 2026 00:00:00 GMT undefined (Harry) mongodb https://harry-su-blog.com/blog/2026/10/06/typescript-type-vs-interface https://harry-su-blog.com/blog/2026/10/06/typescript-type-vs-interface 整理 type 與 interface 在描述能力、declaration merging、擴充方式、屬性衝突、index signature 與編譯效能上的差異，並說明實務上該如何選擇。 Tue, 06 Oct 2026 00:00:00 GMT undefined (Harry) typescript https://harry-su-blog.com/blog/2026/10/06/zod-vs-yup https://harry-su-blog.com/blog/2026/10/06/zod-vs-yup 比較 Zod 與 Yup 在驗證失敗行為、型別轉換、未知 key、型別來源與巢狀預設值上的預設差異，並說明實務上的選擇依據。 Tue, 06 Oct 2026 00:00:00 GMT undefined (Harry) typescriptzodyupvalidation https://harry-su-blog.com/blog/2026/09/06/claude-code-context-window-compact https://harry-su-blog.com/blog/2026/09/06/claude-code-context-window-compact 整理 Claude Code context window 啟動時自動載入的內容、`/compact` 保留與捨棄什麼、跟 `/clear` 的差異，以及自動觸發 compact 其實有依 model 而異的預設閾值。 Sun, 06 Sep 2026 00:00:00 GMT undefined (Harry) claude-codesettingsmemory https://harry-su-blog.com/blog/2026/09/06/unhandled-promise-rejection https://harry-su-blog.com/blog/2026/09/06/unhandled-promise-rejection 整理 unhandledrejection / rejectionhandled 事件的觸發時機、Promise chain 分支各自獨立判定的陷阱、preventDefault() 的實際作用，以及和 Rollbar 的 captureUnhandledRejections 設定的關係。 Sun, 06 Sep 2026 00:00:00 GMT undefined (Harry) javascripterror-handlingrollbar https://harry-su-blog.com/blog/2026/09/05/claude-code-model-effort-permission-mode https://harry-su-blog.com/blog/2026/09/05/claude-code-model-effort-permission-mode 整理 Claude Code 針對 slash command、skill、subagent 設定 model 與 effort 的方式，以及 6 種 permission mode 的差異，特別是 auto mode 與 bypassPermissions 的關鍵差別。 Sat, 05 Sep 2026 00:00:00 GMT undefined (Harry) claude-codesettings https://harry-su-blog.com/blog/2026/09/05/claude-code-project-memory-mechanisms https://harry-su-blog.com/blog/2026/09/05/claude-code-project-memory-mechanisms 整理 Claude Code 跨 session 保留知識的兩套機制（CLAUDE.md 與 auto memory）、.claude/rules/ 的條件式載入，以及「context」和「強制執行」的關鍵區分——真正能無條件擋下動作的只有 hooks。 Sat, 05 Sep 2026 00:00:00 GMT undefined (Harry) claude-codesettingsmemory https://harry-su-blog.com/blog/2026/09/04/claude-code-settings-notes https://harry-su-blog.com/blog/2026/09/04/claude-code-settings-notes 紀錄幾個容易搞混、值得回頭查的 Claude Code 設定：attribution、cleanupPeriodDays、sandbox、permissions、bypassPermissions 與 fewer-permission-prompts。 Fri, 04 Sep 2026 00:00:00 GMT undefined (Harry) claude-codesettings https://harry-su-blog.com/blog/2026/09/03/claude-code-print-mode https://harry-su-blog.com/blog/2026/09/03/claude-code-print-mode claude -p 是 Claude Code 的非互動模式，把 prompt 當參數丟進去，跑完直接印到 stdout 後退出，適合放在 script、CI、pipe 裡。 Thu, 03 Sep 2026 00:00:00 GMT undefined (Harry) claude-codecli https://harry-su-blog.com/blog/2026/09/02/claude-code-auto-memory-limit https://harry-su-blog.com/blog/2026/09/02/claude-code-auto-memory-limit Claude Code 的 auto memory 檔案越積越多，會不會全部塞進 context？答案是只有 MEMORY.md 索引的大小有影響。 Wed, 02 Sep 2026 00:00:00 GMT undefined (Harry) claude-codememory https://harry-su-blog.com/blog/2026/09/02/what-is-razzle https://harry-su-blog.com/blog/2026/09/02/what-is-razzle Razzle 是一個零設定的 React SSR 建置工具，只負責打包 client 與 server 兩份 bundle，routing 和資料預取都得自己來。 Wed, 02 Sep 2026 00:00:00 GMT undefined (Harry) razzlereactssr https://harry-su-blog.com/blog/2026/02/18/02/pub-sub https://harry-su-blog.com/blog/2026/02/18/02/pub-sub 深入理解後端 Process 概念、多 Process 架構設計，以及 Pub/Sub 發布訂閱模式如何實現非同步解耦 Wed, 18 Feb 2026 00:00:00 GMT undefined (Harry) pubsubbackend architecture https://harry-su-blog.com/blog/2025/09/30/catch-throw-error-handling https://harry-su-blog.com/blog/2025/09/30/catch-throw-error-handling 深入探討 API 層與 UI 層的錯誤處理職責分離。說明在 .catch() 中必須重新拋出錯誤的原因，以及如何設計清晰的分層架構，讓 TanStack Query 的錯誤處理機制正常運作 Tue, 30 Sep 2025 00:00:00 GMT undefined (Harry) TanStack QueryError HandlingAPI Design https://harry-su-blog.com/blog/2025/08/14/apple-silicon-mac-install-old-nodejs https://harry-su-blog.com/blog/2025/08/14/apple-silicon-mac-install-old-nodejs 由於在 Mac 中安裝相當舊版本的 node JS 的過程中，碰到一些問題，沒想到就順手了解 Rosetta、arch、arm64、i386 這些名詞的意義 💻。 Thu, 14 Aug 2025 00:00:00 GMT undefined (Harry) Rosettaarcharm64i386 https://harry-su-blog.com/blog/2025/08/06/cursor-collapse-code-shortcut https://harry-su-blog.com/blog/2025/08/06/cursor-collapse-code-shortcut 在 Cursor 編輯器中，由於 Cmd+K 被 AI 功能佔用，無法使用原生的程式碼折疊快捷鍵。發現了 `keybindings.json` 這個很棒的 shortcut list Wed, 06 Aug 2025 00:00:00 GMT undefined (Harry) Cursorkeyboard shortcuts https://harry-su-blog.com/blog/2025/08/05/cross-env-dotenv https://harry-su-blog.com/blog/2025/08/05/cross-env-dotenv 深入解析 Node.js 中 cross-env 與 dotenv 的環境變數載入機制，了解為什麼 dotenv 預設不會覆寫已存在的環境變數，以及如何正確配置環境變數載入順序。 Tue, 05 Aug 2025 00:00:00 GMT undefined (Harry) Node.jsEnvironment Variablesdotenvcross-env https://harry-su-blog.com/blog/2025/07/28/github-actions-job-skip https://harry-su-blog.com/blog/2025/07/28/github-actions-job-skip 在使用 GitHub Actions 時，一直 skip job，直到多寫一個 debug 的 job 才釐清，本文記錄了一次實際遇到的問題和解決過程。 Mon, 28 Jul 2025 00:00:00 GMT undefined (Harry) Github Actions https://harry-su-blog.com/blog/2025/07/26/instagram-scraper https://harry-su-blog.com/blog/2025/07/26/instagram-scraper 這篇文章介紹使用 instagram-posts-scraper 爬取 Instagram 貼文，還有初學 Python 的記錄 Sat, 26 Jul 2025 00:00:00 GMT undefined (Harry) Pythonscraper https://harry-su-blog.com/blog/2025/07/25/argo-cd https://harry-su-blog.com/blog/2025/07/25/argo-cd Argo CD 是一個 GitOps 工具，目前常用於看 log，覺得挺方便的 Fri, 25 Jul 2025 00:00:00 GMT undefined (Harry) Argo CDKubernetes https://harry-su-blog.com/blog/2025/07/24/01/tech-introduction https://harry-su-blog.com/blog/2025/07/24/01/tech-introduction 專案中做了幾項優化，記錄一下，還蠻喜歡部分的優化的，簡單但 DX 體驗大好 Thu, 24 Jul 2025 00:00:00 GMT undefined (Harry) essay https://harry-su-blog.com/blog/2025/07/21/02/docker https://harry-su-blog.com/blog/2025/07/21/02/docker docker 的一些基本指令介紹 Tue, 22 Jul 2025 00:00:00 GMT undefined (Harry) docker https://harry-su-blog.com/blog/2025/07/21/01/git-worktree https://harry-su-blog.com/blog/2025/07/21/01/git-worktree 之前就聽說 git worktree 很好用，有稍微學過，但一直沒有常用，直到再次被 threads 的貼文 打到，好好來學一下 Mon, 21 Jul 2025 00:00:00 GMT undefined (Harry) git https://harry-su-blog.com/blog/2025/07/12/01/jest-html-reporter https://harry-su-blog.com/blog/2025/07/12/01/jest-html-reporter Sat, 12 Jul 2025 00:00:00 GMT undefined (Harry) e2ePuppeteerjest https://harry-su-blog.com/blog/2025/07/12/02/yongchen-blog https://harry-su-blog.com/blog/2025/07/12/02/yongchen-blog 開新的部落格已有一個多月了，已經發佈了幾篇技術文章，想寫一篇非技術類的文章，所以這篇文章是記錄一下開新部落格的心境 Sat, 12 Jul 2025 00:00:00 GMT undefined (Harry) essay https://harry-su-blog.com/blog/2025/06/19/01/hostfile https://harry-su-blog.com/blog/2025/06/19/01/hostfile 想要熟記用快捷鍵前往 host file，順便複習 localhost 相關定義。macOS Finder 前往資料夾快捷鍵：⌘ + ⇧ + G Thu, 19 Jun 2025 00:00:00 GMT undefined (Harry) localhostmac tips https://harry-su-blog.com/blog/2025/06/16/01/postMessage https://harry-su-blog.com/blog/2025/06/16/01/postMessage 介紹如何使用 postMessage API 實現 iframe 父子頁面之間的安全通訊，包含實際程式碼範例、執行流程說明及 console 輸出結果分析。 Mon, 16 Jun 2025 00:00:00 GMT undefined (Harry) JSpostMessageiframe https://harry-su-blog.com/blog/2025/06/14/try-catch-error https://harry-su-blog.com/blog/2025/06/14/try-catch-error JavaScript 中 throw error 和 throw new Error 的差異，以及 Error 物件的重要屬性 Sat, 14 Jun 2025 00:00:00 GMT undefined (Harry) JSTry-Catch https://harry-su-blog.com/blog/2025/06/01/github-action-cron https://harry-su-blog.com/blog/2025/06/01/github-action-cron Github Action cron Sun, 01 Jun 2025 00:00:00 GMT undefined (Harry) Github Actions https://harry-su-blog.com/blog/2025/05/31/ssh-https https://harry-su-blog.com/blog/2025/05/31/ssh-https https 與 ssh 的差異 Sat, 31 May 2025 00:00:00 GMT undefined (Harry) httpsssh https://harry-su-blog.com/blog/typescript/function-overload https://harry-su-blog.com/blog/typescript/function-overload 為你自己學 TypeScript Mon, 12 May 2025 00:00:00 GMT undefined (Harry) TypeScript https://harry-su-blog.com/blog/typescript https://harry-su-blog.com/blog/typescript 為你自己學 TypeScript Sat, 10 May 2025 00:00:00 GMT undefined (Harry) TypeScript https://harry-su-blog.com/blog/typescript/union-type-narrowing https://harry-su-blog.com/blog/typescript/union-type-narrowing 為你自己學 TypeScript Sat, 10 May 2025 00:00:00 GMT undefined (Harry) TypeScript