1.0.5 • Published 4 years ago
error-watch-webpack-plugin v1.0.5
Error Watch Webpack Plugin
一个贼好用的自动注入js代码的错误监控上报webpack插件。
快速开始
Shell
npm install --save-dev error-watch-webpack-pluginwebpack.config.js
const ErrorWatchWebpackPlugin = require('error-watch-webpack-plugin')
module.exports = {
... ...,
plugins: [
new HtmlWebpackPlugin(),
// 注意：引入该插件必须要在 HtmlWebpackPlugin 插件之后，否则读取不到html文件
new ErrorWatchWebpackPlugin()
]
}使用
友情提示：建议将js代码注入到head的最上部分，以保证任意的错误都可以做到全局监控。
此插件允许开发者将代码注入到html文件中的任意位置，只需要在想要注入的地方写入<!-- error watch code -->：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- error watch code -->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>webpack打包后：
<!DOCTYPE html>
<html lang="en">
<head>
<script>(function(){function c(l){var e=l.target.localName;var i=l.message;var k="",n="";var m="Static js file loading error";var d="Static css file loading error";var g="Static image file loading error";var j=/rel=\"stylesheet\"/g;var h=/SyntaxError|TypeError/g;var f=/ReferenceError|RangeError|EvalError/g;if(e==="script"){k="static-js-p0";n=m+";jsUrl="+l.target.src}if(e==="link"&&j.test(l.target.outerHTML)){k="static-css-p0";n=d+";cssUrl="+l.target.href}if(h.test(i)){k="syntax-error-p1";n=i+";fileName="+l.filename+";lineno="+l.lineno+";colno="+l.colno}if(f.test(i)){k="code-error-p1";n=i+";fileName="+l.filename+";lineno="+l.lineno+";colno="+l.colno}if(e==="img"){k="static-img-p2";n=g+";imgUrl="+l.target.src}if(l.type==="unhandledrejection"){k="promise-error-p2";n="Promise error reason: "+l.reason}return{type:k,message:n}}function b(){return navigator.userAgent}function a(){return window.location.href}window.addEventListener("error",function(d){d.preventDefault();const e=c(d);console.log(e)},true);window.addEventListener("unhandledrejection",function(d){d.preventDefault();const e=c(d);console.log(e)})})();</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>