单页面应用优化之路一前端日志管理Sentry使用(三)
B: 该事件主要是线上运行的前端代码出错后,捕获异常,并发送至Sentry服务器
第一步,初始化 Sentry Browser SDK
import * as Sentry from '@sentry/browser'
Sentry.init({
dsn: http://sdasdadadasdad@sentry.io/231,
release: 'v1.1.1',
environment: 'uat'
})
当然,初始化sentry的方法有好几种 ,具体的可查看官网
第二步,捕获异常或消息等,并发送异常
捕获异常
第二步,捕获异常或消息等,并发送异常
捕获异常
try {
console.log(window.s.d);
} catch (err) {
Sentry.captureException(err);
}
捕获消息
OK,这些就是Sentry的简单使用方案
下面我们说一说 Sentry Browser SDK 的初始化参数,一些简单的英文,就不多做解释了
dsn : The DSN tells the SDK where to send the events to.
debug : Turns debug mode on or off. If debug is enabled SDK will attempt to print out useful debugging information if something goes wrong with sending the event.
release : 主要是让上报的错误与 上传的 sourceMaps 的 release 对应上
environment : 主要是为了区分错误出现的 不同环境
integrations : 一些 SDKs 可以在Sentry初始化时以参数方式集成项目,举个例子吧
这些就是一些常用的配置,剩余配置不多赘述,直接看官网
https://docs.sentry.io/error-reporting/configuration/?platform=browser
还可以记录一些用户信息,或是必要的信息,方便排查问题,这些信息每一次sentry上报的信息中都会携带,属于全局设置
Sentry.configureScope((scope) => {
scope.setUser({ 'UserInfo': {........} }) // 记录用户数据
scope.setTag( 'tags', 'sssss') // 这个tag可以在sentry中对关注的问题进行筛选
})
Sentry.captureMessage('Something went wrong');
OK,这些就是Sentry的简单使用方案
下面我们说一说 Sentry Browser SDK 的初始化参数,一些简单的英文,就不多做解释了
dsn : The DSN tells the SDK where to send the events to.
debug : Turns debug mode on or off. If debug is enabled SDK will attempt to print out useful debugging information if something goes wrong with sending the event.
release : 主要是让上报的错误与 上传的 sourceMaps 的 release 对应上
environment : 主要是为了区分错误出现的 不同环境
integrations : 一些 SDKs 可以在Sentry初始化时以参数方式集成项目,举个例子吧
Sentry.init({
dsn: process.env.SENTRY_DSN,
integrations: [
new Integrations.Vue({
Vue,
attachProps: true
})
],
release: process.env.SENTRY_HASH,
environment: process.env.NODE_ENV
})
https://docs.sentry.io/error-reporting/configuration/?platform=browser
Sentry.configureScope((scope) => {
scope.setUser({ 'UserInfo': {........} }) // 记录用户数据
scope.setTag( 'tags', 'sssss') // 这个tag可以在sentry中对关注的问题进行筛选
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」