前端错误信息定位问题总结

在真正的生产环境中，由于用户端的环境不可预知，所以会出现很多预料之外的情况，这里就需要前端小伙伴一方面考虑完善，另外一方面能够统计到用户端的异常错误情况（js报错信息）当然也包括用户端的信息都可以获取到。方便定位和复现问题。

前端一般会用到
https://sentry.io/welcome/
这个第三方sdk 进行统计，这个不是今天的主题； 今天想说的是js错误信息的详细收集

进入正题

window.onerror = function (msg, url, lineNo, columnNo, error) {
  var string = msg.toLowerCase()
  var substring = 'script error' // 这块下面会讲到
  if (string.indexOf(substring) == -1) {
    var message = [
      'Message: ' + msg,
      'URL: ' + url,
      'Line: ' + lineNo,
      'Column: ' + columnNo,
      'Error object: ' + JSON.stringify(error)
    ].join(' - ')
    console.log(message)
  }
  return false
}

这段代码基本上就已经很详细的统计到错误，前端工程师应该很熟悉了

Message: Uncaught ReferenceError: aaaa is not defined - URL: webpack-internal:///./src/tool/api.js - Line: 41 - Column: 13 - Error object: {}

这段js里面有一行代码 var substring = ‘script error’ ，这里为什么要判断这个呢？说到这块要引入跨域
第一种情况： 你的页面和你的js都在同一个域名下。

• 注意 www.a.com 和 sss.a.com 不是同一个域名

如果这样的话，详细的错误信息会收集到，
第二种情况：不在同一个域名下面，收集到错误 只有 script error 字符串，这块解决方法；
需要你在script 标签上加上 crossorigin=‘anonymous’

<script src="http://bbb.a.com/demo.js" crossorigin='anonymous' ></script>

这样就可以达到同样的目的了