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

@inke-design/edith-script

v1.0.5

Published

监控平台上报

Downloads

67

Readme

Edith 监控平台script

上报前端错误到Edith后台

更新日志


开发

开发请看

安装

npm install @inke-design/edith-script -save

或者CDN引用,脚本一直会更新到最新版本,不需要更换链接,也支持放在其他域名路径下,下载cdn源码

建议放在<head>里,以保证错误和记录数据更加准确

<script src="https://webcdn.inke.cn/edith.cn/edith.min.js"></script>

使用方式

  • npm方式
// entry.js

import Edith from '@inke-design/edith-script'

Edith.init({
  apiKey: 'apikey', // 用于区分不同项目
  silentDev: true, // 开发环境下不上报,根据域名是否为ip或者localhost来判断
  plugins: [ // 内置插件
    'breadcrumbs', // 记录用户行为堆栈
    'redo', // 记录录屏
    'network', // 记录网络信息
  ]
})
  • CDN方式
window.Edith.init({
  apiKey: 'apikey', // 用于区分不同项目
  silentDev: true, // 开发环境下不上报,根据域名是否为ip或者localhost来判断
  plugins: [ // 内置插件
    'breadcrumbs', // 记录用户行为堆栈
    'redo', // 记录录屏
    'network', // 记录网络信息
  ]
})

其他参数

Edith.init({
  apiKey: 'apikey', // 用于区分不同项目,根据域名是否为ip或者localhost来判断
  silentDev: true, // 开发环境下不上报
  plugins: [ // 内置插件,选择引入
    'breadcrumbs', // 记录用户行为堆栈
    'redo', // 记录录屏
    'network', // 记录网络信息
  ],
  resourceWhiteList: ['www.baidu.com', /^((?!(a\.com|b\.com)).)*$/], // 资源加载监听的白名单(支持正则,字符串会忽略判断协议和query参数)
  ajaxWhiteList: ['//example.com/search'], // 网络请求监听的白名单(支持正则,字符串会忽略判断协议和query参数)
  silentPromise: true, // 是否不监听Promise错误,默认为false
  silentResource: true, // 是否不监听资源加载错误,默认为false
  silentHttp: true, // 是否需要不监控网络请求异常,默认为false
  silentWebsocket: true, // 是否不监听Websocket错误,默认为false
  setHttpBody: true, // 是否上报http请求里的body,默认为false
  filters: err => { // 过滤错误函数,参数为带有name, title, url, message, ajax, target的错误信息字段, 返回值为真值,则不上报错误(自定义上报不拦截)
    if(err.message === 'Script error.') return true
  }
})

自定义上报方法

在某些情况下,因一些无法跟踪的业务错误,导致业务出现问题,可以采用自定义上报该错误。 Edith内部有一个debug方法,可以传两个参数,第一个参数为错误名称(字符串),第二个参数为错误信息,可以是字符串或者对象等。

if(uid === undefined) Edith.debug('NoUID', {
  msg: 'uid为空',
  ...
})

录屏隐私处理

有些业务,可能由于涉及到隐私和不宜公开的信息,不希望录屏上报到后台,需要给指定的DOM做隐私处理。

  • HTML元素中添加类名.edith-block将会避免该元素及其子元素被录制,回放时取而代之的是一个同等宽高的占位元素。
  • HTML元素中添加类名.edith-ignore将会避免录制该元素的输入事件。
  • input[type="password"]类型的密码输入框默认不会录制输入事件。

filters参数示例

  1. 过滤name为 TypeError 的错误
Edith.filters = err => {
  if(err.name === 'TypeError') return true
}
  1. 过滤 method 为 GET,且 status 为 403 的错误
Edith.filters = err => {
  if(err.ajax.method === 'GET' && err.ajax.stutus === 403) return true
}
  1. 过滤指定域名的资源加载错误
Edith.filters = err => {
  return err.name === 'resourceError' && err.message.match(/example.com/)
}
  1. 过滤url为空字符串的图片加载错误
Edith.filters = err => {
  const { target: { tagName = '' }, message } = err
  return tagName.match(/img/g) && message === ''
}

自定义插件

有些业务需要上报业务需要的相关数据,就可以采用自定义插件的方式,本方式参考了webpack的插件接入方式

插件是一个带有apply方法的对象,这个方法的唯一参数compiler为一个函数,需要在apply方法内部调用它,来添加上报的插件数据。

Edith.init({
  ...,
  plugins: [
    { // 自定义插件
      apply(compiler) {
        compiler('key', function(edith, callback) {
          callback({
            uid: 'my-data'
          })
        })
      }
    }
  ],
})

收到上报后,会在后台错误详请里查看插件数据,建议插件方法内部

而这个compiler函数,接收两个参数:

  1. 第一个为上报插件数据的Key[字符串]
  2. 第二个参数为一个获取内容的方法(为了保证每次上报都会执行获取一次),该方法有两个参数

第一个为Edith实例对象,可以通过其拿到Edith自身的配置数据;第二个为一个回调函数,通过执行这个函数来传递需要上报的内容,内容可以是对象,也可以是字符串或其他数据类型

除了在初始化时添加插件,也可以动态添加,且可以通过new 一个对象来增加自己需要的属性。

 Edith.plugins.push(new MyEdithPlugins(options))