使用 Sentry 监控浏览器异常

Sentry.configureScope(function (scope){
    var uid = getCookie('uid') || 0
    scope.setUser({ id: uid })
})

var ignoreRules = [
  'Blocked a frame with origin',
  'vivoNewsDetailPage.getNewsReadStatus4Vivo',
  'cefQuery is not defined'
]
function isMatchedIgnoreRules (value) {
  if (!value) return false
  for (var i = 0; i < ignoreRules.length; i++) {
    if (value.indexOf(ignoreRules[i]) > -1) return true
  }
  return false
}

beforeSend: function (event) {
  var values = event.exception.values
  var shouldIgnore = values.some(function (value) {
    return isMatchedIgnoreRules(value.value)
  })
  if (shouldIgnore) {
    return null
  }
  return event
}

<script>
  window.addEventListener('error', function (event) {
    console.log('error message: ', event.message)
    console.log('error source: ', event.filename)
    console.log('error lineno: ', event.lineno)
    console.log('error colno: ', event.colno)
    console.log('error stack:\n', event.error.stack)
  }, true)
</script>
<script>
  function foo() {
    var n = 1
    n.split('')
  }
  foo()
</script>

<script>
  window.onunhandledrejection = function (event) {
    var reason = event.reason
    console.log('error message: ', reason.message)
    console.log('error stack:\n', reason.stack)
  }
</script>
<script>
  function foo() {
    new Promise(function (resolve, reject) {
      reject(new Error('some error'))
    })
  }
  foo()
</script>

<div class="page container">
  <button id="btn">Trigger Click Event</button>
</div>
<script>
  var toString = Object.prototype.toString
  var btn = document.getElementById('btn')
  btn.addEventListener('click', function (event) {
    event.stopPropagation()
    console.log('button clicked')
  })
  window.addEventListener('click', function (event) {
    console.log('event type: ', event.type)
    var path = []
    event.path.forEach(function (elem) {
      var tag = ''
      if (elem.nodeType) {
        if (elem.nodeType === 1) {
          tag += elem.tagName.toLowerCase()
          if (elem.id) {
            tag += '#' + elem.id
          } else if (elem.className) {
            tag += '.' + elem.className.replace(/\s+/g, '.')
          }
        }
        if (elem.nodeType === 9) {
          tag += 'document'
        }
      } else if (toString.call(elem) === '[object Window]') {
        tag += 'window'
      }
      path.push(tag)
    })
    console.log('event path: ', path)
    console.log('event', event)
  }, true)
</script>

<script>
  var originalOpen = XMLHttpRequest.prototype.open
  var originalSend = XMLHttpRequest.prototype.send
  XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
    console.log('request method: ', method)
    console.log('request url: ', url)
    originalOpen.call(this, method, url, async, username, password)
  }
  XMLHttpRequest.prototype.send = function(data) {
    console.log(this)
    var _this = this
    var listener = function (event) {
      if (_this.readyState === 4) {
        console.log('response status', _this.status)
        console.log('response statusText', _this.statusText)
      }
      _this.removeEventListener('readystatechange', listener)
    }
    this.addEventListener('readystatechange', listener)
    originalSend.call(this, data)
  }
  var xhr = new XMLHttpRequest()
  xhr.open('get', '/')
  xhr.send(null)
</script>

<script>
    var LOG_MAX = 100
    var logs = []
    var originalLog = console.log
    window.console.log = function () {
      var args = Array.prototype.slice.call(arguments)
      var log = []
      args.forEach(function (arg) {
        if (typeof arg === 'undefined') {
          log.push('undefined')
        } else if (typeof arg === 'function') {
          log.push(arg.toString())
        } else {
          // Set, Map, ... need to be handled exceptionally
          log.push(JSON.stringify(arg))
        }
      })
      if (logs.length > LOG_MAX) {
        logs.shift()
      }
      logs.push(log)
      originalLog(JSON.stringify(logs))
    }
    console.log(1)
    console.log('hello world')
    console.log(function foo() {})
    console.log(null, undefined)
  </script>