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

babel-plugin-promise-catcher

v2.2.3

Published

catch promise automatic

Downloads

50

Readme

Start

yarn add babel-plugin-promise-catcher --dev

What did promise catcher do?

  • Automatically append .catch to Promise(You can filter by directory) and report error info(customization)

  • Automatically wrap FunctionDeclaration and ClassMethod with try-catch,but opening this option results in try-catch multiple nesting. It is recommended to filter with functional Dirs. Close by default and needs to be turned on manually.

  • 自动为Promise调用注入.catch(可筛选目录及文件),实现全局异常上报(自定义上报方法)

  • 方法声明 以及 类方法 自动添加try-catch。开启此选项会导致try-catch多重嵌套,增加代码体积。推荐配合functionDirs进行筛选。默认关闭,需手动开启。

code in

function Foo(){
  console.log('Im foo')
}
promise().then((res)=>{

})

promise2().then(res=>{
  
}).catch(err=>{
  console.log('im error')
})


promise3().catch(err=>{
  console.log('im error')
})

code out

import {report} from 'xxx'

function Foo(){
  try{
    console.log('Im foo')
  }catch (e) {
    report(e)
  }
  
}
promise().then(res => {}).catch(err => {
    report(err);
});

promise2().then(res=>{
  
}).catch(e=>{
  report(e)
   console.log('im error')
})

promise3().catch(err=>{
  report(e)
  console.log('im error')
})

webpack.config.js

module: {
    rules: [
          {
            test: /\.js$/,
            exclude:/node_modules/,
            use:[
              {
                loader:'babel-loader',
                options:{
                  plugins:[
                    ['babel-plugin-promise-catcher',{
                        import:{
                          name:'reportInfo', // 引入的上报方法
                          source:'./reportService', // 方法地址
                          isDefault:true // 是否为默认引入
                          },
                        functionCatch:false, // 为方法自动添加try-catch 默认为false
                        functionDirs:['/src/'], // 方法捕获目录
                        promiseCatch:true, // 为promise.then 自动添加 try-catch 默认为true
                        promiseDirs:['/src/'], // promise 捕获目录
                        info:{ // 错误上报信息,默认全为true
                          fileName:true,
                          line:true
                          },
                        ignoreFiles:['reportService.js']
                  }]
                  ]
                },
              }
            ],
          }
        ]
  }

option

  • import:object Function information imported
    • name:string function name
    • source:string function path
    • isDefault:boolean
      • true : import report from 'xxx'
      • false: import {report} from 'xx'
  • reportFn:string Error handling method,it should be declared in the entry file.If option contains import, this will fail.
  • functionCatch:boolean default false
  • promiseCatch:boolean default true
  • info:object error info
    • fileName:boolean
    • line:boolean
  • ignoreFiles:Array<string> Ignored File Name
  • promiseDirs:Array<string> Promise capture directory
  • functionDirs:Array<string> Function capture directory

option

  • import:object 导入的方法信息
    • name:string 方法名
    • source:string 路径
    • isDefault:boolean
      • true : import report from 'xxx'
      • false: import {report} from 'xx'
  • reportFn:string 全局错误处理方法,需在入口文件声明,和import同时存在时此选项失效
  • functionCatch:boolean 为方法自动添加try-catch 默认为false
  • promiseCatch:boolean 为promise.then 自动添加 try-catch 默认为true
  • info:object // 上报信息
    • fileName:boolean 是否上报文件名
    • line:boolean 是否上报行号
  • ignoreFiles:Array<string> 忽略的文件名
  • promiseDirs:Array<string> promise捕获目录
  • functionDirs:Array<string> 方法捕获目录

Attention

  • promiseDirsand functionDirshave higher priority than functionCatch and promiseCatch. in another way,if dirs are empty,then no capture is made.And if dirs are passed in, the catch option is ignored.
  • ignoreFilestakes precedence over dirs. If a file exists in the specified directory and be declared as IgnoreFiles, no capture is performed.
  • There must be one between import and reportFn.It is recommended to declare reportFn in the entry file. Use import in special cases.
  • import priority is higher than reportFn. If they are passed in at the same time, then the capture method is named import.name.

注意

  • promiseDirsfunctionDirs 优先级高于functionCatch以及promiseCatch,换句话说,如果dirs为空,那么则不进行任何捕获,如果传入dirs,那么则忽略catch选项直接进行捕获
  • ignoreFiles的优先级高于dirs,如果一个文件即存在于指定目录又被声明为ignoreFiles,那么不进行捕获。
  • importreportFn必须传入一个,推荐在入口文件声明reportFn,特殊情况下使用import
  • import优先级高于reportFn,如果同时传入,那么捕获方法名为import.name

import

  • eg.
import:{
  name:'report', 
  source:'reportService', 
  isDefault:false 
}

inject statement:

import { report } from 'reportService'
  • eg.
import:{
  name:'report', 
  source:'reportService', 
  isDefault:true 
}

inject statement:

import report from 'reportService'

error handler

report(err,['example.js', 120])