💣 第四章：開發者排雷指南：上線前必看的 5 個真實魔鬼細節
當你在本機測試一切完美，準備上線去大賺一筆時，真實世界總是會給你一些「驚喜」。這篇文章收錄了我們在實戰開發中遇到的 5 個最經典的深水炸彈，以及用 Vibe Coding 解決它們的超高效手法！
💥 坑一：Google 翻譯讓 React 網站大崩潰 (Hydration Crash)
症狀描述
當你裝了 Google 翻譯外掛，並將網站切換成其他語言後。使用者只要滑鼠移過去按個按鈕，或是畫面狀態有一點改變，整個網頁就會突然變成白畫面，並在 Console 跳出這個惡名昭彰的紅字：
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
背後原因
這是前端界非常有名的 React 世紀大衝突。Google 翻譯會在底層偷偷把網頁文字包裝上 <font> 標籤，導致 React 要去更新畫面時，發現原本追蹤的 DOM 節點「不見了」，於是直接引發系統崩潰。
霸氣解法：Monkey Patch (猴子補丁)
我們不用改任何組件，直接在 <head> 或 <body> 的最上方植入一段補丁，攔截瀏覽器原生的 removeChild 行為。
Vibe Coding 咒語：
「我的 Next.js 網站裝了 Google Translate 後，畫面重新渲染時會跳出 removeChild 的 NotFoundError。請幫我寫一段 Monkey patch script 放在 layout 裡面，攔截並忽略這個錯誤。」
💥 坑二：Google 翻譯太盡責，連「語言選單」自己都被翻譯了
症狀描述
你做了一個很漂亮的語言切換下拉選單（繁體中文、English、日本語）。結果 Google 翻譯一啟動，連選項裡面的「繁體中文」都被硬生生翻譯成了英文的 "Traditional Chinese"，導致使用者再也選不回去。
背後原因
Google 翻譯會掃描畫面上所有的文字。如果不加限制，連 <select> 或 <button> 裡面的控制文字都會遭殃。
霸氣解法：免死金牌標籤
只要在你**「絕對不想被翻譯」**的區域外層，加上這兩個屬性：
className="notranslate"translate="no"
這樣 Google 翻譯就會乖乖跳過這個區塊。
💥 坑三：React 狀態記憶喪失症候群
症狀描述
網頁雖然成功變成日文了，但你的「語言下拉選單」卻又自動跳回了預設的「繁體中文」。也就是網頁是日文，但選單顯示中文。
背後原因
Google 翻譯在做深度 DOM 替換時，可能會導致 React 元件被強制重新渲染 (Re-render)。元件一重新渲染，狀態 (useState) 就會回到初始值。
霸氣解法：Cookie 狀態同步法
不要只靠 React 的 State 記住語言，要主動去讀取瀏覽器裡面的 googtrans Cookie！
Vibe Coding 咒語：
「當 Google 翻譯觸發時我的 Select 狀態會跑掉。請幫我在 LanguageSwitcher 加上 useEffect，在載入時去讀取 'googtrans' 的 Cookie，並把它同步給 currentLang 的狀態。」
💥 坑四：綠界科技 (ECPay) 國外信用卡狂刷不過
症狀描述
網站國際化做好了，開始有海外流量。結果美國、香港的客戶結帳時，輸入信用卡號後永遠顯示「交易失敗」，讓你白白流失大筆海外訂單。
背後原因
這是綠界科技為了防範國際偽卡與盜刷的預設機制。所有新開通的綠界商家，「國外卡交易」功能預設都是關閉的。
霸氣解法：手動申請開通
你無法從程式碼解決這件事。你必須：
- 登入綠界後台。
- 尋找線上客服 / 回報問題。
- 留言：「我要申請開通國外信用卡交易權限 (包含 3D 驗證)」。
- (進階建議)：如果你主打海外市場，建議再多串接一個 Stripe 或 PayPal，國外刷卡成功率會比綠界高出非常多！
💥 坑五：慘劇！不小心把 Supabase 的資料表刪掉了！
症狀描述
在後台手滑，把存放購買紀錄的 vt_purchases 整個 Drop 掉了。網站上的會員全部分崩離析，大家都說看不到自己買的課。
背後原因
雲端資料庫操作不慎。
霸氣解法：SQL 咒語重生術
不要慌張。只要你有把當初的 SQL 建表語法留下來，去 Supabase 的 SQL Editor 重新執行一次，就能瞬間把它變回來。
重建與給自己最高權限的 SQL 範例：
-- 1. 重新建立表格
create table public.vt_purchases (
id uuid default gen_random_uuid() primary key,
user_id uuid references auth.users not null,
course_id text not null,
created_at timestamp with time zone default timezone('utc'::text, now()) not null
);
-- 2. 重新開啟最高級別的安全防護 (RLS)
alter table public.vt_purchases enable row level security;
create policy "使用者只能看到自己的購買紀錄" on public.vt_purchases for select using (auth.uid() = user_id);
create policy "允許新增購買紀錄" on public.vt_purchases for insert with check (auth.uid() = user_id);
-- 3. 送自己全站大禮包 (恢復自己的權限)
insert into public.vt_purchases (user_id, course_id)
values ('你自己的-Supabase-User-ID', 'course-1');
只要遇到刪錯表的狀況，這就是最快也最工程師的霸氣解法！