从源码分析sentry的错误信息收集

function installGlobalHandler() {
  if (_onErrorHandlerInstalled) { // 一个起到标志作用的全局变量
    return;
  }
  _oldOnerrorHandler = _window.onerror; 
  // _oldOnerrorHandler 是防止对用户其他地方定义的回调函数进行覆盖
  // 该 _window 经过兼容，实际上就是 window
  _window.onerror = traceKitWindowOnError;
  _onErrorHandlerInstalled = true;
}

function traceKitWindowOnError(msg, url, lineNo, colNo, ex) {
	
	var exception = utils.isErrorEvent(ex) ? ex.error : ex;
	//...
    stack = TraceKit.computeStackTrace(exception);
    notifyHandlers(stack, true);
    //...
   
    //...
    if (_oldOnerrorHandler) {
       return _oldOnerrorHandler.apply(this, arguments);
    }
    return false;
}

function subscribe(handler) {
    installGlobalHandler();
    handlers.push(handler);
}

 _handleOnErrorStackInfo: function(stackInfo, options) {
    options.mechanism = options.mechanism || {
      type: 'onerror',
      handled: false
    };
    // mechanism 和错误统计来源有关

    if (!this._ignoreOnError) {
      this._handleStackInfo(stackInfo, options);
    }
},

_handleStackInfo: function(stackInfo, options) {
    var frames = this._prepareFrames(stackInfo, options);

    this._triggerEvent('handle', {
      stackInfo: stackInfo,
      options: options
    });

    this._processException(
      stackInfo.name,
      stackInfo.message,
      stackInfo.url,
      stackInfo.lineno,
      frames,
      options
    );
},

_processException: function(type, message, fileurl, lineno, frames, options) {
    // 首先根据 message 信息判断是否是需要忽略的错误类型
    // 然后判断出错的文件是否在黑名单中或者白名单中
    // 接下来对错误内容进行必要的整合与转换，构造出 data 对象
    // 最后调用上报函数
    this._send(data);
}

_send: function(data) {
	
	// 对 data 进一步处理，增加必要的信息，包括后续会提到的面包屑信息

	// 交由 _sendProcessedPayload 进行进一步处理
	this._sendProcessedPayload(data);
}

_sendProcessedPayload: function(data, callback) {

	// 对 data 增加一些必要的元信息
	// 可以通过自定义 globalOptions.transport 的方式来自定义上报函数 
	(globalOptions.transport || this._makeRequest).call(this, {
	     url: url,
	     auth: auth,
	     data: data,
	     options: globalOptions,
	     onSuccess: function success() {
	       
	     },
	     onError: function failure(error) {
	       
	     }
	});
}    

// 真正发起请求的函数
_makeRequest: function(opts) {
	// 对于支持 fetch 的浏览器，直接使用 fetch 的方式发送 POST 请求
	// 如果浏览器不支持 fetch，则使用 XHR 的传统方式发送 POST 请求
}

{
  "project": "2",
  "logger": "javascript",
  "platform": "javascript",
  "request": {
    "headers": {
      "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"
    },
    "url": "http://localhost:63342/sentry-test1/test1.html?_ijt=j54dmgn136gom08n8v8v9fdddu"
  },
  "exception": {
    "values": [
      {
        "type": "TypeError",
        "value": "Cannot read property 'b' of undefined",
        "stacktrace": {
          "frames": [
            {
              "filename": "http://localhost:63342/sentry-test1/test1.html?_ijt=j54dmgn136gom08n8v8v9fdddu",
              "lineno": 19,
              "colno": 19,
              "function": "?",
              "in_app": true
            }
          ]
        }
      }
    ],
    "mechanism": {
      "type": "generic",
      "handled": true
    }
  },
  "transaction": "http://localhost:63342/sentry-test1/test1.html?_ijt=j54dmgn136gom08n8v8v9fdddu",
  "extra": {
    "session:duration": 6
  },
  "breadcrumbs": {
    "values": [
      {
        "timestamp": 1534257309.996,
        "message": "_prepareFrames stackInfo: [object Object]",
        "level": "log",
        "category": "console"
      },
      // ...
   ]
  },
  "event_id": "ea0334adaf9d43b78e72da2b10e084a9",
  "trimHeadFrames": 0
}

function formatComponentName(vm) {
  if (vm.$root === vm) {
    return 'root instance';
  }
  var name = vm._isVue ? vm.$options.name || vm.$options._componentTag : vm.name;
  return (
    (name ? 'component <' + name + '>' : 'anonymous component') +
    (vm._isVue && vm.$options.__file ? ' at ' + vm.$options.__file : '')
  );
}

function vuePlugin(Raven, Vue) {
  Vue = Vue || window.Vue;

  // quit if Vue isn't on the page
  if (!Vue || !Vue.config) return;

  var _oldOnError = Vue.config.errorHandler;
  Vue.config.errorHandler = function VueErrorHandler(error, vm, info) {
    var metaData = {};

    // vm and lifecycleHook are not always available
    if (Object.prototype.toString.call(vm) === '[object Object]') {
      metaData.componentName = formatComponentName(vm);
      metaData.propsData = vm.$options.propsData;
    }

    if (typeof info !== 'undefined') {
      metaData.lifecycleHook = info;
    }

    Raven.captureException(error, {
      extra: metaData
    });

    if (typeof _oldOnError === 'function') {
      _oldOnError.call(this, error, vm, info);
    }
  };
}

module.exports = vuePlugin;