一、功能点
- 日志回调
- 环境区分
- 错误捕获及上报
- 日志信息获取及手动上报功能
二、功能点详解
1、日志回调
在用户对console.log进行修改时，以执行队列的形式对用户所修改的函数进行存储，并在用户对console.log进行调用时，执行原输出函数的同时，执行该执行队列。
2、环境区分
- 当判断当前执行环境为开发环境时，仅进行错误显示、信息输出，而不进行错误上报。
- 当判断当前执行环境为测试环境时，进行错误显示、信息输出、错误上报。
- 当判断执行环境为生产环境时，仅进行错误上报。
三、技术要点分析
1、使用Object.definedProperty对window.console.log进行重写
首先，为了将用户调用console.log的输出内容进行存储，以便再发生错误时进行上报，就需要对该函数进行重写，或代理，劫持。而实现这一目的的方法有三个，第一，直接使用函数对其进行改写。第二，使用proxy进行代理，第三，使用Object.definedProperty。
1)直接改写方法
console.log = function(){
// ...实现功能
}
这样做的优点是简单，直接上来就用一个函数覆盖原本的，如果需要在改写的方法中使用原来的功能，则需要在改写前对原函数进行存储，再在改写的函数中使用存下来的那个方法，这样就可以实现对原来功能的使用。
而缺点也很明显，如果用户在使用的过程中，再一次对console.log进行改写，去实现他们自己定义的功能，那么这个工具的功能将在用户改写后无法再使用，除非用户像刚刚那样，事先对你的这个工具也进行一个存储。另外，这也无法满足我们“在实现本sdk功能的基础上对用户改写的函数进行存储并执行”的需求。所以放弃这个方法。
2）使用proxy
proxy是ES6的一个功能，顾名思义，它用于实现对对象的代理。vue.js框架也放弃了原本使用Object.definedProperty实现双向数据绑定的方式，改用proxy。相对于第一种方法，它是在用户对对象属性进行调用或改写的时候触发所定义的getter setter以进行代理，这样可以在用户使用console.log时调用我们自定义的方法，并在用户对console.log进行改写时进行拦截，并进行处理。可以实现我们的所有需求。
而缺点则是兼容性较差，在低版本的IE浏览器可能无法使用。
3）Object.definedProperty
其实对于本项目来说，proxy和Object.definedProperty都是可以满足需求的，甚至proxy相对来说性能、功能各个部分表现均优于Object.definedProperty。而选用Object.definedProperty则是为了满足对低版本浏览器的兼容需求。
2、环境区分
首先，因为我们的项目部分使用了前后端分离的开发模式，所有的前端资源均存储在特定的服务器，后端仅需指定html文件，在这个获取到的文件中包含了请求所需打包前端资源的请求，这样就拿到本项目需要的前端资源。这是对于开发环境的限定是通过对url进行search拼接实现的，那么自然可以通过判断当前url确定当前的开发环境。但是，对于部分没有进行前后端分离的项目来说，这样的方法自然时行不通的。所以需要使用其他方法进行环境的区分。
在本项目中，使用了用户自定义环境的方法，在暴露的接口中包括了一个写入环境的接口，通过这个接口进行变量修改，并根据修改后的变量进行环境的确定，默认为开发环境。
3、错误捕获
对于前端的错误捕获，主要包括执行时错误、 资源获取错误、promise错误等等等等。
分享一篇文章如何优雅处理前端异常?
我就不多写了 -。-
4、错误上报
进行数据发送的方法有很多，原生的xhr、封装的axios、fetch等等，都是前端发送数据的常用方法，而作为一个sdk，轻量是第一要求，为了让sdk不那么重，我们放弃所有外部方法，而选用了form表单进行post，image进行get。另外，form发送的数据不是json，而是application/x-www-form-urlencoded，在后端进行数据获取时需要注意。
我们仅考虑数据上报而无需接受回应，且使用image进行get请求也无需考虑跨域问题。现网上相关信息很多，不再赘述，直接上代码
(new Image).src = '地址?数据1&数据2'
对于大量的数据，get方法自然是无法满足的，get方法仅在用户手动上报时可能会使用，而日志信息的上报由于数据量的限制，所以我们使用form表单实现post发送。
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.name = 'postLog_iframe';
document.body.appendChild(iframe);
const form = document.createElement('form');
form.style.display = 'none';
form.method = 'post';
form.target = iframe.name;
form.action = api;
Object.keys(msg).forEach((key) => {
const log = document.createElement('input');
log.name = key;
log.value = JSON.stringify(msg[key]);
form.appendChild(log);
});
document.body.appendChild(form);
form.submit();
