我把一款網頁遊戲上線了。
在自己的電腦上可以正常執行。GitHub 裡已經是修正後的程式碼。部署流程也顯示成功。
但在部分手機上，遊戲還是壞了。
Analytics 留下的錯誤是：
SyntaxError: Unexpected token '<'
我明明是在寫 JavaScript，為什麼突然冒出一個「<」？
這是我在製作網頁遊戲 ORA Quest 時真的遇到的問題。最後最有價值的，不是某一行神奇修正，而是弄懂這個錯誤到底想告訴我什麼。
真正的問題，可能根本不是「<」
一開始我以為是 JavaScript 語法錯誤。是不是混進奇怪字元？JSON 壞掉？少了一個逗號？
但碰到 Unexpected token '<' 時，很值得先確認一件事：瀏覽器原本要抓 JavaScript 或 JSON，伺服器是不是卻回傳了 HTML。
例如瀏覽器要求 game.js，理論上應該拿到 JavaScript。可是伺服器實際回傳的是從 <!DOCTYPE html> 開始的錯誤頁面。
瀏覽器仍然把它當 JavaScript 解析，碰到第一個 < 就失敗。
也就是說，被罵的那個符號不一定是兇手。真正的問題可能只是瀏覽器拿到了錯的內容。
最麻煩的 Bug，往往不是每個人都會遇到
這正是這次最折磨人的地方。
電腦可以跑。有些手機也可以。但換另一支手機，或是在社群 App 內建瀏覽器裡，就失敗。
這時很容易陷入這種流程：
改程式 → 部署 → 用自己的電腦打開 → 正常 → 以為修好了。
我以前也是這樣確認。
但如果問題跟快取、瀏覽器、舊資源或某個特定請求路徑有關，開發者自己的電腦反而可能給你一個「已經沒事」的假象。
現在再遇到，我會先檢查這 5 件事
- 直接打開出錯的 JS 或 JSON URL。
- 確認回傳內容真的是 JavaScript 或 JSON。
- 看看是不是其實回傳了 404、登入頁、WordPress 頁面或其他 HTML。
- 確認正式環境伺服器提供的檔案，跟 GitHub 裡預期的版本一致。
- 換裝置、換瀏覽器，盡量排除同一份快取後再測。
第一步尤其重要。
與其看到「JavaScript 錯誤」就一直改 JavaScript，不如先問一個更簡單的問題：
這個 URL 實際回傳了什麼？
光是這一點，就能省掉很多改錯地方的時間。
GitHub 正確，不代表正式環境就一定正確
這也是我這次被狠狠上了一課的地方。
GitHub 裡的程式碼可以完全正確，但使用者拿到的東西仍然可能不一樣。
中間還有自動部署、主機、WordPress、伺服器或 CDN 快取、瀏覽器快取，以及 App 內建瀏覽器等好幾層。
只要其中一層還在送舊檔案或意外內容，就會出現「我明明已經修了，為什麼使用者那邊還是壞的？」
所以我現在對「修好了」的定義改變了。
不是 commit 正確就算修好，而是正式環境的真實 URL，在接近真實使用者的條件下也能正常運作，才算結束。
別只想把錯誤消掉，還要讓下一次更容易查
以前一出錯，我只想趕快讓它消失。
現在我還會想：如果同樣的問題再出現，我能不能更快知道原因？
是哪個檔案失敗？請求的是哪個 URL？使用者是什麼環境？跑的是哪個 build？
有了這些資訊，下次就不會只是「同一個怪錯又來了」，而是能判斷「跟上次是不是同一個原因」。
一個人做產品，常常不是在寫程式，而是在弄懂到底發生了什麼
開始做網頁遊戲以前，我以為開發主要是做角色、寫故事、寫程式。
真正做起來後，大量時間其實花在這些問題上：為什麼只有這台裝置不行？為什麼昨天的 JavaScript 還在？為什麼 JSON 網址回傳的是 HTML？
每弄懂一個問題，我下一次能做的東西就多一點。
這次 Unexpected token '<' 留給我最大的教訓很簡單：
「我寫下的程式碼」和「使用者實際收到的檔案」，不一定是同一件事。
如果你現在也被這個錯誤卡住，先別急著重寫 JavaScript。直接打開那個出錯的 JS 或 JSON URL。要是看到 HTML，那已經是很重要的線索。
我正一邊踩這些坑，一邊製作 ORA Quest。如果你想看看這些除錯最後變成了什麼，可以免費試玩 ORA Quest。
コメント