😓ngrx를 이용하여 에러난 파일처리

🪜 문제상황

지난 프로젝트 유지보수 진행중  전송되지 않는 파일이 존재하여, 응시완료가 되지 않는 경우가 발생하였다. 그리하여 ngrx를 활용하여 에러난 파일을 store담아서 처리 해보기로 하였다. 문제상황 및 해결 방식은 아래와 같다.

문제 상황

위처럼 "3번"에서 에러가 날 경우 멈추는 것이 아닌 Store에 담는다.

 

👨‍💼 500 에러 날 경우 Store에 담기

🦧 1번 상황에서 에러가 발생할려면 actions에 addFileAction를 등록한다.

//file.actions.ts
import { createAction, props } from '@ngrx/store';
import { File } from './file'; // File 모델을 만들어야 한다.

export const addFileAction = createAction(
    ActionTypes.ADD_FILE,
    props<{ file: File}>()
)

🎍1번 상황에서 해당 컴퍼넌트에서 파일을 addFileAction를 호출한다.

 // 사용되는 컴퍼넌트
import { Store } from '@ngrx/store'; //1.Store Import
import { addFileAction } from '../store/reducers/file/file.actions' //2.등록된 actions import
import { File } from '../store/reducers/file/file'; //3.File 모델 선언

export class RxjsComponent implements OnInit {
    
    constructor(private store: Store) {
    }
    errorPush(){
		const fileItem:File ={
          id:0, //고유ID
          file:this.formData, //파일
          progressBar:0, // % 표시를 위해 사용
          loaded:0, // loaded 완료
          total:0 // total
        }
        this.store.dispatch(addFileAction({file:fileItem}))
    }
}

 

😬2번 상황에서 Reducer를 통해 3번 Store에 담는다.

import { createReducer, on } from '@ngrx/store';
import { FileState } from './file.state';
import * as FileActionsTypes from './file.actions'; // 1.actions에 선언된 것을 import

//2.초기 상태 세팅
export const initialState:FileState = {
    fileList: []
}

export const fileReducer = createReducer(
	initialState, //
     on(FileActionsTypes.addFileAction,(state,{ file }) =>{
     	
		//기준 문항에 , 새로운 file 추가
        return [...state.fileList,file];
     })
)

 

🐯 에러난 파일 리스트 하여 파일전송 API를 통해 재전송 하기

인제는 Store에 담은 파일을 리스트화 하여 비동기로 파일을 재전송 시켜보자.

파일 재전송

🙉 Store의 파일을 리스트화 하기

현재 store(this.store.select(getFileList))의 데이터를 가져와서 fileList에 담아준다.

/* 해당 컴퍼넌트 typescript */
//파일 ngrx
import { Store } from '@ngrx/store';
import { getFileList } from '../store/reducers/file/file.selectors';


export class RxjsComponent implements OnInit {
   public fileList$ = this.store.select(getFileList); // Store 데이터 selectors
   public fileList: File[];
   ngOnInit() {
   	this.fileList$.subscribe(
      (result)=>{
        this.fileList = _.cloneDeep(result); // this.fileList$의 property직접적인 접근은 불가능 하므로 새로운 객체로 복사
      },
      (err)=>{
        console.error('err : ',err);
      },
      ()=>{
        console.log('complete');
      }
    )
   }
}

다음으로 html에 화면에 보여준다.

<div *ngFor="let item of fileList">
        <div class="progress">
            <div class="progress-bar progress-bar-striped" [style.width]="item.progressBar+'%'" role="progressbar"
                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h1 *ngIf="item.progressBar !== 100">{{ item.progressBar }}%</h1>
        <h1 *ngIf="item.progressBar === 100 && (!item.isFinsh && (!item.isError))">서버에 전송중</h1>
        <h1 *ngIf="item.progressBar === 100 && (item.isFinsh)">전송완료</h1>
        <h1 *ngIf="(item.progressBar === 100 && (item.isError)) || (item.progressBar !== 100 && (item.isError))">전송실패</h1>
  </div>

총 4가지의 경우에 따라 전송 상태를 보여준다

1. *ngIf="item.progressBar !== 100" 같은 경우는 현재 100%가 안되는 경우 즉 전송중인 경우
2. *ngIf="item.progressBar === 100 && (!item.isFinsh && (!item.isError))" 는 100%이면서 서버에서 답장을 받지 못한경우
3. *ngIf="item.progressBar === 100 && (item.isFinsh)" 는 100%이면서 서버에서 전송이 완료된경우
4. *(item.progressBar === 100 && (item.isError)) || (item.progressBar !== 100 && (item.isError))" 는 서버에 전송을 실패하였거나, 업로드에 실패한 경우

 

😎파일 재전송 하기

angular의 http옵션에는 파일업로드 상태를 확인할 수 있도록 옵션을 넣을 수 있다.reportProgress:true,observe:'events'

를 통해 파일 업로드 관찰 할 수 있다.

// fileuploadService.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';


export class FileuploadService {
	constructor(private http: HttpClient) { 
    
    }
	fileUplaod(fb:any){
        return this.http.post<any>(`${environment.apiUrl}/board/fileupload`,fb,{
          reportProgress:true,
          observe:'events'
        });
    }
}

그리고 해당 컴퍼넌트에서 "fileUplaod"를 호출한다. 미리 담아놓은 fileList의 반복을 돌려서 각 file을 api를 호출하여 비동기로 처리한다.

 submit(){
 	this.fileList.forEach((fileItem)=>{
      const formData= new FormData();
      formData.append('id',   fileItem.id as any) ;
      formData.append('file' , fileItem.file.get('file'));
      this.fileuploadService.fileUplaod(formData)
      .pipe(
        timeout(2000),
      )
      .subscribe(
        (event: (HttpEvent<any>))=>{
          switch (event.type) {
            case HttpEventType.Sent:
              console.log('Request has been made!');
              break;
            case HttpEventType.ResponseHeader:
              console.log('Response header has been received!');
              break;
            case HttpEventType.UploadProgress:
              //업로드 상태를 관찰하여 현재 업로드를 계산한다.
              fileItem.progressBar = Math.round((event.loaded / event.total) * 100);
              break;
            case HttpEventType.Response:
              console.log('User successfully created!', event.body);
              setTimeout(() => {
                // 비동기로 처리된 파일들의 개수를 파악하기 위해 finshCount++
                this.finshCount++;
                // 단일 파일의 전송상태 성공을 확인하기 위해 isFinsh = true처리
                fileItem.isFinsh = true;
              }, 2000);
              break;
            default:
              break;
          }
        },
        (err)=>{
          console.error(`${fileItem.id} : file upload error `, err);
          setTimeout(() => {
            // 비동기로 처리된 파일들의 개수를 파악하기 위해 errorCount++
            this.errorCount++;
            // 단일 파일의 전송상태 에러를 확인하기 위해 isError = true처리
            fileItem.isError = true;
          }, 2000);
          
        },
        ()=>{
          console.log(`${fileItem.id} : finally`);
          // 최종적으로 에러count + 성공count가 전체 파일 개수와 같으면 전체 전송 완료
          if(this.fileList.length === (this.finshCount + this.errorCount)){
            this.isFinsh = true;
          }
        }
      )
    })
 }

여기서 "case HttpEventType.UploadProgress:"의 부분을 통해서 현재 진행상태를 체크한다는 것이다.

현재 전송상태 = Math.round((event.loaded / event.total) * 100); 이다. 

 

 

🦧 최종 화면 확인

🚓전송전

전송전

🎍전송중

전송중

👌전송완료

전송완료

 

🏣후기

개인적으로 rxjs의 effects부분을 활용하지 못하였다. 이유는 effects에서 store의 데이터를 배열로 가져와서 effects에서 rxjs를 활용하여 api 호출하는 부분을 해결하지 못하였다.

그리하여 보완할 점은 ngrx의 effects부분을 활용하여 파일전송을 하는 것이다.