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

@labmai.dev/sdk-browser

v2.1.3

Published

```typescript type BaseSendInfo={ type:string, }

Downloads

477

Readme

上报参数类型

type BaseSendInfo={
  type:string,
}

type Error=BaseSendInfo & {
  // 资源加载错误
  resource_msg?: string,
  // 代码执行错误
  err_info?: IAnyObject
}

type Request = BaseSendInfo & {
    method: string,
    //请求地址
    request_url: string,
    //状态码
    status: number,
    ok: boolean,
    //超时或跨域提示
    message?: string,
    err?: any
    //post请求body传参
    body?: any
}

type HashRoute = BaseSendInfo & {
    from: string,
    to: string
}

type HistoryRoute = BaseSendInfo & {
    from: string,
    to: string
}

type Performance = BaseSendInfo & {
    // 白屏时间
    FP: string,
    // 首次渲染时间
    FCP: string,
    // 渲染元素最长时间
    LCP: string,
    // 浏览器宽度
    browserWidth: number,
    // 浏览器高度
    browserHeight: number
}

type Promise = BaseSendInfo & {
    err: string
}

传递参数

type Options={
    //唯一key
    key: string,
    //服务端地址
    dsn: string,
    //是否禁用 默认为false
    disabled?: boolean,
    //行为栈保存最大长度 默认为20
    maxStackLen?: number,
    //是否开启离开页面自动上报行为栈 默认为true
    isLeaveReport?: boolean,
    // 当前页面feId过期时间,默认3分钟。(过期时间是指,同一页面刷新时过期后feId会产生新的)
    feIdExpireTime?: number;
    beforeDataReport?: (data: IAnyObject) => IAnyObject,
    befortAddStack?:(data: IAnyObject) => IAnyObject,
    //获取服务器时间,用于时间校准上报时间
    getServerTime?:(()=>Promise<number>|number)
}

//配置监控插件是否关闭
type ConfigOptions={
    error?:false,
    fetch?:false,
    hashRoute?:false,
    historyRoute?:false,
    performance?:false,
    promise?:false
    xhr?:false,
    自定义Plugin_Name?:false
}

//初始化时自定义Plugin
type CustomPlugin=Plugin[]

//Plugin
type Plugin<O extends BaseClient = BaseClient> = {
    //Plugin只执行一次
    once?: boolean,
    //Plugin Name
    name: string
    //注册收集事件 notify方法将data数据发送给transform
    monitor: (this: O, notify: (name: string, data: any) => void) => void,
    //进行数据转换 return的数据会给consumer
    transform: (this: O, data: any) => IAnyObject,
    //进行上报等相对应处理
    consumer: (this: O, transformedData: IAnyObject) => void
}

使用方式


    // 上报配置
    {
        config:{
                type:'none' //不上报
            }|{
                type:'addStack', //加入栈,缓存上报
                //immediated立即将栈中信息上报,cache保存至栈中满足最大条件上报
                autoReport?:'immediated'|'cache' 
            }|{
                type:'immediateReport',//立即上报,上报单条信息
                // 默认为 ['sendBeacon', undefined]
                reportConfig?:[ 'image' ,undefined]|['sendBeacon' ,undefined]|['request','GET'|"POST"]
            }
    }

    import {init} from "labmai-sdk"
    const plugin:Plugin={
        name:'test',
        monitor: (notify)=>{
            notify('test',{})
        },
        transform: ( data: any) => {
            retrun {
                type:'test',
                name:'测试',
                ...data
            }
        },
        consumer: ( transformedData: IAnyObject) => {
            this.breadcrumb
                .data(transformedData)
                .config({type:'immediateReport'})
                .use()
        }
    }
    /**
     * 初始化sdk
     * Options 必填
     * ConfigOptions 可选
     * CustomPlugin 可选
     */
    const browser=await init({
        key:'labmai-sdk',
        dns:'htttp://127.0.0.1:4000',
    },{
        test:false
    },[
        plugin
    ])

    /**
     * 动态添加Plugin
     */
    browser.addPlugins(plugin) || browser.addPlugins([plugin])