单页面应用优化之路一前端日志管理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);
}
  捕获消息
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上报的信息中都会携带,属于全局设置

Sentry.configureScope((scope) => {
    scope.setUser({ 'UserInfo': {........} })  //  记录用户数据
    scope.setTag( 'tags', 'sssss')       //     这个tag可以在sentry中对关注的问题进行筛选 
})
posted @   南巷清风--大R  阅读(391)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示