How to output error 400 details at frontend with Angular-CodePudding

I'm getting an error response to a search form and I would like to display the details of this error for the user in the Angular frontend.

This is the JSON code response that I get in the Devtools network tab:

      {
    "schemas":["urn:ietf:params:scim:api:messages:2.0:Error"],
    "details":["Invalid query: prefixed wildcard must have at least 3 chars can not be used with field 'email'"],
    "status":400
    }

This is my code from ux-feedback-manager.service.ts(I'm using Zorro as UI library):

import { Injectable } from '@angular/core';

import { I18nService } from 'src/app/core/services/i18n.service';

import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';

import * as _ from 'lodash';

@Injectable({
  providedIn: 'root'
})
export class UxFeedbackManagerService {

  constructor (
    private message: NzMessageService,
    private modal: NzModalService,
    private i18nService: I18nService
  ) { }

  // Type: Message Feedback
  nzMessageFeedback(msgType, msg): void {
    this.message.create(msgType, `${msg}`);
  }

  // Type: Modal Feedback
  nzModalFeedback(mdlType, fbTransl, fbDetails): void {
    let translPath = `UX-FEEDBACK.MODAL.${mdlType.toUpperCase()}`;
 
    this.i18nService.getSpecificAppTranslation(translPath).subscribe((uxFBtransl: object) => {

      switch(mdlType) {
        // case 'info':
        //   this.modal.info({
        //     nzTitle: translObj.title,
        //     nzContent: translObj.message
        //   });
        //   break;
        // case 'success':
        //   this.modal.success({
        //     nzTitle: transl.title,
        //     nzContent: transl.message
        //   });
        //   break;
        case 'error':
          let title = _.get(uxFBtransl, 'TITLE', null);
          let message = _.get(fbTransl, 'MESSAGE', null);
          let errCode = _.get(uxFBtransl, 'ERR-CODE', null);
          let errDetail = _.get(uxFBtransl, 'ERR-DETAILS', null);

          this.modal.error({
            nzTitle: title,
            nzContent: `<br>
            <b>Message:</b> ${message}<br>
            <b>${errCode}:</b> ${fbDetails.code}<br>
            <b>${errDetail}:</b> ${fbDetails.message}
            `
          });
          break;
        // case 'warning':
        //   this.modal.warning({
        //     nzTitle: transl.title,
        //     nzContent: transl.message
        //   });
        //   break;
      }
    });
  }
}

The fbDetails.message isn't getting the right response details!! How can I get it?

CodePudding user response：

you probably using rxjs so you can use catchError pipe and then you get the error, and you can display it to the user - for example:

someObservableSendingTheForm().pipe(catchError(
 err => {
  openDialog(err.details)    // passing the text to the dialog
  throw err;
 }
))

CodePudding user response：

Assuming you are calling some API which searches and on failure , you want the details to be printed on screen, you can do this:

you can capture the error in a local var like this

  this.serviceName.functionName().subscribe((response: any) => {
          //Do something if search is successful
          },
            err => {
              target = err['details'];
            })

then just print the target on front end using string interpolation like {{target}}