Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
cfg
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

JSErrorMonitor

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

使用

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

用户界面:

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

安装

  1. 通过npm install安装所有依赖
  2. 项目本地开发调试依赖于webpackyeoman所以需要先全局安装二者
  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文件)

应用的框架和库

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配置新增的reducerstorestate映射关系
  5. 在react组件中通过connectmapStateToProps方法映射storestate到组件的props
  6. 在组件生命周期方法(比如componentDidUpdatecomponentWillUpmountcomponentDidUpdate等)中通过dispatch派发action
  7. 通过action引起的对象属性更新,会经过reducer映射到storestate中,再经过connectmapStateToProps引发组件的props更新,从而更新视图

About

页面javascript错误监控系统

Resources

Packages

No packages published