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

cla-web

v0.0.4

Published

cla web sdk

Downloads

7

Readme

CLA-WEB-SDK

CLA-WEB-SDK 为前端监控SDK,涵盖错误监控、CGI上报、性能监控。接入SDK简单配置即可完成自动上报,无侵入代码。

使用文档

功能点

  • 获取cgi日志
  • 获取错误日志
  • 获取异常日志
  • 获取console日志
  • hook常用的ajax库(重载XMLHttpRequest)
  • 提供主动上报的接口(分级别info/debug/error)
  • 为用户分配uuid(如果配合node sdk使用,由node sdk分配)
  • 防止死循环造成的重复上报,做频率限制
  • 大包体压缩,不能造成日志请求失败

发布指引

  • 构建包npm run build
  • 发布npm run release

使用方法

一、下载 cla-web-sdk

  npm install cla-web -s
  # 或者
  yarn add cla-web

二、引入SDK

  1. 内联引入 (注意:务必在项目头部<head></head>引入

    • 可在 cla-web 包目录下找到 /lab/cla.min.js 然后自行复制即可
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>CLA-WEB-SDK</title>
      <script src="/libs/cla.min.js"></script>
    </head>
    <body>
    
    </body>
    </html>
  2. VUE项目中引入 (注意:记得要先执行 npm install cla-sdk

    import Cla from 'cla-web'

三、实例化SDK

引入SDK后,需实例化SDK

注意:appname baseUrl 为必传参数,为空会导致初始化SDK失败,无法正常上报

const claIns = new Cla({
  appname: 'fca-wechat-help', // 项目名称
  baseUrl: '' // 上报地址,申请后邮件提供
})

三、查询数据

  • 登陆kibana,查询对应的 appname 即可。

参数说明

| 名称 | 类型 | 必填 | 默认值 | 说明 | | ----------- | -------- | -------- | ---------- | ---------------------------- | | appname | String | 是 | 无 | 项目名称 | | baseUrl | String | 是 | 无 | 上报地址 | | repeat | Number | 否 | 5 | 相同错误最大重复次数 | | off | Boolean | 否 | true | 是否开启 cgi 异常返回码上报 | | delay | Number | 否 | 2000 | 上报延迟时间(ms) | | sampling | Number | 否 | 1 | 错误抽样率 | | timeout | Number | 否 | 20000 | ajax 请求最大延迟时间(ms) | | performance | Boolean | 否 | false | 是否自动上报页面性能加载数据 | | blacklist | Array | 否 | [] | cgi类上报地址黑名单列表 |

API

claIns 的实例方法 实例化SDK后调用

  1. 自定义上报
  • claIns.report(customLog)
  • 自定义上报 customLog 格式可以为 Error 对象或者自定义对象。
  • 自定义对象建议格式如下:
    const customLog = {
        msg: 'custom message',
        stack: 'custom report error',
        level: 'INFO'
    }
    // level: INFO/DEBUG/ERROR
  1. 手动上报性能数据
  • claIns.reportPerformance()
  • 可配置开启自动上报性能数据,也可以在合适的时候手动上报。

其他

  • 在VUE项目中接入SDK后 若定义 Vue.config.errorHandler 方法,建议实例化SDK后调用。claIns.report()方法手动上报,SDK会自动解析报错信息并上报,若未定义无需额外配置。

      Vue.config.errorHandler = function (err, vm, info) {
        claIns.report(err)
      }
  • SDK支持通过url参数,获取用户uuid,便于查询特定用户的日志。

    • 用户输入 http://a.com?cla=1 时,页面弹出提示框,显示用户uuid。