1

廢話不多說，Cut to the chase! 前情提要

APM 的守破離 - Norman

  • Elastic APM (Application Performance Monitoring) 基於 Elastic Stack 的免費開源監測工具，觀測應用程式與元件的日誌 (Log)、指標 (Metric)、軌跡 (Trace)，並透過儀表板呈現這些數據，有助於排除問題及管理效能。
    補充：Elastic APM 是什麼 ? 效能監控功能介紹、基本架構與4種事件類型、2個應用場景，看這篇就夠了！
  • 由 Latency 可以發現的問題(定期觀察日、週、年變化，取得 Baseline，看 AVG、P95、P99)
    • 非同步沒弄好會卡很久
    • 相同服務一直發請求 (啊是不會用 Cache 逆？)
    • 異常循環導致 CPU 衝頂 (案例：產生 DI Container 陷入無窮迴圈)
    • Pod CPU 高 -> P99 Latency 飆高 (調 K8S Readiness Probe (Are you ready?)，CPU 忙時不接 Request)
    • 少量 Query 有極慢延遲
    • DB Query 太久 (查太多不需要資料、想共用 Function 資料全抓再篩)
    • 服務初始化(.NET JIT、建連線...)，第一次較慢
    • 第三方服務拖累
    • 系統升級後帶來他 X 的驚喜
  • APM 資料異常：有 Span (活動的開始到結束的記錄)但沒有 Throughput，有 Latency Distribution 但無取樣
    * Service A 依賴 Service B，Service Sample Rate = 0%，後面就沒有了
    * Trace Continuation Strategy 設 Continue 後面服務沿用前面服務 Sample Rate
    * B 設定 Trace Continuation Strategy = Restart 會讓 A 的 Trace 只看得到 B，看不到 B 依賴的服務
    * 資訊不夠用 Metadata 加上後設資料
  • Log Correlation
    一個 Trace 對映所有 Log，Grok Pattern 解析 Log Trace ID，設 Log Indices 指定寫到哪裡
  • Real User Monitoring
    追蹤前端出發的 Performance (Sentry、CDN/JS 效能、不同地區 Latency)
  • 開發決策
    • 釐清 API 是否沒人用？
    • APM 預估使用量 (要抓 Buffer，如果有應用數據，用數字推算更準，P95 在多少秒內，人對慢 0.3s+ 就會有感)
    • 開發加入自訂 Span 方便抓問題 (不用包太細、Message Queue Consumer 也看得到)
    • K6 壓測及時早久發現問題
    • 重要 API 可能瓶頸加 Slack Alert

從零打造前端效能監測系統 - Summer Tang

原來「桑莫。夏天」是女生!! (驚 + 遲頓)

超佛心逐字稿：從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

  • 案例：後端取大量資料，前端經過複雜運算顯示，佔用 Main Thread -> 慢 + 卡!
  • 改善：計算工作切小，丟給 Web Worker，資料壓縮再傳/Preload/Prefetch/Lazy Loading
  • 提前發掘問題並預先優化
  • 效能改善點：載入效能、渲染效能
  • 載入效能 - Chrome DevTools、Lighthouse、web-vitals
    LCP 是指畫面上最大面積的元素出現的時間
    FID 是指使用者第一次操作網頁，直到瀏覽器能對此互動做出回應的時間差
    CLS 是累計版位位移，頁面整個存活期間，每個可見元素位移分數的總和
  • 渲染效能 - 60+ FPS，避免 > 50ms Long Task (使用者耐性 100ms)，工具 Chrome DevTools、why-did-you-render 、consle timestamps
  • 工具：Cypress、Sentry、New Relic

10 年回顧：打造愛料理開發及營運團隊 - Richard Lee

  • 愛料理 App 發展的心路歷程 (OS：我最愛聽別人出生入死的精彩故事惹，雞排珍奶就位)
  • 👍 盡早部署、時常驗證
  • 前工具控的孟母三遷故事 (每次換工具都覺得： waku waku 這個工具一定可以拯救我)
    • 聊天：Campfire -> HipChat -> Slack
    • 票務：Trello -> Asana -> Phabricator -> Notion -> Shortcut
    • 文件：Quip -> Notion
    • 設計：Sketch -> InVision + Zeplin -> Figma
  • 心得: 換工具帶來的實質效益不高，效益來自於砍掉重練
  • 過去迷信於人人參與討論，在產品快速成長從 0 -> 1 時有效，產品需要迭代、最佳化時不行(每個人知識與能力落差)
  • 儘快交付：RoR 時代用GitHub -> Chef/AWS OpsWorks，AngularJS 出現 JS Tooling 打包問題，大規模容器化(可重置的部署環境)
  • 專案越來越複雜 2018 ~ 2023：
    • 多體、微服務應用：K8S/Serverless (Lambda/Cloud Functions/Workers)，個別用很 OK，全加在一起變成 💩
    • 導入 React/Redux/React-Router/TypeScript
    • 最終產生了混語言 SSR，完美實踐弊大於利
  • 沒監測的產品不算上線：最難過的不是產品死掉了，而是死掉很久了沒人通知你 (遠目)
    各種 Health Check、HTTP 5xx 4xx 數字追蹤、前後端效能監測、分散式追蹤、前後端錯誤、使用者的反饋
  • 商業指標不易量測：以前流行的 AARRR 模型 (獲取/啟用/留存/收入/推薦)，十年後大致適用
  • 享受寫程式 v.s. 享受做產品（做程式做產品是兩件事）工程團隊的價值來自於產出商業成果、該砍則砍，留下的必須要賺錢

從 2013 到 2023: Web Security 十年之進化及趨勢! - Orange Tsai

  • nginx 的坑：容器 /static 對映 /home/app/static 結尾不能加 / ，否則 static../settings.py 變成 /home/app/static/../settings.py
  • 這十年間架構攻擊慢慢變成顯學
  • Hop-By-Hop 攻擊：Connection: close, X-Forwarded-For 因為 Connection 是 Hop by Hop Header，會讓第二個 Proxy 移掉 X-Forwarded-For Header，後續無法追蹤請求來源，將其視為第一個 Proxy 送出 解說
  • Web Cache Deception 攻擊：攻擊者誘騙使用者點擊不存在的 https://www.example.com/my_profile/test.css，應用程式設定成忽略 test.css 傳回帶個資的 /my_profile 並被 Proxy 或 CDN 快取下來，之後攻擊者由取得獲得個資 解說
  • 瞄準底層：找 ORM 漏洞、繞過框架保護。去年：Spring for Shell, Data-Binding or Model Binding
  • PHP file_exits/File Open 函數，phar:// 路徑為打包格式，serialize(), unserialize() 觸發 Remote Code Execution
  • Laravel <= v8.4.2 Debug Mode: Remote Code Execution 漏洞
  • JS Prototype Pollution：user_data.__proto__.DEBUG = true 改變所有 user_data DEBUG 屬性，常發生在解析 Query String 或 JSON，如 ?__proto__[isAdmin]=true，Node.js 也適用，如 Kibana 漏洞
  • 大部分 RFC 只定義規範，沒有定義實作方式，導致實作差異有漏洞
    http://example.com#@google.com/，依 RFC 應抓 example.com，但 Java/Python 2018 可能抓到 google.com
  • JSON 解析實作：{"user":[], "user":["_admin"]}，2017 CouchDB 漏洞：前端用 JS 解析 JSON 覺得是 []，但後端 Erlang 解析出 ["_admin"]
  • 安全從來就不是單一的領域，跨區攻擊：
    寄到某信箱會進客服工單，註冊別人內部服務
  • HTTPoxy Attack：很多 HTTP Client 圖方便用 HTTP_PROXY 環境變數當 Proxy，CGI 收到 PROXY Header 依 RFC 3875 當成 HTTP_PROXY 被導向惡意中介
  • 前端安全：DOM Clobbering、Mutation XSS、Script Gadget XSS、SameSite Confusion、SOME (Same Origin Method Execution) Attack、MIME Sniffing
  • Headless Browser 應用讓 XSS 可能出現在後端：網頁測試自動化、網頁截圖 / HTML to PDF、爬蟲收集數據
  • 從 Electron 下手：XSS to RCE

Beyond Technology 技術之外 - 從個人身心安頓到人類福祉追求 - 蔡明哲

  • 工程師 》產品經理 》廣告行銷 》學習專案管理 》帶人 》UX 研究與設計 》跨行 》UX 教練
  • 近期焦慮 - 今年初 AI 大爆發 - 別人都在看什麼？我落伍了嗎？ 錯失恐懼 FOMO(Fear of Missing Out)

    (補張應援圖：ME TOO!!)
  • 資訊焦慮、職涯焦慮、人生焦慮(人生的意義、存在價值)
  • 安頓自己的功課：過去 - 感恩、現在 - 安頓
  • 安頓自我 ACCCA Model (察覺內在焦慮，連結外部，放下手機，連結他人，終身學習)
    • Aware of inner self 覺察內在焦慮，但不排斥它，覺察它的存在，探索焦慮的背後是什麼？(一般是恐懼)
    • Care of the external world 關心在意外部環境，人類是群體動物，能幫助他人，大腦自然感到快樂!!
    • Connect with people 連結他人 (別參加有學霸的讀書會，讀人才是重點，跟更強大的人在一起，找到歸屬感得到變強大的感覺，幸福感)
    • Change your HWI 感受真實世界，而非數位
      人機介面 HCI = Human Computer Interface
      人世介面 WHI = Human World Interface
      改變習慣，斷開資訊科技，置入實體感受世界 (分段徒步 27 次累計 690 公里)
    • Adapt to the situation 適應局勢，脫離受害心態
      以前學種技能吃三代，現在學種技能吃三年，未來再多了 AI 更亂，強弱不是重點，適者生存
  • g0v名言：我就是沒有人
    發現問題的時候不要把自己當受害者，不要抱怨為甚麼沒有人幫你解決事情，你就是沒有人
  • 過去感恩、現在安頓、未來設定目標，有目標才不會茫然。


Comments

# by 小黑

讚嘆黑哥

Post a comment