li-xianfeng/jserrormonitor

页面javascript错误监控系统

JSErrorMonitor

页面javascript错误监控系统：http://status.flybyte.cn。登录用户名admin，密码admin。

使用

在页面中引用JSErrorCollector，并将错误上报的API地址修改为JSErrorMonitor-server的后台服务的地址，这样在页面报错时会将错误信息上传给错误监控系统JSErrorMonitor。
本地开发调试需要后台API支持，请部署JSErrorMonitor-server或者自己实现，API代理转发配置在cfg/base.js中

用户界面：

• 首页：
• 列表页：
• 详情页：
• 图表页：

安装

1. 通过npm install安装所有依赖
2. 项目本地开发调试依赖于webpack和yeoman所以需要先全局安装二者
3. 项目是基于generator-react-webpack生成的，更多用法请参考generator-react-webpack

命令

• npm start：在本地http://localhost:8000/webpack-dev-server/启动项目
• npm run dist：在项目的dist目录生成用于部署生产环境的文件
• npm run deploy：将dist目录下的文件部署到生产环境（需配置cfg/secrets.js文件）

应用的框架和库

• 项目底层是基于react、redux和react-redux搭建
  • react-redux：通过connect和<Provider>将react和redux两者进行集成
  • react的文档：中文、English
  • flux应用架构：中文、English
  • redux的文档：中文、English
  • redux的教程：redux核心概念、React+Redux系列教程、深入理解React、Redux
• 项目UI应用了react-boostrap
  • react-bootstrap文档：English
• 路由应用了react-router、react-router-redux和react-router-bootstrap
  • react-router-bootstrap：通过<LinkContainer>将react-router与react-bootstrap两者进行集成
  • react-router-redux：通过routeReducer和routeMiddleWare将react-router与react-redux两者进行集成
  • react-router文档：中文、English
• 图表应用了Highcharts
  • Highcharts文档：中文、English
• 数组、对象操作应用了lodash
  • lodash的文档：中文(比较旧，不推荐)、English
• 日期对象操作应用了momentjs
  • momentjs的文档：中文、English
• 其他库：
  • nprogress：页面顶部加载进度条
  • react-highcharts：将react和Highcharts两者进行集成

src目录结构

actions：redux的actions目录
components：react的组件目录
config：开发配置目录
constants：常量目录
favicon.ico
images：图片目录
index.html：页面
index.js：页面的入口js
reducers：redux的reducers目录
stores：redux的store目录
styles：redux的样式目录
utils：js工具方法目录

ES6与JSX harmony语法

项目默认开启ES6与JSX harmony语法支持

• ES6教程：深入浅出ES6
• 模块化：支持import语法，项目的node_modules目录会作为模块根目录

新建react组件

运行yo react-webapck:component path/to/name，会生成

• src/components/path/to/NameComponent.js
• src/styles/path/to/name.scss
• test/components/NameComponentTest.js

redux开发：

1. 在src/constants/actionType.js新增action type
2. 在src/actions目录下新增action，并通过src/actions/index.js暴露出来
3. 在src/reducers目录下新增reducer，并通过src/reducers/index.js暴露出来
4. 在src/stores/configureStore.js配置新增的reducer和store的state映射关系
5. 在react组件中通过connect和mapStateToProps方法映射store的state到组件的props
6. 在组件生命周期方法（比如componentDidUpdate、componentWillUpmount、componentDidUpdate等）中通过dispatch派发action
7. 通过action引起的对象属性更新，会经过reducer映射到store的state中，再经过connect和mapStateToProps引发组件的props更新，从而更新视图