之前专栏写了前端监控系统的落地文章，但是其实看了跟没看一个卵用，主要是没有实际的落地具体教程，如果你想使用GER项目，还必须要安装ElasticSearch和ger-server这2个项目，那么我就从实战出发，分享一下，如果你要自己做一套这个系统，一步一步要怎样来。

一，安装java jdk

因为ElasticSearch依赖java jdk，首先下载对应系统的jdk：Java SE Development Kit 8

下载完毕后jdk-8u131-linux-x64.tar.gz解压缩到/usr/java 目录，没有就创建一个。

$ tar -zxvf jdk-7u40-linux-i586.tar.gz
$ mv jdk-7u40-linux-i586 /usr/java
$ vim /etc/profile

在结尾输入：

JAVA_HOME=/usr/java
CLASSPATH=.:$JAVA_HOME/lib.tools.jar
PATH=$JAVA_HOME/bin:$PATH
export JAVA_HOME CLASSPATH PATH

最后再让配置文件生效，检查安装是否生效。

$ source /etc/profile
$ java -version

二，安装ElasticSearch

安装完毕java之后就可以安装ElasticSearch了，安装方法也十分简单，首先下载解压，GER-server依赖固定版本的ElasticSearch，大家下载2.3.1版本 Elasticsearch 2.3.1

下载完毕后开始配置安装：

$ curl -L -O https://download.elastic.co/elasticsearch/release/org/elasticsearch/distribution/tar/elasticsearch/2.3.1/elasticsearch-2.3.1.tar.gz
$ unzip elasticsearch-2.3.1.zip
$ cd  elasticsearch-2.3.1

安装完毕后启动ES，-d为后台运行：

$ ./bin/elasticsearch -d

安装完毕后并启动，需要做一个template，执行下面命令即可：

$ curl -XPUT 127.0.0.1:9200/_template/template_1 -d '{"template":"logstash-web_access*","mappings":{"logs":{"properties":{"@timestamp":{"type":"date"}}}}}'

三，安装GER-server

$ git clone https://github.com/gomeplusFED/GER-server.git
$ git submodule init && git submodule update
$ npm install -d && cd public/GER-UI/ && npm install -d

因为是前后端分离的项目所以需要到2个目录中都安装一遍项目依赖。

四，启动GER-server

$ cp config.default.js config.js
$ cp plugin/user.default.json plugin/user.json
$ npm start

先把项目的配置文件和用户权限文件拷贝一份，然后可以自己稍作修改，也可以不修改，直接使用默认的配置，具体配置可见default文件。

然后使用npm start启动项目，如果一切正常就没有问题了。

五，使用PM2启动GER-server项目

$ pm2 start "/usr/local/bin/npm" --name "GER" -- start

然后访问127.0.0.1:8888 即可访问项目了。

六，安装GER收集前端错误

六.1 源码方式安装最新的代码，也可以做扩展和pr：

$ git clone https://github.com/gomeplusFED/GER.git
$ cd GER && npm install -d && npm run build
$ ls dist
$ ger.js  ger.min.js

dist目录下即为ger的压缩和未压缩版，也可以自己修改lib目录中的文件然后重新build，载入方式参见：gomeplusFED/GER

这里需要注意的是，如果你的项目需要兼容ie78，则需要引入babel的polyfill，如果是移动项目或者不兼容ie7，8的则不需要：

<!--[if IE]>
<script type="text/javascript" src="http://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.js"></script>
<![endif]-->

然后加载方式因为是使用rollup的umd方式，支持cmd，amd，es还有iife方式的，可以根据需要自行引入页面。

然后根据文档初始化配置，编写初始化函数，可以参见六.2。

六.2 使用npm安装GER，webpack和rollup项目推荐：

如果你的项目基于webpack或者rollup这种模块化开发工具，那么安装更加简单，使用npm下载对应的安装包：

$ npm install gome-error-report

然后增加webpack配置：

{
  plugins:[
     new webpack.ProvidePlugin({
        GER:'gome-error-report'
     })
  ],
  resolve:{
     extensions: ['', '.js', '.json'],
     alias:{
       'gome-error-report':'gome-error-report/dist/ger.js'
     }
  }
}

这样你就可以在你的webpack系统中使用GER这个全局变量了，然后新建一个初始化模块：

var gomeGER = new GER({
    url: 'http://127.0.0.1:8888/report/add',
    proxyJquery: true,
    proxyTimer: true
});

这里注意url参数，如果你使用的是GER-server，则上报接口为report/add，你也可以参考GER-server的对应report/add的controller来使用其他语言操作ES，写入日志。

七，其他额外配置

在开始使用之前，如果你的项目js的存放地址和程序主域不一致，则需要再增加2个修改。

修改一：

举例：

应用程序为http://www.abc.com

js存放地址为http://www.jscdn.com

那么你需要在http://www.abc.com的js引入部分，也就是script标签上增加一个 `crossorigin`属性，具体作用参见：CORS settings attributes

修改二：

增加了crossorigin属性后，必须对应的服务增加cors的头，http://www.jscdn.com的nginx中可以这样配置：

location /{
  add_header 'Access-Control-Allow-Origin' 'http://abc.com';
  add_header 'Access-Control-Allow-Credentials' 'true';
  add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
  add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
}

当然origin也可以配置成 "*"，允许所有跨域的请求。

增加cors的头的方法有很多，这里就不一一解释了。

总结

通过以上的几步，就可以完成一套自己的前端错误监控体系的搭建了，如果在操作中遇到问题，欢迎留言和去GER或者GER-server中提pr或者issues。

最后给大家看下项目最终的系统截图：

基本上的功能截图就在这里，这是我们内网部署的一些界面截图。

----------我是分割线---------

最后，帮公司视频部门招聘中高级前端开发工程师：

1、熟悉javascript、html、css，开发符合需求的前端模块，并兼容多浏览器；
2、熟悉jQuery等开发框架，深入过代码细节优先；
3、熟悉ajax、json，了解至少一种后台语言，能有与后端工程师配合；
4、保持高效的前端性能；
5、能够自我驱动，具备强烈的进取心、求知欲及团队合作精神，有较强的沟通及协调能力；
6、具备较好的技术文档撰写能力；
7、熟悉多种前端工程构建工具者优先。

基本要求：
2年以上前端领域开发经验
深入掌握HTML+CSS+JavaScript等前端技术，代码符合W3C标准、兼容主流浏览器
熟练使至少一种JS框架，掌握其原理
掌握至少一种其他语言（如Java/PHP/Python/Ruby），有实战经验

进阶要求：
注重细节的习惯，大胆假设，小心求证的态度
深入分析业务需求，承担复杂的任务，高质量的产出

优先条件：
熟悉Mobile Web/Hybrid Web App等开发
利用开源代码打造自有效率工具的经验
熟悉Linux/Unix/Mac平台下的软件开发环境
Nodejs下项目开发经验

提供工作岗位是我一直以来坚持的……恩，咳咳，最后如果想了解更多好玩的开源项目知识，也可以参与周六我的一场关于前端开源项目的live：知乎 Live - 全新的实时问答

以上，多谢！

ITPub博客

ElasticSearch和Gome-error-report的安装教程