HRMOSにおけるAngularのエラーハンドリングについて

Angularアプリの簡単・強力なエラーハンドリングの仕組みを紹介します

Transcript

1. HRMOSにおける Angularの エラーハンドリング について Classi Angular Night#3 株式会社ビズリーチHRMOS事業部　プ ロダクト開発 杉原碧志
2. 自己紹介 杉原碧志(@deepblue_will) HRMOSフロントエンドエンジニア 外部のイベントLTするのは2年ぶり
3. 今日お話すること HRMOSで取り入れている いい感じにエラーハンドリングされる 仕組みを紹介します。
4. 今日のポイント - Custom Error Class - Interceptor - ErrorHandler
5. Custom Error Class
6. Custom Error Class Errorをextendしたクラス - JSのErrorを区別できる - Errorに持たせる情報を増やすことができる
7. export class ApplicationError extends Error { constructor(message: string) { super(message); // instanceofを使えるようにする Object.setPrototypeOf(this, ApplicationError.prototype); } }
8. // Usage const sampleFn = (type: 'A' | 'B') => { switch (type) { case 'A': // anything break; case 'B': // anything break; default: throw new ApplicationError('Unsupported Type'); } };
9. export class RequestError extends Error { constructor(private errorResponse: HttpErrorResponse, message: string) { super(message); // instanceofを使えるようにする Object.setPrototypeOf(this, RequestError.prototype); } get statusCode(): number { return this.errorResponse.status; } }
10. // Usage this.httpClient.get('/test') .pipe( catchError( (e: HttpErrorResponse) => throwError(new RequestError(e, getMessage(e)) )
11. Interceptor
12. Interceptor HttpClientに処理を挟める API HttpClient Interceptor
13. Interceptor HTTPリクエストに失敗したときにRequestErrorをThrow する - 後述のErrorHandlerでエラーをハンドリングできる - 個別のエラーハンドリングもできる - ここだけ404が起きたらエラーをださずにリダイ レクトさせたい。 - ここだけエラーメッセージの出し方を変えたい。
14. export class HandleErrorInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next .handle(req) .pipe( catchError( (e: HttpErrorResponse) => throwError(new RequestError(e, getErrorMessage(e)))) ); } }
15. export function provideHttpInterceptors() { return [{ provide: HTTP_INTERCEPTORS, useClass: HandleErrorInterceptor, multi: true }]; } @NgModule({ providers: [ provideHttpInterceptors(), ], }) export class MyModule {}
16. Error Handler
17. ErrorHandler Angularが用意しているErrorハンドリングのた めの機構。 catchされなかったすべてのエラーが到達する。
18. @Injectable({ providedIn: 'root' }) export class MyErrorHandler implements ErrorHandler { handleError(e: any) { if (e instanceof RequestError) { // エラー用のトーストを表示 this.showErrorToast(e.message); } else if (e instanceof ApplicationError) { // Sentryにエラー内容を送信 Sentry.captureException(e); } else { this.showErrorToast('想定外のエラーが発生しました。'); Sentry.captureException(e); } } }
19. @NgModule({ providers: [{provide: ErrorHandler, useClass: MyErrorHandler}] }) class MyModule {}
20. まとめ
21. まとめ - JSのErrorとは別の独自のErrorクラスを作ろ う - Interceptorを使って↑のErrorをThrowしよう - ErrorHandlerを実装して自分好みにError ハンドリングしよう
22. BizReachでは フロントエンドエンジニア 大募集中です！
23. ご清聴 ありがとう ございました
24. ご清聴 ありがとう ございました
25. ご清聴 ありがとう ございました
26. おまけ (Error Handlerで ハマったことを 紹介)
27. handleError(e: any) { if (e instanceof RequestError) { // リクエストエラーが起こってるのにここを通らない this.showErrorToast(e.message); } } // ↓ handleError(e: any) { if (e.rejection instanceof RequestError) { // rejectionにErrorが入ってることがある this.showErrorToast(e.message); } }
28. handleError(e: any) { if (e instanceof RequestError) { // トーストが表示されない this.showErrorToast(e.message); } } // ↓ handleError(e: any) { if (e.rejection instanceof RequestError) { // NgZoneをDIして変更通知してあげる this.ngZone.run(() => this.showErrorToast(e.message)) } }
29. handleError(e: any) { if (e instanceof RequestError) { // hogeServiceがDIできてない this.hogeService.hoge(); } } // ↓ handleError(e: any) { if (e.rejection instanceof RequestError) { // Injectorでgetする const hogeService = this.injector.get(HogeService); hogeService.hoge(); } }