"Cannot read property message of null" when reading error status code from http response in Angular 8

Question

I'm developing in Angular 8 and issuing a http post request to a .net core web api and returning a 400 status code if username or password is incorrect. Chrome console says 400 returned but when extracting the status code in the returned observable from the http request response, I get a Cannot read property message of null error message. How can I fix this? Thanks.

Login Component:

this.authService.login(
      {
        username: this.f.username.value,
        password: this.f.password.value
      }
    )
    .subscribe(
        res => {
          if(this.returnUrl != null){
            this.router.navigate([this.returnUrl]);
          }
          else {
            let role = res.role[0];
            this.router.navigate([`${role}`]);
          }

        },
        error => {
            //This line throws the error. the value of error is "cannot read message property of null" and error.status = undefined.
            alert(error.status);
            this.badCredentials = true;
            this.router.navigate(['/login']);
        });

Auth Service:

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user)
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError((error): any => {

              return throwError(`Connection Error: ${error}`);
          }
      ));
  }

UPDATE:

I updated my code to the following in my angular application and it still returns the same error message: Server returned code: undefined, error message is: Cannot read property 'message' of null

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user)
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError(this.handleError));
  }

  handleError(err: HttpErrorResponse) {
    let errorMessage = '';
    if(err.error instanceof ErrorEvent){

      //a client-side or network error occured. Handle it accordingly.
      errorMessage = `An error occured: ${err.error.message}`;

    } else {
      //The back-end returned an unsuccessful response code.
      errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
    }

    console.error(errorMessage);
    return throwError(errorMessage);
  }

But when I do return BadRequest("incorrect username or password."); or return BadRequest(); it returns the error message Server returned code: undefined, error message is: undefined. So maybe this has to do with the way I'm returning the error code from the web api in the back end. I'm not sure what needs to be fixed there.

Where do you have that error ? Show us the code that have the error — Tony
– Tony, Commented Sep 9, 2019 at 9:46
@TonyNgo I'm getting the error message at the alert(error.status); line in the login component code that I posted above. I edited it to indicate where it occurs. That line throws the error: cannot read message property of undefined and when using the chrome debugger, it says error.status is undefined. — Raj Narayanan
– Raj Narayanan, Commented Sep 9, 2019 at 9:53

Joey Gough · Accepted Answer · 2019-09-09 09:53:32Z

2

status is only provided if you observe: 'response'

try editting your authService like this

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user
      // NEW CODE HERE
      { observe: 'response' }
    )
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError((error): any => {

              return throwError(`Connection Error: ${error}`);
          }
      ));
  }

answered Sep 9, 2019 at 9:53

Joey Gough

3,1232 gold badges28 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raj Narayanan Over a year ago

I changed it to this, but still getting that error message. return this.http.post<any>(${applicationPaths.loginApiUrl}, user, { observe: 'response' }). Is it the right syntax?

Joey Gough Over a year ago

have you tried console logging the response and error?

Raj Narayanan Over a year ago

I changed it to console.log(error.status) and it says "undefined" in chrome console.

Raj Narayanan Over a year ago

I changed it to console.log(error) and it says: TypeError: Cannot read property 'message' of null

Tony · Accepted Answer · 2019-09-09 10:55:02Z

1

Add { observe: 'response' } to your code like this

login(user: {username: string, password: string}) :Observable<any>{
    return this.http.post<any>(`${applicationPaths.loginApiUrl}`, user, { observe: 'response' })
    .pipe(
      tap(response => this.doLoginUser(response)),
      catchError((error): any => {
              return throwError(`Connection Error: ${error}`);
          }
      ));
  }

Then try to access your errror data in your catchError like this

error.statusText
error.statusCode

Edit you should use this code in your controller

 return BadRequest();

Your code

return StatusCode(400);

only return status code

edited Sep 9, 2019 at 10:55

answered Sep 9, 2019 at 10:41

Tony

20.3k7 gold badges42 silver badges62 bronze badges

4 Comments

Raj Narayanan Over a year ago

I tried it and it says in the console: Connection Error: undefined if I just try to output error it says: Connection Error: TypeError: Cannot read property 'message' of null

Tony Over a year ago

Can you show how you return data from .net core controller ?

Raj Narayanan Over a year ago

I returned it like this: return StatusCode(400); But if I return it like this: return BadRequest("bad credentials"); it says Connection Error: Ok in console.

Raj Narayanan Over a year ago

I changed it to return BadRequest() and console still says: TypeError: Cannot read property 'message' of null

Ramprasath Selvam · Accepted Answer · 2019-09-09 12:19:31Z

0

In your .NET API: return BadRequest("Incorrect username or password");
In your Angular app:

    catchError((error): any => {
                  return throwError(`Connection Error: ${error.error}`);
              }
          ));

edited Sep 9, 2019 at 12:19

Ramprasath Selvam

4,5585 gold badges31 silver badges53 bronze badges

answered Sep 9, 2019 at 12:12

Pavel Glos

12 bronze badges

4 Comments

Raj Narayanan Over a year ago

I tried this and it still gives the following error in console: Connection Error: undefined

Pavel Glos Over a year ago

what if you try return throwError(`Connection Error: ${error}`); ? that should return object of error to your console.

Pavel Glos Over a year ago

in my project it looks like this:

this.http.get<Data[]>('apiUrl').subscribe(result => {       this.chartData = result;     }, error => {       this.alertify.error(error.error);     });

Pavel Glos Over a year ago

login in API:

public IActionResult Login([FromBody] User user)         {             if (user == null)             {                 return BadRequest("Invalid client request");             }             try             {                             }             catch (HttpRequestException)             {                 return BadRequest("Cannot connect to the IoT server.");             }             catch (Exception)             {                 return BadRequest("Cannot login.");             }

Raphaël Balet · Accepted Answer · 2022-04-13 09:22:44Z

0

In my case I received this because I'd incorrectly annotated my API method as a HttpGet and not a HttpPost!

The message doesn't really seem to reflect this however when I fixed the API it worked.

edited Apr 13, 2022 at 9:22

Raphaël Balet

9,0898 gold badges65 silver badges118 bronze badges

answered Oct 15, 2020 at 5:22

Campey

1,1589 silver badges15 bronze badges

Collectives™ on Stack Overflow

"Cannot read property message of null" when reading error status code from http response in Angular 8

4 Answers 4

4 Comments

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related