摘要：客户端安装步骤根据使用平台选择选择官网有说明。应用可使用的监听钩子如下事件，上报成功之后会此事件，可以监听此事件做一些其他的事情，比如上报到其他的平台等等。
概念
js错误日志统计工具，官网文档
以下说明前提条件都是raven-js
日志收集必要条件sentry平台帐号注册
raven客户端安装
sentry服务平台进行首页->新建项目之后，点击settings,可以设置错误日志收集条件，其中客户 端dsn（结构：协议://公钥:私钥@sentry平台地址／sentryId）, 在sentry 客户端raven安装配置中会用到。sentry客户端raven
根据使用平台选择raven（sdk选择官网有说明）。
配置方法如下（我用的是react,使用的是import方式,其中url就是sentry服务端获取的dsn,省略号是配置options):
import Raven from "raven-js";
Raven.config(url, {
release: "1.0.0",
whitelistUrls: [
...
],
...
}).install();
tags(对应sentry服务平台错误详情中的tags,便于分析错误发生的情景):
user(对应sentry服务平台错误详情中的user,便于记录触发错误的具体用户):
extra(对映sentry服务平台错误详情中的Additional Data,便于各别信息的统计):
whitelistUrls: 上报到sentry服务平台的白名单，假如触发错误的js链接脚本host不在其值里，就无法上报错误。
错误日志上报（以我用的raven-js作为说明，其他可查看源代码)js运行期间，如果发生错误时，错误（比如点击回调函数执行报错，ajax同源请求 报错等）没有被try catch或者以其他方式捕捉，就会冒泡到window，触发 [onerror][2]事件。当然资源加载失 败，比如img, script,会执行该元素onerror不会冒泡window.onerror, onerror具体声明如下：
window.onerror = function(messageOrEvent, source, lineno, colno, error) { ... }
因为window.onerror是ECMAScript不标准的属性，不同浏览器实现可能会略有 不同，error参数是raven上报日志的关键（ps: 没有error,就找不到错误栈 stack,自然就追踪不到问题），所以raven客户端巧用try, catch对错误进行捕 捉（ps:catch获取到的error对象有raven需要的东西,比如错误栈)，然后采用 captureException进行错误上报，核心源代码如下：
对addEventListener、setTimeout、setInterval、 requestAnimationFrame等回调函数进行了如上包装，这样就可以保证这些函数 的回调报错时候可以有错误栈，同理，可以根据项目架构对可能出现问题进行 try..catch包装，采用手动上报，做到最大限度错误日志上报。
采用raven.captureException(msg/e, options),第一参数可以是字符串， 也可以是Error对象(ps: raven内部会对所传参数进行判断，如果是msg,会转换 成Error对象),第二个参数options可设置参数同raven配置安装时可以用的参数 同，只不过这里用到的参数作用域只限于此条错误日志，raven.config中用的 options对所有错误日志都生效。应用可使用的监听钩子（*.adEventListener(如下事件，callback)
ravenSuccess | onRavenSuccess: raven上报成功之后会dispatch此事
件，可以监听此事件做一些其他的事情，比如上报到其他的平台等等。
ravenFailure | onRavenFailure：raven上报失败之后会dispatch此事
件，可以监听此事件做一些其他的事情，比如上报到其他的平台等等。
ravenHandle | onRavenHandle：手动调用Raven.captureException之
后会dispatch此事件，可以监听此事件做一些其他的事情，比如上报到其他的平台
等等。
总结一下就是根据自己的情况，可以设置一下whitelistUrls， ignoreErrors，
ignoreUrls，上报比例以及javascript跨域资源错误统计处理（crossorigin），如果你使用webpack,可以在output中添加一个参数crossOriginLoading，webpack编译时会自动给按需加载的js获取加上crossorigin,说明如下：
服务端response头部添加Access-Control-Allow-Origin: *。
建议公钥，私钥信息不要存放于前端页面，可以放在中间服务器，走客户端－》中间服务－》sentry服务。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89956.html
摘要：中异常处理类主要包含两个方法和，其中就是主要用来向第三方发送异常报告，这里选择向这个神器发送异常报告，并使用通知开发人员。通过也能发现的执行流程。 说明：Laravel学习笔记之bootstrap源码解析中聊异常处理时提到过Sentry这个神器，并打算以后聊聊这款神器，本文主要就介绍这款Errors Tracking神器Sentry，Sentry官网有一句话个人觉得帅呆了: Stop ...
摘要：我创建了一个名为的项目。错误信息查看在后台找到我们的项目，点击进去就能看到多了一条错误信息。它由以下几部分组成，分别是协议公钥私钥主机路径一般为空项目。 sentry简介 Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了w...
摘要：对我们来说最大的便利就是利用日志进行错误发现和排查的效率变高了。官方也提倡正确设置接收的日志的同时，用户也能继续旧的日志备份。 在各种系统和应用里，无论你的代码再完美也还是会抛异常，出错误。今天的主角是当今比较流行的异常记录框架 - Sentry，来了解一下。 关于日志管理 应用越做越复杂，输出日志五花八门，有print的，有写stdout的，有写stderr的, 有写logging的...
摘要：对我们来说最大的便利就是利用日志进行错误发现和排查的效率变高了。 面临的问题 程序运行的日志是一个必不可少的东西，可能是一些系统信息，比如 gc 的情况；可能是一些正常的模块处理信息，比如最近更新的配置；还可能是一些在程序运行中，我们不希望出现的错误所带来的信息。通过日志，可以知道我们的程序是不是在正常地运行，看到错误日志，我们还需要利用日志排查错误。 我们知道日志如此重要，并乐于记录...
摘要：项目中接入最近在公司的内部项目中接入技术栈，跟踪运行时错误。具体的可以在你的项目中中查看三客户端设置在客户端中接入是简单的，只需要配置插件就可以了。 Vue 项目中接入sentry 最近在公司的内部Vue项目中接入sentry技术栈，跟踪运行时错误。针对这件事分享下，有不完整或者错误的地方欢迎交流。[源码][1] 一、sentry 错误日志收集框架 Stop hoping y...
阅读 1296·2021-10-14 09:43
阅读 1269·2021-10-09 09:58
阅读 1779·2021-09-28 09:42
阅读 3514·2021-09-26 09:55
阅读 1599·2021-08-27 16:23
阅读 2509·2021-08-23 09:46
阅读 712·2019-08-30 15:55
阅读 1146·2019-08-30 15:54
