Description
A loader for webpack, using AST to add exception report(like sentry) in try-catch block
Installation
npm install catch-add-report-loader --save-devUsage
In vue-cli
chainWebpack: config => {
const vueRule = config.module.rule('vue');
const jsRule = config.module.rule('js');
jsRule.use('js')
.loader('catch-add-report-loader')
// you can custom reportCode here, like
.options({
reportCode: (param, path) => `window && window.Sentry && window.Sentry.captureException(${param});
function abc() {
// e: from runtime catch param
console.log('e', e);
}
abc();
console.log('hello-world');`
});
},In basic webpack config
module: {
rules: [{
test: /\.js$/,
loaders: [{
loader: 'babel-loader'
}, {
// place this loader first
loader: 'catch-add-report-loader',
options: {}
}],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
use: sassOptions,
fallback: styleLoaderOptions
})),
...
// add js loader here
js: 'catch-add-report-loader'
}
}
},]
}Disable injecting
Setting comment /* add-report: false */ after the parameter
try {
abc();
} catch (e /* add-report: false */) {
console.log(e);
}Options
reportCode
`type: string | function(param, path) {return [string]}
This string code will be injected at the begining of the try-catch block.
- Default is
window.Sentry && window.Sentry.captureException(${param});
param is the catch block 'parameter`.
// before
try {
abc();
} catch (error) {
console.log(error);
}
// after
try {
abc();
} catch (error) {
window.Sentry && window.Sentry.captureException(error);
console.log(e);
}- Custom a string
.options({
reportCode: 'myCustomReport();'
})- Custom a function, two parameters can be used, and multiple code lines are allowed here
- 3-1
paramis the catch block 'parameter` - 3-2
pathis the AST CatchClause object, see https://astexplorer.net/
