1. Project Overview

After experiencing 13 months of time, log.js V2 version was finally completed, accompanied by the growth of a complete C-end system, and through several small version iterations in the collision with actual business, the newly reconstructed log.js added many features and removed some redundant functions at the same time.

Firstly, what is log.js

log.js is a frontend monitoring plugin that can provide

1. JS execution exception capture
2. Performance metrics monitoring and capture
3. Exception IO, custom IO filtering capture
4. Terminal information capture, IP, city, resolution, UA parsing, etc.
5. Click action capture

and so on... Monitoring content is still being continuously supplemented

2. Open Source License

Using ISC open source protocol

3. Screenshots

4. Feature Overview

Why is log.js

As a web front-end developer, I know that web information collection is affected by the terminal and is naturally difficult to collect, and abnormal scenes often cannot be fully reproduced, or unknown abnormal impacts user retention. At present, most web probes on the market are integrated into their own application systems, and there are configuration heavyweight, difficult to decouple, etc. problems.

log.js can be used in a plug-and-play way to greatly reduce the difficulty of information collection, and the gradual design can also meet most custom scenarios.

Will log.js be affected by the framework?

No, log.js is based on the hack hijacking method to collect the underlying data, and it is not related to the framework, whether it is React, Vue, Jquery, it can hold.

Will log.js affect the application?

No, log.js will not operate the view, and the data collection and reporting after collection will be queued and wait for the business IO low-peak period to perform.

Can log.js collect small program logs?

Not now, log.js is based on the W3C standard implementation of DOM, and there is no planning for compatibility with small programs yet.

5. Tech Stack

How should I use log.js?

Plug and play, log.js is registered in IIFE mode, no need to generate an instance, calllog.init(…params)You only need to configure the sending address to startlog.js

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="https://logjs.site/version/2.0.0beta/log.min.js"></script>
</head>

<body>
		<script>
			log.init({ sendAddress: 'https://www.xxx.com/xxx' });
		</script>
</body>

Deep configuration of log.js

log.init({
    logType: ["error", "diy", 'click', 'io'],//log types - [ 'error', 'click', 'diy', 'io' ]
    degree: 1,//collection rate - (0 - 1)
    id: 'logJs',//logjs instance identifier,
    ioFilter: item => true,//I/O filter (fun, used to define io_list retrieval rules)
    sendAddress: '',//log sending address (default POST application/json receiver needs to be configured with cross-domain)
    reportingBefore: params => params,//log reporting before hook (used to reconstruct parameter structure, append custom parameters)
})

log.js exposed methods

log.init(…params) //start log.js   Note: log.js has actually started working before this method is called, but all information is stored in memory and cannot be accessed externally
log.setOptions(…params) //update configuration
log.log(...) //print remote log with console.log usage, messages will be pushed as custom messages
log.getTerminalInfo() //get terminal information  Note: needs to be used after log.js init
log.getPerformanceInfo() //get performance information  Note: needs to be used after log.js init
log.version //get current log.js version

log body explanation

{
	"io_list": [
		{
			"name": "http://localhost:63342/log.js/website/index.html?_ijt=26dmaaemranugo6rciidd5nar5",
			"entryType": "navigation",
			"startTime": 0,
			"duration": 191.5,
			"initiatorType": "navigation",
			"nextHopProtocol": "http/1.1",
			"renderBlockingStatus": "blocking",
			"workerStart": 0,
			"redirectStart": 0,
			"redirectEnd": 0,
			"fetchStart": 4,
			"domainLookupStart": 4,
			"domainLookupEnd": 4,
			"connectStart": 4,
			"connectEnd": 4,
			"secureConnectionStart": 0,
			"requestStart": 9.199999928474426,
			"responseStart": 10.899999976158142,
			"responseEnd": 13.299999952316284,
			"transferSize": 3064,
			"encodedBodySize": 2764,
			"decodedBodySize": 2764,
			"serverTiming": [],
			"unloadEventStart": 17.5,
			"unloadEventEnd": 17.5,
			"domInteractive": 110.10000002384186,
			"domContentLoadedEventStart": 110.10000002384186,
			"domContentLoadedEventEnd": 110.29999995231628,
			"domComplete": 190.79999995231628,
			"loadEventStart": 190.79999995231628,
			"loadEventEnd": 191.5,
			"type": "reload",
			"redirectCount": 0,
			"activationStart": 0,
			"logType": "io",
			"timeStep": 1667894728849
		}
	],
	"terminal_info": {
		"resolving_power": "1440*900", 
		"referrer": "http://localhost:63342/log.js/website/index.html?_ijt=26dmaaemranugo6rciidd5nar5", 
		"ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36", 
		"browser": {
			"name": "Chrome",
			"version": "107.0.0.0",
			"major": "107"
		},
		"engine": {
			"name": "Blink",
			"version": "107.0.0.0"
		},
		"os": {
			"name": "Mac OS",
			"version": "10.15.7"
		},
		"device": {},
		"cpu": {},
		"ip": "xx.xx.x.xx",
		"city": "\u6d4b\u8bd5\u4eac\u5e2d\u56fd\u6ee2\u5ddd\u5e02"
	},
	"performance_info": {
		"fcp": 115.39999997615814, 
		"fp": 11, 
		"redirect_time": 0, 
		"domain_lookup_time": 0, 
		"connect_time": 0, 
		"response_time": 2, 
		"dom_complete_time": 81, 
		"ttfb": 10.899999976158142 
	},
	"uid": "a165595ca1d7f19c6eef5a31f586767b",
	"id": "logJs"
}