web-dev-qa-db-ja.com

Angularおよび.Net Core APIでのカスタムサーバー側エラーメッセージの表示

C＃で書かれたREST APIがいくつかあり、APIはAngularから呼び出されます（バージョンAngular 8を使用しています）。呼び出しは問題なく、機能していますただし、例外が発生した場合、カスタマイズされたエラーメッセージを角度付きで表示することはできません。たとえば、フィールドの値が文字列 "abc"と一致するかどうかを検証するC＃のサーバー側検証があるとします。一致しない、それはエラーをスローし、UI（Angularで開発）で、メッセージを表示したい

「無効な文字列が指定されました」。

私のサーバーサイドコードは以下の通りです-

if (headerValues.Equals("abc")) {
    throw new InvalidStringException("Invalid String specified", 999);
}

無効なInvalidStringExceptionクラスは次のとおりです-

public class InvalidStringException : System.Exception
{
    int status { get; set; }
    public InvalidStringException() { }
    public InvalidStringException(string message, int status) : base(message) {
        this.status = status;
     }
}

その例外がスローされ、サーバー側でキャッチされると、500例外として使用できますが、カスタムメッセージを印刷できませんでした。

Angular-

} catch (error) {
  console.log("Error Status: ", error.status);
  console.log("Error Status: ", error.message);
}

そのシナリオの処理方法を提案してください。

c#angularrest.net-core
4
java developer

例外をスローする必要がない場合は、ステータスコード400と BadRequest を使用してメッセージを返すことができます。

if (headerValues.Equals("abc")) {
    return BadRequest("Invalid String specified");
}
2
Wesley Santos

他の人々が述べたように、あなたはあなたのコードで例外をキャッチしてそれを適切なHTTPレスポンスに変換する必要があります。

その理由は、それ以外の場合、例外はASP.NET Coreによって 例外処理構成 を使用して処理されるためです。

開発者例外ページ付き

通常、開発中のコードは次のようになります。

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
}

環境がDevelopmentの場合は、処理されない例外の情報を確認するための特別なページが開発者に表示されます。この場合、onlyです。応答の本文に例外スタックトレースと例外メッセージが表示されます。

開発者例外ページなし

逆に、例外ページがオフになっている場合（通常Production環境ではオフ）、nothing応答本文内。

直し方

ASP.NET Coreでの例外処理は分野横断的な問題であるため、InvalidStringExceptionをHttpResponseに変換する必要があるすべての場所でtry...catchを使用しません。

代わりに an IActionFilterまたはUseExceptionHandlerを使用します。これは例外処理ミドルウェアです ：

Startup.csのUseExceptionHandlerメソッドでConfigureを使用する例を次に示します。

app.UseExceptionHandler(opt => opt.Run(
    async ctx =>
    {
        var feature = ctx.Features.Get<IExceptionHandlerFeature>();
        if (feature.Error is InvalidStringException ex)
        {
            await ctx.Response.WriteAsync(ex.Message);
        }
    }));

このように、InvalidStringExceptionは明示的なtry...catchなしで、アプリケーション内でグローバルに処理されます。また、コード内のどこにでも例外をスローすることができます。上記のコードは例外をキャッチし、独自のメッセージを本文として持つHTTP応答に適切に変換します。

また、AngularアプリからAPIを呼び出しているため、2つのアプリケーションが次から実行される場合、APIアプリケーションで CORSを設定する が必要になる可能性があります。異なる起源。

CORSがない場合、AngularアプリからのHTTPリクエストは、APIに到達する前に失敗する可能性があります。この場合、Angularアプリはundefinedの場合があります。また、コンソールにCORSエラーが表示される場合があります。

1
weichch

angular appですべてのhttpエラーの一般的なエラーハンドラーを作成するためにhttpインターセプターを使用できます。これにより、アラートを使用でき、トークンが期限切れになった場合にログインページにリダイレクトし、エラーオブジェクトを上書きします。監視可能なエラーのコールバックを追加することで、コンポーネントレベルでエラーオブジェクトにアクセスできます。

エラーハンドラサービス

@Injectable()
export class ErrorHandlerService implements HttpInterceptor {
  constructor(private msgServ: MessageService) {}
  public intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        switch (err.status) {
          case 500: {
            this.msgServ.add({
              severity: "error",
              summary: "Error ",
              detail: "Server is gone..????"
            });

            break;
          }
          case 400: {
            this.msgServ.add({
              severity: "error",
              summary: "Error ",
              detail: "custome error message..."
            });

            break;
          }
          case 401: {
            if (err.message == "invalid_token") {
              // router ???? navigate to login
            }
            break;
          }

          default: {
            this.msgServ.add({
              severity: "error",
              summary: "Error ",
              detail: err.message
            });
          }
        }

        return throwError(err);
      })
    );
  }
}

アプリモジュールのプロバイダーにインターセプターを追加する

@NgModule({
  ....
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerService, multi: true },
    MessageService
  ],
  ....
})
export class AppModule {}

デモ????

MessageServiceはPrimengコンポーネントライブラリに関連しており、独自のアラート構造を使用できます

0
malbarmavi