Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

Angular error handling #5742


User avatar
0
rbarbosa created

Hello,

When trying to add actions after user input to backend exceptions, I am having trouble passing the error message as it gets converted to a standard swagger exception

Backend: throw new UserFriendlyException("Order not found");

Angular:

getOrder(event?:LazyLoadEvent){
            this.orderLoading = true;
            this._returnAppService.getOrder(this.orderText)
            .pipe(finalize(()=> {this.orderLoading = false}))
            .subscribe(result=> {
                this.orderDetails = result;                
            },err=> {
                console.log(err);
                debugger;
                abp.message.error(err.message).then(()=> {
                    this.orderText = "";
                    this.orderTextField.nativeElement.focus();
                    //do more custom stuff
                });
            })
            
        }

the err object is a standard SwaggerException "an internal error has ocurred" but abp.js manages to catch the proper message.

Any ideas on how to properly create custom alerts with callbacks that will pass the error message?


6 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    What is the http status code and return content?

  • User Avatar
    0
    rbarbosa created

    UserFriendlyException returns an Http 500 status code

    return content looks like this:

    {
      "result": null,
      "targetUrl": null,
      "success": false,
      "error": {
        "code": -2,
        "message": "No more returns for this order.",
        "details": null,
        "validationErrors": null
      },
      "unAuthorizedRequest": false,
      "__abp": true
    }
    

    so when trying to catch the error on the subscribe method it just returns a generic swagger error after the framework logs it:

    ERROR: 
    abp.js:350 {code: -2, message: "No more returns for this order.", details: null, validationErrors: null}
    

    abp.js:350 is:

    abp.log.log = function (logObject, logLevel) {
            if (!window.console || !window.console.log) {
                return;
            }
    
            if (logLevel != undefined && logLevel < abp.log.level) {
                return;
            }
    
            console.log(logObject); // 350
        };
    

    after that the error pops through the rest:

    ERROR Error: An unexpected server error occurred.
        at new SwaggerException (service-proxies.ts:22907)
        at throwException (service-proxies.ts:22927)
        at MergeMapSubscriber.project (service-proxies.ts:6583)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:60)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
        at Observable._subscribe (service-proxies.ts:22933)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
        at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    

    and this SwaggerException is what the subscribe(err) method is handling.

  • User Avatar
    0
    ismcagdas created
    Support Team

    You can tyr;

    _service.method({})
    .pipe(
    	catchError(err => {
    		console.log('Handling error locally and rethrowing it...', err);
    	})
    )
    
  • User Avatar
    0
    rbarbosa created

    Hello

    I have modified the code to handle the error in the pipe like so:

    getReturnParameters(): void {
    
                this._returnAppService.validate(this.id)
                .pipe(
                    //catchError cannot return void, can return of([])  to stop bubble
                    catchError((err) => {console.log('error catchError', err); return throwError(err); }) 
                )
                .subscribe(result  => {
                    this.validatedReturnOrder = result;
                }, err => {
                    console.log('error subscribe', err);
                });
            }
    

    Abp error with message is caught correctly before pipe code runs

    :22742/api/services/app/Returns/Validate:1 POST http://localhost:22742/api/services/app/Returns/Validate 500 (Internal Server Error)
    abp.js:350 ERROR: 
    abp.js:350 {code: -2, message: "No more returns for this order.", details: null, validationErrors: null}
    

    Pipe catchError gets SwaggerException

    return-by-order-detail.component.ts:75
    error catchError Error: An unexpected server error occurred.
        at new SwaggerException (service-proxies.ts:22907)
        at throwException (service-proxies.ts:22927)
        at MergeMapSubscriber.project (service-proxies.ts:6583)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:60)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
        at Observable._subscribe (service-proxies.ts:22933)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
        at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    

    Subscribe Error gets SwaggerException

    return-by-order-detail.component.ts:80 
    error subscribe Error: An unexpected server error occurred.
        at new SwaggerException (service-proxies.ts:22907)
        at throwException (service-proxies.ts:22927)
        at MergeMapSubscriber.project (service-proxies.ts:6583)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:60)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:50)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
        at Observable._subscribe (service-proxies.ts:22933)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
        at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    
  • User Avatar
    0
    ismcagdas created
    Support Team
  • User Avatar
    0
    OriAssurant created

    Why are these links to github dead?