JSErrorMonitor
v1.0.1
Published
页面javascript错误监控系统:http://status.flybyte.cn。
Downloads
1
Readme
JSErrorMonitor
页面javascript错误监控系统:http://status.flybyte.cn。登录用户名admin
,密码admin
。
使用
在页面中引用JSErrorCollector,并将错误上报的API地址修改为JSErrorMonitor-server的后台服务的地址,这样在页面报错时会将错误信息上传给错误监控系统JSErrorMonitor。
本地开发调试需要后台API支持,请部署JSErrorMonitor-server或者自己实现,API代理转发配置在cfg/base.js中
用户界面:
- 首页:
- 列表页:
- 详情页:
- 图表页:
安装
- 通过
npm install
安装所有依赖 - 项目本地开发调试依赖于
webpack
和yeoman
所以需要先全局安装二者 - 项目是基于
generator-react-webpack
生成的,更多用法请参考generator-react-webpack
命令
npm start
:在本地http://localhost:8000/webpack-dev-server/启动项目
应用的框架和库
- 项目底层是基于react、redux和react-redux搭建
- react-redux:通过
connect
和<Provider>
将react
和redux
两者进行集成 - react的文档:中文、English
- flux应用架构:中文、English
- redux的文档:中文、English
- redux的教程:redux核心概念、React+Redux系列教程、深入理解React、Redux
- react-redux:通过
- 项目UI应用了react-boostrap
- react-bootstrap文档:English
- 路由应用了react-router、react-router-redux和react-router-bootstrap
- 图表应用了Highcharts
- 数组、对象操作应用了lodash
- lodash的文档:中文(比较旧,不推荐)、English
- 日期对象操作应用了momentjs
- 其他库:
- nprogress:页面顶部加载进度条
- react-highcharts:将
react
和Highcharts
两者进行集成
src目录结构
actions
:redux的actions目录components
:react的组件目录config
:开发配置目录constants
:常量目录favicon.ico
images
:图片目录index.html
:页面index.js
:页面的入口jsreducers
: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开发:
- 在
src/constants/actionType.js
新增action type - 在
src/actions
目录下新增action,并通过src/actions/index.js
暴露出来 - 在
src/reducers
目录下新增reducer,并通过src/reducers/index.js
暴露出来 - 在
src/stores/configureStore.js
配置新增的reducer和store的state映射关系 - 在react组件中通过
connect
和mapStateToProps
方法映射store的state到组件的props - 在组件生命周期方法(比如
componentDidUpdate
、componentWillUpmount
、componentDidUpdate
等)中通过dispatch
派发action - 通过action引起的对象属性更新,会经过reducer映射到store的state中,再经过
connect
和mapStateToProps
引发组件的props更新,从而更新视图