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

2024-01-22 11:34:22

系列

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`

相关示例

实践

快速运行示例

示例配置详解

码农公寓

系列

SDK 开发

系列

Sentry-Javascript

@sentry/browser

相关示例

实践

快速运行示例

示例配置详解

相关文章

`@sentry/browser`