Sentry的搭建和使用

时间 2019-11-08

标签 sentry 搭建使用繁體版

原文原文链接

Sentry是一个开源应用程序监控平台，可帮助您实时识别问题。支持 web 先后端、移动应用以及游戏，支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架，还提供了 GitHub、Slack、Trello 等常见开发工具的集成。javascript

本文主要讨论的是Sentry在Docker环境下的搭建、Sentry SDK默认集成的功能以及在React应用程序中的使用。
html

1.Sentry的搭建

1.一、Sentry搭建有两种方式java

经过Python安装node
经过Docker容器安装webpack

这里咱们经过Docker安装（Docker的安装教程较简单，在这里就不重复造轮子）git

1.二、安装环境要求github

MIN_DOCKER_VERSION='1.10.0' 
docker -vMIN_COMPOSE_VERSION='1.17.0' 
docker-compose -vMIN_RAM=3072 # MB //你的内存至少3G复制代码

1.三、搭建步骤web

今年7月份的时候Sentry官方更新了一版，将安装的流程写成了一个shell脚本（./install.sh），因此若是要使用全部默认设置，只需拉取onpremise（https://github.com/getsentry/onpremise）并运行./install.sh便可。docker

若是须要对包含的docker-compose.yml文件进行修改以知足您的需求或环境（例如添加GitHub凭据）。请在运行安装脚本以前执行这些操做。
shell

自定义配置的推荐方法是按如下顺序使用如下文件：

config.yml
sentry.conf.py
.env w /环境变量

如无心外, 一切正常, 端口默认是9000, 本地的话能够直接打开localhost:9000访问；

2.SDK默认集成的功能

Dedupe 自动过滤一些重复的事件
FunctionToString 使SDK可以上报详细的错误函数信息
InboundFilters 便于开发者自行过滤或筛选所需的上报事件

Debug 该集成帮助方便的查看事件发送到Sentry服务器以前的实时信息，可选设置项:

{
  debugger: boolean; // 在事件发送前触发开发者工具debugger模式(若是打开了开发者工具)
  stringify: boolean; // 在事件发送前将事件序列化后经过console.log输出
}复制代码

root: string; //root指定的路径将被拼接到当前错误帧的basename以前（文件的完整路径被分解为[root, dir, basename, ext]）
  iteratee: (frame) => frame); //该函数接收frame做为参数处理后再返回
}复制代码

RewriteFrames 该集成容许你对错误堆栈跟踪的每一个帧进行处理

这里重点讲下浏览器端特有的集成功能：

Breadcrumbs 面包屑包含如下选项，默认所有集成

beacon: boolean;  // 记录使用Beacon API完成的HTTP请求
  console: boolean; // 捕捉console信息
  dom: boolean;     // 捕捉全部点击以及键盘事件
  fetch: boolean;   // 记录使用Fetch API完成的HTTP请求
  history: boolean; // 记录history的变化
  sentry: boolean;  // 记录主动上报的事件
  xhr: boolean;     // 记录使用XMLHttpRequest API完成的HTTP请求
}复制代码

GlobalHandlers 全局设置是否须要对全部未捕获错误或未处理的失败响应进行处理
```
{
  onerror: boolean;
  onunhandledrejection: boolean;
}复制代码
```
LinkedErrors 递归查询错误堆栈的最深层次数和查询字段
```
{  
    key: string;  
    limit: number;
}复制代码
```

ReportingObserver，如下三类默认都包含

{
  types: <'crash'|'deprecation'|'intervention'>[];
}复制代码

TryCatch 这个默认集成功能使用try/catch语句来包裹原生的定时及事件相关API来捕获这些可能的异步错误
UserAgent 这个功能为上报的信息附加了浏览器的user-agent，帮助咱们更好的了解和区分该用户的使用环境

通常不建议修改或删除这些集成，除非是有特别的需求或者冲突，修改方式为

import * as Sentry from '@sentry/browser';

//删除某集成
Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: integrations => {
    //删除Breadcrumbs集成
    return integrations.filter(integration => integration.name !== 'Breadcrumbs');
  }
});
//修改某集成
Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: integrations => {
    //关闭Breadcrumbs集成自动收集console的功能
    return [...integrations, new Sentry.Integrations.Breadcrumbs({ console: false })];
  }
});复制代码

3.在React中的应用

3.一、将Sentry集成到你的React应用

要将Sentry与React应用程序一块儿使用，您须要使用@sentry/browser（Sentry的浏览器JavaScript SDK）

# Using yarn
$ yarn add @sentry/browser

# Using npm
$ npm install @sentry/browser复制代码

在Sentry中完成项目设置后，Sentry将为您提供一个咱们称之为DSN（Data Source Name）或数据源名称的值。

import * as Sentry from '@sentry/browser';

//DSN由几部分组成，包括协议，公钥，服务器地址和项目标识符。
Sentry.init({dsn: "https://55b49309d120441bb162084e21e8ddbd@sentry.io/1521000"});复制代码

@sentry/browser将报告从您的应用程序触发的任何未捕获的异常。你也能够手动发送错误信息到sentry。

let errorVariable
try{
  console.log(errorVariable.slice(0,3))
}catch(e){
      //捕获异常的错误 
      Sentry.captureException(e,{
      tags: {
          locale: 'en-us'
      }
  })
}复制代码

运行代码，毫无例外，sentry接送到了一个语法错误

细心的小伙伴可能发现了，项目通过打包以后代码变得极其难阅读，这样的报错信息对于咱们来讲是不友好的。还好的是，Sentry supports un-minifying JavaScript via source maps

3.二、sourceMap

第一步，先安装 @sentry/cli 工具

$ npm install -g @sentry/cli复制代码

第二步，在项目根目录下建立.sentryclirc文件

查询组织的slug能够访问https://sentry.io/api/0/organizations/

查询项目的slug能够访问https://sentry.io/api/0/organizations/{organization_slug}/projects/

//.sentryclirc
[defaults]
url=https://sentry.io/
org={organization_slug}
project={project_slug}复制代码

若是是首次配置，咱们在须要webpack打包的文件目录下运行sentry-cli login命令进行受权，命令行将会指引咱们打开浏览器新建一个authentication token，而后sentry-cli 自动将咱们填入的token写入了咱们新建的.sentryclirc配置文件中

第三步，安装@sentry/webpack-plugin

$ npm install -S @sentry/webpack-plugin复制代码

第四步，webpack配置中引入Sentry Webpack Plugin插件，就能够实如今webpack打包过程当中自动识别源文件和SourceMap文件并自动上传。

//config-overrides.js
const {
  override,
  addWebpackPlugin
} = require("customize-cra")

const SentryCliPlugin = require('@sentry/webpack-plugin');

module.exports = override(
  addWebpackPlugin(new SentryCliPlugin({
    release: 'project20190804',
    include: 'build',
    urlPrefix: '~/',
    ignore: ['node_modules'],
  }))
)复制代码

第五步，判断文件是否上传成功，能够在sentry.io上查看

能够看到文件已经上传成功，其中～表明页面的协议加域名，因此能够检查下具体文件是否是可以访问的，避免SourceMap解析失败。

通过了上面的一系列操做，让咱们从新打包运行程序；果真没让baba失望！

顺带提一下，为了不本地调试的时候也将错误上传上去，咱们能够经过Allowed Domains属性进行配置

3.三、sentry的基本配置

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 blacklistUrls: ['external-lib.js'], // An array of strings or regexps that'll be used to allow specific errors based on their origin url
  whitelistUrls: ['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;
  },
});复制代码

4.结语

本文主要围绕如何搭建和使用sentry，解决在线上环境中，由于应用跑在用户浏览器中，发生错误时咱们若是要对其进行调试就会显得比较困难。因为本人水平和经验有限，若有纰漏或建议，欢迎留言。若是以为不错，欢迎关注海致星图，谢谢您的阅读。