npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sentry-reporter-js

v0.3.7

Published

sentry 监控平台 前端 js sdk

Downloads

10

Readme

sentry-reporter-js

sentry 监控平台 前端 js sdk

  • 监控 xhr 错误 httpError (同一状态码与同一请求方法视为一类 httpError)
  • 监控资源加载错误 resourceError (同一标签视为一类 ResourceError)
  • 监控运行时错误
  • 监控 promise 错误
  • 监控客户端上下线状态

接入

import SentryReporter from "sentry-reporter-js";
import Vue from 'vue'

SentryReporter.init({
  dsn: "" // sentry js dsn,
  enable:true, // 是否启用上报插件
  debug:false, // 控制台展示发送给sentry的数据,不会发送请求,(!该选项会强制SentryReporter enable状态为true)
  environment:'pre', // 上报环境
  release:'', // 发布版本 一般为commit号
  ignoreErrors:[ // 忽略的错误 正则数组
    'WeixinJSBridge',
    /null is not an object.+evaluating.+(a\.childNodes).+/,
    /open\.weixin\.qq\.com/,
    /up\.qbox\.me/
  ],
  resourceError:{
    level:'warning' // 默认日志级别
    captureTagName:['img','audio','video','link'] // 抓取资源错误的标签 不设置标签的资源不上报 但是会自动进入breadcrumb,以供运行时错误时显示
  },
  httpError:{
    level:'warning' // 默认日志级别
    responseHeaderTags: ['x-request-id'] // 自定义响应头字段为标签,默认为空
  },
  framework:{
      Vue:Vue // 集成的框架构造函数
  }
});

SentryReporter's api

SentryReporter.setFramework({
  Vue: window.Vue
})

// 设置全局 tag上下文
SentryReporter.setTagsContext({
  tag1: 1,
  tag2: 2
})

// 设置全局用户上下文
SentryReporter.setUserContext({
  name: 'lee'
})

// 设置全局 额外错误信息
SentryReporter.setExtraContext({
  extra1: 1,
  extra2: 2
})

自定义上报错误

const err = new Error('错误信息')
SentryReporter.captureException(err) // 监控端显示 Error 错误信息

// 设置自定义错误类型
const err = new Error('错误信息2')
err.name = 'WxSdkError'
SentryReporter.captureException(err) // 监控端显示 WxSdkError 错误信息2

// 发送额外信息
SentryReporter.captureException(err,{ // 监控端详情页会追加 tag1,tag2 标签,添加额外信息
  // 自定义tag 请只使用英文作为键名
  tags:{
    tag1:1,
    tag2:2
  },
  // 自定义extra
  extra:{
    a:1,
    b:2
  },
  level:'error' // 错误日志级别 可选:error|warning|info
})

注意

  • Promise 错误只能抓取 Error 对象实例或字符和数字,无法抓取 plainObject, 如是无须上报的错误对象,请给与 noReport 属性
  • ResourceError 和 httpError 默认日志级别为 warning
  • ResourceError 中未声明的标签如发生资源错误,不会上报,但是会在 breadcrumb 中以供参考