Amo Wu's Blog

我們團隊目前使用 Sentry 這個服務作 error tracking，JavaScript 或 React 的基本安裝方法在 官方文件 都可以找到，這裡就不贅述。 同時我們也有在使用 redux-observable 這個 RxJS middleware 來處理帶有副作用的 Redux action。 根據 redux-observable 這篇 Error Handling 文件的介紹，一般處理 async 錯誤的寫法大概會是： import { createAction } from 'redux-actions'; import { Observable } from 'rxjs/Observable'; const fetchUserEpic = action$ => action$.ofType(FETCH_USER) .mergeMap(action => Observable.fromPromise(fetch(`/api/users/${action.payload}`)) .map(response => createAction('FETCH_USER_FULFILLED')(response)) .catch(error => Observable.of(createAction('FETCH_USER_REJECTED')(error.message))) ); 但是因為這裡並非正規的錯誤拋出方式，導致 Sentry 無法攔截到。 所以根據 Sentry 的這篇 Rich Error Reports with Redux Middleware 文件介紹，我們需要另外為它寫一個 Redux middleware 來處理。 策略是利用 redux-actions 的 Flux Standard Action 特性，將錯誤用 JavaScript 的 Error object 封裝至 action payload： ... .catch(error => Observable.of(createAction('FETCH_USER_RE...

Code Coverage with CircleCI + Codecov 最近的案子用到 Redux + React ，因為它 Pure Function 的特性，所以 單元測試 很容易寫，順便也趁機會玩一下 程式碼覆蓋率 （Code Coverage）。 單元測試 Unit Test 這裡就不講單元測試怎麼寫了，網路上有很多大神的好文可以爬，我是用 Mocha + Chai ： mocha 是 test framework，提供 describe 、 it chai 是 assertion library，提供 assert 、 should 、 expect 安裝 Gulp ： npm install --save-dev gulp gulp-mocha 安裝 Babel 讓程式支援 ES6 語法： npm install --save-dev babel 加入 mocha 到 gulpfile.babel.js ： // gulpfile.babel.js import gulp from 'gulp'; import mocha from 'gulp-mocha'; gulp.task('mocha', () => { return gulp.src('test/**/*.js') .pipe(mocha()); }); 使用 npm test 取代 gulp mocha ： // package.json { "scripts": { "test": "gulp mocha" } } 這樣做的好處： gulp 可不用 -g 全域安裝 CI 會自動執行測試 程式碼覆蓋率 Code Coverage 有許多提供 code coverage review 的服務，例如： Code Climate 、 Codecov 、 Coveralls 。這裡選擇 Codecov ，因為它的 GitHub public repo 方案是免費的。 安裝 istanbul 產生 coverage report： npm insta...