Sentry

What is sentry ?

TL;DR

提供了一個平台，讓開發團隊能夠即時收集、追蹤處理應用程式中的 error、exception 和 crash。
可以自動捕獲應用程式中發生的錯誤，並提供相關資訊去追蹤錯誤情境，讓我們能夠快速定位和解決問題。
透過 Sentry 的網頁界面和通知機制，我們能夠方便地追蹤錯誤報告、與團隊成員協作，提高軟體品質和使用者體驗。
監控前端錯誤、性能指標，提供全面的前端效能解決方案。
Sentry 是一個開源的系統錯誤監控軟體，可以嵌入在各種語言各種框架環境之中，提供會員免費的額度與定量空間，協助收集錯誤，也可以協助監控系統效能。若是有能力自行管理主機，也能下載原始碼自行部署。

原理

Sentry 重寫 window.onerror，window.onunhandledrejection 方法。
對 window.onerror 添加了很多運行時信息幫助進行錯誤定位，對不同的瀏覽器差異性進行了統一封裝處理，並且監聽 unhandledrejection 事件及 Promise 產生的錯誤。

參考資料

前端常見錯誤

ECMAScript Execeptions
DOMException
資源加載報錯 cdn、 img、script、link、audio、video、iframe ...
Promise 錯誤、unhandledrejection
頁面 crash

參考資料

專案上串接 Sentry 步驟

申請 Sentry 帳號
建立專案
在專案裡面初始化 sentry SDK

npx @sentry/wizard@latest -i nextjs

Next.js 官方提供的範例

https://github.com/vercel/next.js/tree/canary/examples/with-sentry

常用 Options

Sentry SDK 可以使用多種選項進行配置。這些選項在 SDK 中基本上是標準化的，但在更好地適應平台特性方面存在一些差異。以下選項是在 SDK 首次初始化時設置的。

DSN（Data Source Name）
- DSN 告訴 SDK 將事件發送到哪裡。如果未提供此值，SDK 將嘗試從 SENTRY_DSN 環境變量中讀取它。如果該變量也不存在，SDK 將不會發送任何事件。
```
dsn: "https://<key>@sentry.io/<project>";
```
Environments
- 設置環境
```
environment: "dev"; // dev, stag, prod
```
Release
- 設定 release 版號
- 查看已發佈的 releases
- 可以從 Sentry 後台看到這版更動的 code 範圍以及 commit

tunnel

 tunnelRoute: "/monitoring"

當使用 CDN（Content Delivery Network）時，廣告攔截或腳本攔截擴展可能會阻止 sentry 的 SDK 被正確獲取和初始化。因此，對 SDK API 的任何調用都將失敗，並可能導致您的應用程序出現意外行為。
tunnelRoute 可以繞過廣告攔截和腳本攔截擴展對 Sentry SDK 的阻止，確保 SDK 能夠正常獲取和初始化，並將捕獲的數據發送到 Sentry 服務器。這樣，你的錯誤報告、會話健康狀況和性能數據就能夠成功傳遞給 sentry.io，確保監控和分析功能的可用性。
使用相對 URL 不會觸發預檢 CORS 請求，因此不會阻止任何事件，因為廣告攔截器不會將這些事件視為第三方請求。

官方文檔

ignoreErrors

Sentry SDK 會 Catch 應用程式中的所有錯誤並將其報告到 Sentry 伺服器，以便進行監控和故障排除。然而，有時候希望忽略某些特定的錯誤，這些錯誤可能是已知的並且不需要被報告，或者是一些不影響應用程式正常運行的錯誤。

  ignoreErrors: [
    // Random plugins/extensions
    "top.GLOBALS",
    // See: http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
    "originalCreateNotification",
    "canvas.contentDocument",
    "MyApp_RemoveAllHighlights",
    "http://tt.epicplay.com",
    "Can't find variable: ZiteReader",
    "jigsaw is not defined",
    "ComboSearch is not defined",
    "http://loading.retry.widdit.com/",
    "atomicFindClose",
    // Facebook borked
    "fb_xd_fragment",
    // ISP "optimizing" proxy - `Cache-Control: no-transform` seems to
    // reduce this. (thanks @acdha)
    // See http://stackoverflow.com/questions/4113268
    "bmi_SafeAddOnload",
    "EBCallBackMessageReceived",
    // See http://toolbar.conduit.com/Developer/HtmlAndGadget/Methods/JSInjection.aspx
    "conduitPage",
  ]

官方文檔

sourcemap

通常發佈到生產環境的代碼是經過壓縮的，如果我們還想要監控到具體是哪一行代碼引起的腳本錯誤，那就還需要上傳 sourcemaps 到 Sentry 後台。

使用 withSentryConfig 自動上傳 sourcemaps

next.config.js
const { withSentryConfig } = require("@sentry/nextjs");

const nextConfig = {...}

module.exports = withSentryConfig(nextConfig);

使用Sentry Webpack Plugin

next.config.js
const SentryCliPlugin = require("@sentry/webpack-plugin");

const config = {
  plugins: [
    new SentryCliPlugin({
      include: ".next",
      ignore: ["node_modules"],
      configFile: ".sentryclirc"
    })
  ]
};

// .sentryclirc
[defaults]
org = <my-org>
project = <my-project>

[auth]
token = <my-token> // Settings->Account->API->Auth Tokens

官方文檔

replay

透過 Replay 可以觀察使用者在應用程式中的操作、交互和流程，以更好地理解錯誤發生的情境和原因。

當錯誤報告被捕獲並傳送到 Sentry 伺服器時，相應的會話數據也會被收集和保留。這些會話數據包含了使用者在應用程式中的行為，如點擊、輸入、滾動等。透過 Session Replay 功能，你可以選擇特定的錯誤報告，並觀看錯誤發生時的實際使用者會話。

原理: 透過 rrweb 技術去紀錄頁面 DOM 的所有變更，並不是真的在錄製影片，而是將頁面 DOM 狀態序列化後記錄下來，再利用反序列化還原成 DOM 來回放。

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and sample at a lower rate in production
  replaysSessionSampleRate: 0.1,

  // If the entire session is not sampled, use the below sample rate to sample
  // sessions when an error occurs.
  replaysOnErrorSampleRate: 1.0,

  integrations: [
    new Sentry.Replay({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],

官方文檔

其他

主動回報訊息給 Sentry

try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureMessage("this is a debug message", "debug"); // 回報信息
  Sentry.captureException(new Error("Good bye")); // 回報錯誤
}

官方文檔

tracesSampleRate

啟用 性能監控 來擴充現有的錯誤數據，每個 Trace 可以追蹤從前端到後端的(多個服務之間)請求，這可以和被追蹤的錯誤數據相關聯，查看一項服務中的錯誤如何傳播到另一項服務，還可以讓您更深入地了解哪些服務可能對您的應用程序的整體性能產生負面影響。

說明跟踪如何由多個事務組成的圖表，每個事務由多個跨度組成。瀏覽器向後端發送 API 來獲取 json 格式的 response，後端為了獲取數據對 DB 發送查詢

Trace: 描述程式執行期間發生事件的日誌，紀錄渲染整個畫面的流程(例如: 瀏覽器頁面加載事件,購物車結帳流程)
Transactions: 一個 Trace 包含多個 Transaction service (前端、後端、DB)
Span: span 記錄一條性能數據，這些數據可以大致分為三類
- 記錄了每個靜態資源（js、css、img 等）的加載情況
- API 請求
- 資料庫查詢當上述三類 Span 全部加載和記錄完成後，Sentry 會將這些 span 打包進 Transaction

控制要捕獲和傳送到 Sentry 的事務（traces）的抽樣率。抽樣率表示事務被捕獲的機率。例如，如果 tracesSampleRate 設定為 0.1，則只有 10% 的 traces 會被捕獲和傳送到 Sentry 伺服器。

tracesSampleRate: 1.0;

官方文檔
 推薦影片教學

性能監控 - Web Vitals

能夠統計 Web Vitals 的各個指標如 LCP、FP、CLS，讓開發者可以在後台看到相關的圖表

Sentry price

Team 進階版

跟三方資源整合(Slack, Github, Jira)
發生錯誤時，發送 Alert 提醒到群組

資安議題

託管在 Google Cloud Platform 上

Sentry 服務器中的所有數據都是靜態加密
數據保留時間到期時會自動刪除數據
開啟 Server-Side Data Scrubbing 設定後，會過濾掉敏感數據(password、api_key、credentials...等)

Sentry

What is sentry ?​

原理​

前端常見錯誤​

專案上串接 Sentry 步驟​

常用 Options​

進階設定​

tunnel​

ignoreErrors​

sourcemap​

replay​

其他​

tracesSampleRate​

性能監控 - Web Vitals​

Sentry price​

資安議題​

參考資料​

What is sentry ?

原理

前端常見錯誤

專案上串接 Sentry 步驟

常用 Options

進階設定

tunnel

ignoreErrors

sourcemap

replay

其他

tracesSampleRate

性能監控 - Web Vitals

Sentry price

資安議題

參考資料