Sentry-JS-SDK-Browser 官方示例最佳實踐

系列

SDK 開發

系列

Sentry-Javascript

`@sentry/browser`

實踐

快速執行示例

# sentry-javascript 專案
yarn
yarn build

cd packages/browser/examples/
python -m SimpleHTTPServer # Mac 自帶的，也可以用你自己喜歡的 http server
# Serving HTTP on 0.0.0.0 port 8000 ...

訪問：http://localhost:8000/

示例配置詳解

Sentry.init({
  // Client's DSN.
  dsn: 'https://363a337c11a64611be4845ad6e24f3ac@sentry.io/297378',
  // An array of strings or regexps that'll be used to ignore specific errors based on their type/message
  ignoreErrors: [/PickleRick_\d\d/, 'RangeError'],
  // An array of strings or regexps that'll be used to ignore specific errors based on their origin url
  denyUrls: ['external-lib.js'],
  // An array of strings or regexps that'll be used to allow specific errors based on their origin url
  allowUrls: ['http://localhost:5000', 'https://browser.sentry-cdn'],
  // Debug mode with valuable initialization/lifecycle informations.
  debug: true,
  // Whether SDK should be enabled or not.
  enabled: true,
  // Custom integrations callback
  integrations(integrations) {
    return [new HappyIntegration(), ...integrations];
  },
  // A release identifier.
  release: '1537345109360',
  // An environment identifier.
  environment: 'staging',
  // Custom event transport that will be used to send things to Sentry
  transport: HappyTransport,
  // Method called for every captured event
  async beforeSend(event, hint) {
    // Because beforeSend and beforeBreadcrumb are async, user can fetch some data
    // return a promise, or whatever he wants
    // Our CustomError defined in errors.js has `someMethodAttachedToOurCustomError`
    // which can mimick something like a network request to grab more detailed error info or something.
    // hint is original exception that was triggered, so we check for our CustomError name
    if (hint.originalException.name === 'CustomError') {
      const serverData = await hint.originalException.someMethodAttachedToOurCustomError();
      event.extra = {
        ...event.extra,
        serverData,
      };
    }
    console.log(event);
    return event;
  },
  // Method called for every captured breadcrumb
  beforeBreadcrumb(breadcrumb, hint) {
    // We ignore our own logger and rest of the buttons just for presentation purposes
    if (breadcrumb.message.startsWith('Sentry Logger')) return null;
    if (breadcrumb.category !== 'ui.click' || hint.event.target.id !== 'breadcrumb-hint') return null;

    // If we have a `ui.click` type of breadcrumb, eg. clicking on a button we defined in index.html
    // We will extract a `data-label` attribute from it and use it as a part of the message
    if (breadcrumb.category === 'ui.click') {
      const label = hint.event.target.dataset.label;
      if (label) {
        breadcrumb.message = `User clicked on a button with label "${label}"`;
      }
    }
    console.log(breadcrumb);
    return breadcrumb;
  },
});

dsn：客戶端的DSN
ignoreErrors：字串或正規表示式陣列，用於根據其 type/message 忽略特定錯誤
denyUrls：字串或正規表示式陣列，將用於根據 origin url 忽略特定錯誤
allowUrls：字串或正規表示式陣列，將用於允許基於其 origin url 的特定錯誤
debug：使用有價值的初始化(initialization)/生命週期(lifecycle)資訊的除錯模式
enabled：是否應該啟用 SDK
integrations：自定義整合回撥
release：釋出版本識別符號
environment：釋出環境識別符號
transport：自定義事件傳輸，將用於將事物傳送到 Sentry
beforeSend：針對每個捕獲的事件呼叫的方法
beforeBreadcrumb：針對每個捕獲的麵包屑呼叫的方法

我是為少
微信：uuhells123
公眾號：黑客下午茶
加我微信（互相學習交流），關注公眾號（獲取更多學習資料~）

Sentry-JS-SDK-Browser 官方示例最佳實踐

系列

SDK 開發

系列

Sentry-Javascript

`@sentry/browser`

相關示例

實踐

快速執行示例

示例配置詳解

相關文章