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

@doog_boy/ilog

v1.0.4

Published

data buried point transmitter

Downloads

8

Readme

Quick Start

1. install 安装 | 引入

  • npm install myy-ilog
  • yarn add myy-ilog
  • script src=dist/iife/ilog.js

2. set configuration 项目初始化配置

  • 需要后端提供一个gif地址,比如:www.xxx.gif
  • 方式1:让后端把www.xxx.gif做成get+post接口
  • 方式2:让后端提供真实的1x1像素的www.xxx.gif访问地址 然后抓取日志获取参数
// main.ts
import {
  ilog,
  initIlogConfig,
  autoAllObserve,
  mutationRun,
  uxObserveRun,
  errorObserveRun,
  perfObserveRun,
  removeObserveOnleave,
  pagehideCallbackCollecter,
  sendBeaconHandler
} from '@doog_boy/ilog'

interface initIlogConfigType {
  a: number | string,        // 【🔥必须】 应用id 一个项目只能设置一个appId
  ilogUrl: string,           // 【🔥必须】 必须是图片资源文件地址 比如:www.xxx.gif 让后端把地址做成get+post接口
  longResourceTime?: number, // 默认100ms 资源加载时间阈值 ms  超过时间就会上报 🔥请谨慎设置
  longApiTime?: number,      // 默认100ms 服务api接口时间阈值 ms 超时会上报 🔥请谨慎设置
  longTaskTime?: number,     // 默认1000ms 长任务时间阈值 ms  当遇到卡顿情况 卡顿时间超过阈值 会上报卡顿 🔥请谨慎设置
  viewAsm?: 'vsm',           // 默认vsm 曝光埋点字段名 默认vsm 比如 <body vsm="a.b.c"></body> 当body曝光就会将a.b.c进行上报
  clickAsm?: 'csm',          // 默认csm 点击埋点字段名 默认csm 比如 <body csm="a.b.c"></body> 当点击body就会将a.b.c进行上报
  mode?: 'dev',              // 默认dev 运行环境 'dev' | 'test' | 'pre' | 'prd'
  threshold?: 0.5,           // [0-1]默认0.5 曝光范围定义 0表示露出1px就算曝光  1表示模块完全暴露才算曝光
  ba?: {                     //  默认空对象 基础信息 每次上报都会携带的参数 比如userId  这类等
    userId: 66666,  
  },
  resendInterval: 10         // 默认10 间隔多久发送一次失败的log  单位分钟 最小1分钟 值为 false 0 '' null 等  等于关闭自动重发功能 
}
// 初始化配置
initIlogConfig({
  ...
})

// 选择开启
mutationRun()                                     // 开启曝光监控
uxObserveRun()                                    // 不传 全部开启
uxObserveRun(['click', 'input', 'pageusetime'])   // 选择开启 用户行为监控 pageusetime click input
errorObserveRun()                                 // 开启错误监控
/**
 * @param {String} crux    首屏性能指标
 * @param {String} memory  内存使用情况  打开+关闭 两次上报
 * @param {String} longApi 超长fetch、xhr 请求  
 * @param {String} longTask 长任务(卡顿)
 * @param {String} longResource 超长资源请求
 */
perfObserveRun(['memory', 'crux', 'longApi', 'longTask', 'longResource']) // 选择开启 性能监控
perfObserveRun()                                  // 不传 全部开启 性能监控
removeObserveOnleave() // 页面销毁时移除全部监控

// 全部开启(自动移除)
autoAllObserve() 

2.1 crux

interface crusType {
  whiteScreen     // 白屏时长
  firstPackage    // 首包耗时
  firstScreen     // 首屏耗时
  htmlLoad        // html加载完成耗时
  firstUx         // 首次交互时间 进入页面后多久可以交互
  pageLoad        // 页面完全加载
  FCP,            // 首次看到网页内容的时间点
  timing          // 原生字段
}

3. ILogType

// ilog参数type
export interface ILogType {
  a: number | string                // 应用id  比如 app1-1001   app2-1002  app3-1003
  asm: string                      // 点位字符串 自行与后端约定即可 比如'a.b.c.d'  a是页面Code  b是模块code c是按钮code  d是操作code
  bt?: number                       // 上报时间戳 默认是上报时间 有值取值
  e?: 'pc' | 'h5' | 'xcx' | string  // 环境  pc h5 小程序 等
  ua?: string                       // userAgent
  ki?: 'app' | 'per' | 'err'        // 埋点类型  app-业务  per-性能监控  err-错误监控
  ba?: object                       // 项目配置信息 比如诊所id userid  等等
  hr?: string                       // 浏览器地址
  ext?: ExtendsType | any           // 扩展数据 传啥存啥  如果是业务埋点内容就是单个埋点需要传的参数 性能埋点 就是性能数据  错误埋点是错误信息
  et?: 'view' | 'click' | 'input' | 'keyboard' | 'timing' | string // 事件类型
  [key in string]: any // 其他字段
}

4. use 业务端使用 pageCode moduleCode为可选 opCode为必填 'a..c' '..c' '.b.c'

<!-- 当body曝光或者被点击时 进行上报 (vsm上报前提是mutationRun开启 csm上报前提是 uxObserveRun(['click'])) -->
<body vsm="a.b.c" :csm="`a.b.${c}`"></body>
<!-- 曝光上报后会移除vsm属性 -->
// 代码主动埋点
if(Math.random() > 0.5) {
  ilog({
    a: 123456, // 这里支持跳过项目配置传appId 处理B应用其实是A应用抽离的一个大模块 appId不对应的情况
    asm: 'pageCode.moduleCode.opCode', // 业务埋点基本必传opCode '..opCode'
    ext: {
      a: 'id',
      b: 'idd'
      ...
    }
  })
}

API

  • pagehideCallbackCollecter 回调收集器 会在addEventListener pagehide 事件统一执行回调
// pagehideCallbackCollecter 收集回调 在pagehide钩子执行
pagehideCallbackCollecter(() => {
  ...
})
  • vue错误监控 类似vue这种不会抛出错误的框架 可以在errorHandler里面解析错误并筛选上报
const app = createApp(App)
app.config.errorHandler = err => {
  ilog({...})
}
  • sendBeaconHandler 提供一个在pagehide期间不会被中断的上报方式 且上报为post请求 超长get也可以考虑用这个
window.addEventListener('pagehide', (event) => {
  sendBeaconHandler({ ext: 123 })
  // pagehideCallbacks.forEach(cb => cb())
})