目前前端使用webpack构建的很多， rollup也有一些， 这些是怎么做切面探测的？

[xingyuzhe]

目前前端使用webpack构建的很多， rollup也有一些， 这些是怎么做切面探测的？我看代码里没有关于这部分的处理

[caihuiji]

晚点支持。 我们研究一下

[caihuiji]

目前webpack 没有办法做到try-catch ，因为已经打包成一个文件了。
如果webpack 使用了 CommonsChunkPlugin 插件，在加载 common.js 后插入如下代码

//通过 spyCustom 重写 webpack 的 wepackJsonp ，详细可以看看生成common.js 源码里面的原理
BJ_REPORT.spyCustom(webpackJsonp)

rollup 也是同样的原理。目前只打包一个文件，没有办法重写。

但是你可以使用 #3 中的第一种方式开启 响应头增加 access-control-allow-orgin （以下简称AC）

[miniflycn]

写 plugin 吧，并不是没有办法

[q946401639]

话说现在支持webpack了吗

[loskael]

@q946401639
try catch 并不是必须的，建议在服务器端设置 CORS 支持捕获跨域的异常

[Marszed]

// VUE 中的处理方式
Vue.config.errorHandler = (err, vm, info) => {
  const {
    message, // 异常信息
    name, // 异常名称
    script,  // 异常脚本url
    line,  // 异常行号
    column,  // 异常列号
    stack,  // 异常堆栈信息
  } = err
  console.log('===========源错误信息==========')
  console.log('message', message)
  console.log('name', name)
  console.log('script', script) // undefined
  console.log('line', line) // undefinedi
  console.log('column', column) // undefined
  console.log('stack', typeof stack, stack)
  console.log('vm===>')
  console.log(vm)
  console.log('info===>')
  console.log(info)
  console.log('===========开始正则匹配定位具体错误信息==========')
  const analysisReg = /at\s+(.*)\s+\((.*):(\d*):(\d*)\)/i.exec(stack)
  console.log(analysisReg)
  console.log('解析出的源文件地址-script', analysisReg[0].match(/\((\S*)\)/)[1].split('?')[0])
  console.log('解析出的行-line', analysisReg[3])
  console.log('解析出的列-column', analysisReg[4])
}

// React 中的处理方式 16.x
class demo extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidCatch(error, info) {
  const {
    message, // 异常信息
    name, // 异常名称
    script,  // 异常脚本url
    line,  // 异常行号
    column,  // 异常列号
    stack,  // 异常堆栈信息
  } = err
  console.log('===========源错误信息==========')
  console.log('message', message)
  console.log('name', name)
  console.log('script', script) // undefined
  console.log('line', line) // undefinedi
  console.log('column', column) // undefined
  console.log('stack', typeof stack, stack)
  console.log('===========开始正则匹配定位具体错误信息==========')
  const analysisReg = /at\s+(.*)\s+\((.*):(\d*):(\d*)\)/i.exec(stack)
  console.log(analysisReg)
  console.log('解析出的源文件地址-script', analysisReg[0].match(/\((\S*)\)/)[1].split('?')[0])
  console.log('解析出的行-line', analysisReg[3])
  console.log('解析出的列-column', analysisReg[4])
  }
}

结合第三方库source-map(npm)+构建sourceMap+构建出的chunk js（不带凭据(credential)启用跨域加载）+badeJs手动上报（或者fork源代码做修改）即可还原源代码的错误行数列数信息