其他分享
首页 > 其他分享> > Sentry-JS-SDK-Browser 官方示例最佳实践

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

@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;
  },
});
我是为少
微信:uuhells123
公众号:***下午茶
加我微信(互相学习交流),关注公众号(获取更多学习资料~)

标签:JavaScript,示例,Sentry,JS,breadcrumb,v20,event,SDK
来源: https://blog.51cto.com/u_15168528/2707619