2017-05-15 4 views
4

私はC#で書かれたMVC 5バックエンドを持っています。これは、Razorで書かれたMVCビューといくつかのAngular 2ページを提供します。MVCエラーを角2で解釈するためのベストプラクティス

クライアントからサーバーを呼び出す際の潜在的なエラーを処理する最善の方法は何ですか?私は本当に頑丈で、あらゆる場面で使えるパターンを確立したいと思っています。以下は私がこれまでに試したことです。

バックエンドのC#コード:

public class MyController : Controller 
{ 
    [HttpGet] 
    public ActionResult GetUsers() 
    { 
     try 
     { 
      // Lot of fancy server code ... 

      throw new Exception("Dummy error"); 

      return GetCompressedResult(json); 

     } 
     catch (Exception ex) 
     { 
      throw new HttpException(501, ex.Message); 
     } 
    } 

    private FileContentResult GetCompressedResult(string json) 
    { 
     // Transform to byte array 
     var bytes = Encoding.UTF8.GetBytes(json); 

     // Compress array 
     var compressedBytes = bytes.Compress(); 
     HttpContext.Response.AppendHeader("Content-encoding", "gzip"); 
     return new FileContentResult(compressedBytes, "application/json"); 
    } 
} 

クライアント側アンギュラ2コード:

Error object

:これはhandleErrorの方法で処理エラーオブジェクトのPrintScreenをある

public loadDataFromServer() { 
    let response = this.http.get(this.urlGetData) 
     .map((res: Response) => res.json()) 
     .catch(this.handleError); 

    response.subscribe(response => { 
     // Process valid result ... 
    }, 
     err => { console.error(err); } 
    ); 
}; 

private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = JSON.parse(JSON.stringify(error || null)) 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 

これはすべての質問を提起する:

  1. サーバーからカスタムHttpExceptionをスローするのは正しいですか?
  2. handleErrorメソッドが正しいか、それとも複雑すぎるのでしょうか?
  3. クライアント側では、カスタムエラーメッセージを表示したいと思いますが、現在のところ、HTMLの膨大な "BLOB"にしか見つかりません。このBLOBは解析するのが面倒です。
  4. クライアント側のエラー処理が必要ですか?
+0

あなたは 'ERROR'は' Response'オブジェクトがある場合の対処しようとしていますか?これは同時に非常に不明瞭で過度のものです.-D ... – n00dl3

+0

@ n00dl3 handleErrorメソッドはWebから取得します。デバッグするとき、私は実際にはエラーがタイプResponseであることがわかります。あなたはそれが別のものでなければならないと提案しますか?私は調査のために現在のエラーで上記のプリントアウトを追加しました。提案された改善についてアドバイスをお願いします。 –

答えて

1

私の現在の提案は、処理されたすべての例外に対してサーバーがJsonオブジェクトで応答できるようにすることです。

クライアントサイドでは、有効な結果を処理する前にエラープロパティの可能性があるかどうかチェックします。

handleResponseErrorメソッドは、型付きレスポンスオブジェクトを解析し、観察可能なメッセージをスローします。しかし、少なくとも私のブラウザ(Chrome 57)は自動的に応答エラーをコンソールに記録するようです。したがって、加入者が異なるエラーに対して特定の余分な処理を必要としない場合、加入者はエラーオブジェクトに対して余分なアクションを必要としない。

より良い方法がある場合は、フィードバックをお寄せください。

バックエンドC#コード:

public class MyController : Controller 
{ 
    [HttpGet] 
    public ActionResult GetUsers() 
    { 
     try 
     { 
      // Lot of fancy server code ... 

      throw new ArgumentException("Dummy error"); 

      // Normal return of result ... 

     } 
     catch (Exception ex) 
     { 
      return Json(new { error = $"{ex.GetType().FullName}: '{ex.Message}'" }, JsonRequestBehavior.AllowGet); 
     } 
    } 
} 

クライアント側の角2コード:

public loadDataFromServer() { 
    let response = this.http.get(this.urlGetData) 
     .map((res: Response) => res.json()) 
     .catch(this.handleResponseError); 

    response.subscribe(result => { 
     if (result.error) { 
      this.displayJsonError(this.urlGetUsers, result.error); 
     } 
     else { 
      // Process valid result 
     } 
    }); 
}; 



private handleResponseError(value: Response | any) { 
    let errorMessage = value.toString(); 
    let response = value as Response; 
    if (response) { 
     errorMessage = `${response.status}: ${response.statusText}\n${response.toString()}`; 
    } 
    if (value.error) { 
     errorMessage = value.error; 
    } 
    if (value.message) { 
     errorMessage = value.message; 
    } 
    return Observable.throw(errorMessage); 
} 

private displayJsonError(url: string, error: string) { 
    console.error(`Call to '${url}' failed with ${error}`); 
} 
関連する問題