1kb js library contains development debugging, error monitoring and reporting, user problem localization features

Overview

中文 | English

AlloyLever

1kb(gzip)代码搞定开发调试发布,错误监控上报,用户问题定位。

  • 支持错误监控和上报
  • 支持 vConsole错误展示
  • 支持开发阶段使用 vConsole
  • 支持生产环境机关拉取 vConsole
  • 支持预埋机关唤起
  • 支持url带参数唤起

url带参数唤起有两个目的,第一是方便网站开发过程中显示vConsole面板,第二是发给投诉反馈网站错误的用户显示vConsole面板用于定位错误。

安装

npm install alloylever

CDN地址下载下来使用:

https://unpkg.com/alloylever

使用指南

AlloyLever.config({
    cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',  //vconsole的CDN地址
    reportUrl: "//a.qq.com",  //错误上报地址
    reportPrefix: 'qun',    //错误上报msg前缀,一般用于标识业务类型
    reportKey: 'msg',        //错误上报msg前缀的key,用户上报系统接收存储msg
    otherReport: {              //需要上报的其他信息
        uin: 491862102
    },
    entry:"#entry"          //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙
})

AlloyLever会监听window.onerror并把错误信息保存下来,并且上报到reportUrl,你也可以召唤到vConsole并显示出来错误和相关日志。 或者使用这个CDN也可以://pub.idqqimg.com/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js

url唤起vConsole

只要你的页面引用了AlloyLever,你只需要在你的url里带上 vconsole=show 就能显示vConsole面板。如:

//加载并显示log面板
http://localhost:63342/AlloyLever/index.html?vconsole=show
//加载但不显示log面板
http://localhost:63342/AlloyLever/index.html?vconsole=hide
//不加载vConsole脚本
http://localhost:63342/AlloyLever/index.html

这些url的作用很好理解:

  • 开发阶段用于调试
  • 发给投诉的用户打开带有vconsole=show的url

在线演示

QQ交流群491862102

English | 中文

AlloyLever

1kb(gzip) js library contains development debugging, error monitoring and reporting, user problem localization features.

  • support error monitoring and reporting
  • support for vConsole error display
  • support the development phase by using vConsole
  • support the production environment authorities to pull vConsole
  • support DOM evokes vConsole
  • supports url evokes vConsole

There are two purposes for URL parameter arousal, the first is to display the vConsole panel during the website development process, and the second is to send a complaint to the feedback site. The wrong user displays the vConsole panel for locating errors.

Install

npm install alloylever

or get it from cdn:

https://unpkg.com/alloylever

Usage

AlloyLever.config({
    cdn:'//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js',  //vconsole CDN address
    reportUrl: "//a.qq.com",  //Error reporting address
    reportPrefix: 'qun',    //An error reporting msg prefix is generally used to differentiate business types
    reportKey: 'msg',        //Error reporting msg prefix key, user reporting system receives storage msg
    otherReport: {              //Other information to be reported
        uin: 491862102
    },
    entry:"#entry"          //Please click on this DOM element to summon vConsole 6 times. You can use AlloyLever.entry('#entry2') add more entry
})

AlloyLever will listen to window.onerror and save the error information, and report to reportUrl, you can also call vConsole and display errors and related logs.

URL evokes vConsole

As long as your page references AlloyLever, you simply display the vConsole panel with the vconsole=show in your url. Such as:

//load and display the log panel
http://localhost:63342/AlloyLever/index.html?vconsole=show
//load but don't display the log panel
http://localhost:63342/AlloyLever/index.html?vconsole=hide
//don't load vConsole
http://localhost:63342/AlloyLever/index.html

The role of these URL is well understood:

  • development phase for debugging
  • open the URL with vconsole=show to the user who has complained

DEMO

License

This content is released under the MIT License.

Comments
  • config中的vconsole地址配置不生效

    config中的vconsole地址配置不生效

    /*!
     *  AlloyLever v1.0.2 By dntzhang
     *  Github: https://github.com/AlloyTeam/AlloyLever
     *  MIT Licensed.
     */
    

    想使用vconsole的3.x版本,虽然配置了cdn,但加载时还是使用的默认的 s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js 地址,配置未生效

    image

    opened by treadpit 2
  • 代码洁癖

    代码洁癖

    代码写的很漂亮,但是作为一个喷子,不喷点啥老是不自在

    87行 entry =document.querySelector(selector) 加个空格可好 entry = document.querySelector(selector)

    205行 至最后,空格统一一下看起来舒服一些,不然好难受啊。哈哈哈哈

    opened by xianyulaodi 1
  • Update CDN link

    Update CDN link

    I replaced the unpkg link with a jsDelivr CDN link in your readme. jsDelivr is the fastest opensource CDN available and built specifically for production usage. It can serve any project from npm with zero config just like unpkg, but offers a larger network, better reliability and is the only OSS CDN with a valid ICP license and hundreds of servers in China.

    opened by LukasDrgon 0
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • 不能在head里面引入,和KISSY冲突

    不能在head里面引入,和KISSY冲突

    发现两个问题: 1、alloy_lever.js不能放到head里面引入,否则会有“TypeError: Cannot read property 'querySelectorAll' of null(…)”的错误提示; image 会执行这里的语句

    2、alloy_lever.js会被淘宝的KISSY影响,导致页面会有报错,可能是先载入了KISSY的文件,但是系统之前的架构里面有些js是放到里面的; image

    opened by liubin595338764 0
  • 只用alloyLever能触发window.onerror事件,但引入了Vconsole之后触发不了

    只用alloyLever能触发window.onerror事件,但引入了Vconsole之后触发不了

    这是只引入alloylever的情况,url上没有带vconsole c1d28761-7c4c-4623-b633-85ed355c3213 url带上vconsole之后 12ae6fab-ceda-412e-b50b-caab89609067 看了源码,没看出什么问题,请帮忙解决

    看了一下是vconsole的问题,他里面重写了window.onerror方法

    f.isFunction(window.onerror) && (this.windowOnError = window.onerror), window.onerror = function (t, o, n, a, i) {
                                var r = t;
                                o && (r += "\n" + o.replace(location.origin, "")), (n || a) && (r += ":" + n + ":" + a), e.printLog({
                                    logType: "error",
                                    logs: [r],
                                    noOrigin: !0
                                }), f.isFunction(e.windowOnError) && e.windowOnError.call(window, t, o, n, a, i)
                            }
    

    Uploading B7F6C832-CA6D-44CF-B66C-23B7B0EED3BC.png…

    这是编译后的代码,又把e.windowOnError置为null,所以导致之前定义的window.onerror执行失败, vconsole的下载地址是

    opened by Liqihan 1
GraphErr is an open-source error handling library for GraphQL implementations in Deno. It's a lightweight solution that provides developers with descriptive error messages, reducing ambiguity and improving debugging.

GraphErr Descriptive GraphQL error handling for Deno/Oak servers. Features Provides additional context to GraphQL's native error messaging for faster

OSLabs Beta 35 Nov 1, 2022
Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding problems are pulled from LeetCode and Daily Coding Problem.

technical-interview-prep Data structures & algorithms implementations and coding problem solutions. Written in Typescript and tested with Jest. Coding

Lesley Chang 7 Aug 5, 2022
Here I will add daily one problem with solution basic to advance level and try to add multiple solutions of a single problem.

#100-code-days ?? I am adding daily 1 JavaScript solution here ?? and you can fork the repo for add your solution for any specific probelm ⌛️ Day 01:

Amir Sohel 4 Jan 22, 2022
Shikhar 4 Oct 9, 2022
Changd is a open source web monitoring application for monitoring visual site changes using screenshots, XPath's or API's.

Changd is a open source web monitoring application and a free alternative to ChangeTower.com, Hexowatch.com, and other SaaS-based solutions. Changd ca

Paul Aschmann 110 Jan 3, 2023
Node JS/TypeScript module that allows you to work with the site enka.network adding localization and convenience.

enkaNetwork Node JS/TypeScript module that allows you to work with the site enka.network adding localization and convenience. examples • structure ??

kravets 12 Nov 18, 2022
Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy to create user interfaces.

?? Watch Video ?? Read the docs ?? Join our Discord What is Million? Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy t

Derek Jones 5 Aug 24, 2022
Boilerplate project to run MOBILE Test Automation with WebdriverIO v7, Mocha, Appium, Allure reporting and Momentum Suite cloud device farm support

WebdriverIO Mocha Appium Momentumsuite WebdriverIO Integration with local or Momentum Suite real mobile farm devices Supports Native or Hybrid Android

Momentum Suite 21 Dec 5, 2022
PMR - PT & VA Management & Reporting

PMR - PT & VA Management & Reporting is a collaboration platform for pen-testing. PMR Platform is maintained by @SabrySecurity https://sabry.sa

null 10 Nov 19, 2022
Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Yurii De 11 Nov 8, 2022
Webpack dev tools to make performance analysis, error investigation and loader development more convenient

build-tool-inspector Introduction Webpack dev tools to make performance analysis, error investigation and loader development more convenient. Provide

Modern JS 25 Nov 17, 2022
This project contains a leader board for a game which contains players name and list and store them on API build with HTML, CSS, JS and API

Leaderboard This App is a Game Leaderboard app Which is created by JavaScript and the big picture of this application is using API. Build With ??‍?? .

Sahar Saba Amiri 5 Dec 15, 2022
MerLoc is a live AWS Lambda function development and debugging tool. MerLoc allows you to run AWS Lambda functions on your local while they are still part of a flow in the AWS cloud remote.

MerLoc MerLoc is a live AWS Lambda function development and debugging tool. MerLoc allows you to run AWS Lambda functions on your local while they are

Thundra 165 Dec 21, 2022
awsrun 189 Jan 3, 2023
✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

Sugar High Introduction Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped Usage npm install --save sugar-high import { h

Jiachi Liu 67 Dec 8, 2022
A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces

A11y Tabs A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces. Documentation ↗ Demo on Codepen ↗ Features: Support

null 5 Nov 20, 2022
Use real-time computing technology and web technology to build a big data Kanban l to solve the problem. Among them, practical technologies include MySQL, Kafka, Flink, Redis, Flask and Echarts

实时计算(English Version) 运用实时计算技术、Web 技术构建一个大数据看板来解决问题。其中实用技术包括Mysql、Kafka、Flink、Redis、Flask和Echarts 目录 1.问题需求 2.方案分析 3.安装环境 4.环境启动命令和运行代码的方法 5.代码目录结构说明

Serendipity 2 Jan 8, 2022
End-to-End type safety for REST APIs written in Fastify. Only problem is you have to explicity export and register route handlers. LOL

Chino intelligence in japaneese End-to-End type safety for REST APIs written in Fastify. Only problem is you have to explicity export and register rou

sambit sahoo 2 Sep 12, 2022