httpClient error callback returns [object object] with status 500 internal server error in Angular

I want to thank you in advance for your help. I just uploaded an Angular + NestJS application to server. The users and emails and roles don't display in the html table. In the network tab and console I see 500 internal server error. I consoled the error callback inside this.userService.subscribe() method so that it may help. But it only displays [object object].

It is so weird because the rest is working fine. I am able to login and logout, see profile data, and permission list, and register new user. On local server, emails and users displays properly and everything works as expected. Problem appears on live server!!

I also used Angular error handling and found that the error is basically from backend not Angular. Below is the returned error:

Backend returned code 500, body was: [object Object]

I have not idea about that error!

error appears on console tab

request/response detail

endpoint for userService.ts is '/api/users'

/* eslint-disable @nrwl/nx/enforce-module-boundaries */
/* eslint-disable no-restricted-imports */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export abstract class RestService {
  abstract get endpoint(): string;

  constructor(protected http: HttpClient) {}

  all(page?: number): Observable<any> {
    let url = this.endpoint;
    if (page) {
      url += `?page=${page}`;
    }
    return this.http.get<any>(url);
  }
  

  create(data: any): Observable<any> {
    return this.http.post(this.endpoint, data);
  }

  sendEmail(data: any): Observable<any> {
    return this.http.post(this.endpoint, data);
  }

  get(id: number): Observable<any> {
    return this.http.get<any>(`${this.endpoint}/${id}`);
  }

  update(id: number, data: any): Observable<any> {
    return this.http.put(`${this.endpoint}/${id}`, data);
  }

  delete(id: number): Observable<void> {
    return this.http.delete<void>(`${this.endpoint}/${id}`);
  }
}

users.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { User } from '../../../interfaces/user';
import { ScrollService } from '../../../scroll.service';
import { MailerMailingListService } from '../../../services/mailer-mailing-list.service';
import { UserService } from '../../../services/user.service';

@Component({
  selector: 'symbiota-dashboard-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
export class UsersComponent implements OnInit {
  users: User[] = [];
  emailList: string[] = [];
  page = 1;
  last_page!: number;
  checks = false;
  data = [];

  constructor(
    private userService: UserService,
    private mailerMailingListService: MailerMailingListService,
    private scrollService: ScrollService,
    public router: Router
  ) {}

  load(): void {
    this.userService.all(this.page).subscribe((res: any) => {
      this.users = res.data;
      console.log(res.data);
      this.last_page = res.meta.last_page;
    });
  }



  ngOnInit(): void {
    this.load();
    //console.log('email list: ', this.emailList);
  }
  }

users.component.html

<tbody>
        <tr *ngFor="let user of users; let i = index">
          <td style="width: 2%">
            <!-- <input type="checkbox" [checked]="checks" /> -->
            <input
              type="checkbox"
              [checked]="checks"
              id="i"
              (click)="onSelect($event, '')"
            />
          </td>
          <td style="width: 2%"></td>
          <td></td>
          <td></td>
          <td></td>
          <td>will be added later</td>
          <td></td>
          <td>
            <button
              class="btn-delete"
              style="background-color: #18976b"
              [routerLink]="['/dashboard/users', user.id, 'edit']"
            >
              Edit
            </button>
            <button
              class="btn-delete"
              style="background-color: rgb(226, 73, 73)"
              (click)="delete($event, user.id, i)"
            >
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>

from Recent Questions - Stack Overflow https://ift.tt/3BlKfJl
https://ift.tt/eA8V8J