LINE OA 商家管理平台

01 / Context

背景與需求

02 / Challenge

需要解決的問題

1. C1

   監控工具影響 LINE Bot 回應速度

   後端導入 Sentry 後，LINE Bot 的回應從約 0.1～0.2 秒變成約 1 秒。服務部署在 Render 免費方案，CPU 與記憶體都很有限，判斷是監控工具增加的負擔造成影響。

2. C2

   手機 Safari 登入後 Cookie 存不下來

   後台使用 HttpOnly Cookie 保存登入狀態。電腦上測試正常，用手機測試時才發現登入成功後仍是未登入狀態：前後端在不同網域，Cookie 被視為第三方 Cookie，遭到 Safari 封鎖。

3. C3

   多支請求同時 401 造成連環登出

   Refresh Token 每次更新都會輪替。Access Token 過期時，頁面上的多支請求會同時呼叫 /refresh，後到的請求拿舊 token 被拒絕，進而觸發登出並清掉 CSRF Token。

03 / Decision

技術方案與取捨

1. C1 → Observability

   先關閉 profiling，再關閉 tracing，只保留錯誤監控，逐步縮小範圍排查。最後決定移除後端的 Sentry，改用自己寫的 access log 與 audit log，輸出到 console 由 Render 收集，前端則保留少量使用。

   • Sentry
   • Logging
   • Performance

2. C2 → Browser Compatibility

   調整網域，讓前後端使用同一個主網域，Cookie 不再屬於第三方，Safari 就能正常保存。

   • Cookie
   • Safari

3. C3 → Authentication

   在 axios 攔截器共用同一個 refresh Promise，同一時間只更新一次，其他請求等待結果後再重試。

   • JWT
   • CSRF
   • Axios

技術組成

frontend

Vue 3 · PrimeVue

backend

Node.js · LINE Messaging API

database

MongoDB

operations

Render · GitHub Actions · Cloudflare R2 · Discord Webhook · Sentry

比較過市面上幾個服務後選擇 Render，設定簡單，免費方案也適合小型服務。但它的 CPU 與記憶體有限，Sentry 對後端負擔較重，所以改用自己寫的日誌。

04 / Implementation

實作過程

1. F1

   內容管理

   包含 FAQ、公告、價目表等基礎內容，皆可透過後台自由編輯，無需工程開發。

   • FAQ
   • 公告
   • 價目表
2. F2

   LINE OA 整合

   將後台內容同步至 LINE 官方帳號，提供一致且即時的資訊體驗。

3. F3

   多店家與權限管理

   專為連鎖品牌設計，可個別調整分店專屬的服務與資料。

4. F4

   部署與維運

   後端部署於 Render，以自行撰寫的 access log 與 audit log 追蹤線上狀況，並用 GitHub Actions 定時備份，結果透過 Discord 通知。

   • Render
   • GitHub Actions
   • Cloudflare R2
   • Discord 通知
5. F5

   數據分析

   追蹤商家 LINE 內容的使用情形，作為優化經營策略的依據。

   • 圖文選單點擊紀錄
   • 熱門內容排行
   • 使用者行為分析
   • 點擊成效統計

實際畫面

點擊放大檢視，可用左右鍵或滑動切換。

05 / Validation

測試與驗證

• 部署於 Render，自行撰寫 access log 與 audit log 輸出到 console，上線後能追蹤實際的請求與關鍵操作
• 後端移除 Sentry 後改用自己寫的日誌，僅前端少量使用 Sentry
• 以 GitHub Actions 排程，每天備份 MongoDB、匯出稽核日誌到 Cloudflare R2，並用 Discord 通知成功或失敗
• 進行資安檢查，修補帳號管理權限、登入與 session 的問題
• 修正多分頁 CSRF，以及多支請求同時遇到 401 時的 token 更新流程
• 目前沒有自動化測試，以手動測試與日誌監控為主

06 / Reflection

限制與後續