Angular 4.x HTTP Client Error Handling - php

Question

I'm trying to develop an app that uses Angular on front and Laravel 5.0 at back.
In HTTP requests, I'm having a hard time getting errors.
This is my MenuController.php that gives my menus to Angular as JSON:
if($control){
$response->data = Menu::get()->toArray();
}
if(!$control) {
$response->error = 'Error!';
}
return json_encode($response);
And this is my menu.service.ts:
private menusUrl = '/api/menu';
constructor (private http: Http) {}
getMenus(): Observable<Menu[]> {
return this.http.get(this.menusUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) {
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
And this is the menu-index.component.ts:
errorMessage: string;
menus: Menu[];
mode = 'Observable';
constructor(private menusService: MenusService) { }
ngOnInit() { this.getMenus(); }
getMenus() {
this.menusService.getMenus()
.subscribe(
menus => this.menus = menus,
error => this.errorMessage = <any>error);
}
The part where I get my menus from Laravel works fine, but I couldn't get the error messages.
Hint: My Angular files are nearly exact copies of the ones that are presented in Angular HTTP Client tutorial. The main problem is how should I return my errors using Laravel so that Angular catches them.

Answer 1

I see a number of things you can improve:
You don't need to manually serialize your data carrier. Laravel handles that for you. All you need to do is return $response.
Your handle error should return the error message. The way chained promises work is that the callback to invoke next receives the return value from the former. So I believe it should be sufficient to return return errMsg.
I do not know if these improvements would resolve your issue, but it is certainly one step in the debugging process.

Answer 2

It turns out that I was not returning a proper error response. Here is the related part in the corrected version of MenuController.php:
if(!$control) {
$response['error'] = 'ERROR!';
return (new Response($response, 400))
->header('Content-Type', 'application/json');
}