Sentry-JS-SDK-Browser 官方示例最佳实践

系列

SDK 开发

1. 顶级开源项目 Sentry 20.x JS-SDK 设计艺术（理念与设计原则篇）
2. 顶级开源项目 Sentry 20.x JS-SDK 设计艺术（开发基础篇）
3. 顶级开源项目 Sentry 20.x JS-SDK 设计艺术（概述篇）
4. 顶级开源项目 Sentry 20.x JS-SDK 设计艺术（Unified API篇）

系列

1. Snuba：Sentry 新的搜索基础设施(基于 ClickHouse 之上)
2. Sentry 10 K8S 云原生架构探索，Vue App 1 分钟快速接入
3. Sentry(v20.x)玩转前/后端监控与事件日志大数据分析，使用 Helm 部署到 K8S 集群
4. Sentry(v20.x) JavaScript SDK 三种安装加载方式
5. Sentry(v20.x) JavaScript SDK 配置详解
6. Sentry(v20.x) JavaScript SDK 手动捕获事件基本用法
7. Sentry(v20.x) JavaScript SDK Source Maps详解
8. Sentry(v20.x) JavaScript SDK 故障排除
9. Sentry(v20.x) JavaScript SDK 1分钟上手性能监控
10. Sentry(v20.x) JavaScript SDK 性能监控之管理 Transactions
11. Sentry(v20.x) JavaScript SDK 性能监控之采样 Transactions
12. Sentry(v20.x) JavaScript SDK Enriching Events(丰富事件信息)
13. Sentry(v20.x) JavaScript SDK Data Management（问题分组篇）

Sentry-Javascript

• Official Sentry SDKs for JavaScript
• 示例代码-packages/browser/examples/

@sentry/browser

相关示例

1. denyUrls
2. allowUrls
3. ignoreError message
4. ignoreError type
5. regularException
6. captureException
7. captureMessage
8. duplicated exception
9. duplicated message
10. integration
11. event hints
12. breadcrumb hints

实践

快速运行示例

# 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
公众号：黑客下午茶
加我微信（互相学习交流），关注公众号（获取更多学习资料~）