Backend API completes successfully but NG not receiving anything

Question

Front end Angular app sends a GET to a backend Node API server. While API successfully fulfills this GET, its response res.status(200).send(data); not triggers the breakpoint at NG caller, but Chrome F12 network tab shows there are data returned.

---- NG front-end component .ts:

import { Component, NgModule, OnInit } from '@angular/core';
import { mySvc } from '../mySvc.service';
import { record } from '../models/record';     

export class ListAllRecordsComponent implements OnInit {
    private allRecords: record[] = [];
    constructor(private mySvc: mySvc) {}
    ...
    public getAllRecords()
    {
      this.mySvc.getAllRecords().subscribe(response => this.allRecords = response, );
    }
}

---- NG mySvc.service.ts

import { record } from '../models/record';  
@Injectable()
export class mySvc {
    constructor(private http: HttpClient) { }
    const url = 'http://localhost:3000/somewhere';
    getAllRecords(): Observable<record[]>
    {
        return this.http.get(url)
            .pipe(
                map((data: any) => data.record),        // ??? break point is not triggered as expected when API sends back 200.
                catchError( error => { return throwError('bad')}) 
            ) 
    }

---- Node API server controller:

exports.pgGetAll = (req, res) =>
{
    objPS.pgGetAll( (err, data) =>
    {
        if (err)
            res.status(500).send(err.message);
        else
        {
            res.status(200).send(data);     // break point shows data has all records
        }
    });
}

---- objPS:

const pgGetAll = (cbFunc) => 
{
    pool.query('select * from "schema1"."table1"')
        .then
        (
            good =>
            {
                cbFunc(null, good)          // break point shows good has all records
            },
            bad =>
            {
                cbFunc(bad)
            }
        );
}

Can you show how you use the getAllRecords method from your service? Because you should subscribe to the observable somewhere... — bits, Dec 14 '20 at 21:26
@bits added to post, but if observable not getting anything, nothing to do with downstream. — Jeb50, Dec 14 '20 at 22:07
What is the response on the browser's devtools `Network` section? — noam steiner, Dec 14 '20 at 22:11
@noamsteiner good point, surprisingly data shows up there, thank you! Didn't think of it, just thought nothing returned. Curious why break point is not triggered. — Jeb50, Dec 15 '20 at 05:07
It needs debug. You have any interceptors in the app? what did you try by now? If you get a response to the browser - remove the backend snippets from the question, it's confusing. — noam steiner, Dec 15 '20 at 08:58
@noamsteiner no interceptors I add, but can you explain what interceptor you meant and give an example? — Jeb50, Dec 15 '20 at 15:28
You can read about Interceptors on angular documentation. If you didn't add one yourself it's not relevant to discuss it here. From what you shared, everything seems ok. Can you describe how did you try to debug this by now? — noam steiner, Dec 15 '20 at 15:36
@noamsteiner just setting breakpoint in order to go step by step and verify, that's how it was discovered breakpoint is not hit when API returns something. Fiddler was used to see if things returned, but it tells me something about encryption and security which I thought it's not relevant — Jeb50, Dec 15 '20 at 15:46
@noamsteiner interceptor, this is a test project based on some on-line samples so maybe interceptor is added unintentionally. Can you name a few interceptor libraries? — Jeb50, Dec 15 '20 at 15:48
just before map operator in `mySvc` put tap and try to console.log the data object. It might give you insight into what the structure of data object is. — madteapot, Dec 15 '20 at 16:16
@Setu console shows there are returns, further `tap( ev => console.log(ev.rows[0])),` shows the data of the first record. But, why it wouldn't trigger the breakpoint? — Jeb50, Dec 27 '20 at 23:59

score 1 · Answer 1 · answered Jan 05 '21 at 23:12

1

I think your problem has to do with the way in which Javascript lambda expressions are debugged.

Please, consider read the accepted answer in this SO question, I think it will provide you with all the necessary information to successfully debug your code.

answered Jan 05 '21 at 23:12

jccampanero

50,989
3
20
49

The accepted answer does provide a solution directly, I can only give a "useful uptick". Really appreciate the input, and will read the suggested answer. Thank you – Jeb50 Jan 06 '21 at 05:01
You are welcome @Jeb50, thank you very much. Please, do not worry, I was aware of that. I usually try to provide a detailed answer but I came across the indicated question, and I think that definitively it provides a great guidance and a lot of solutions to your problem. I hope it helps. Thank you very much again. – jccampanero Jan 06 '21 at 11:20

score 0 · Answer 2 · answered Jan 02 '21 at 11:18

0

I think this should fix it (excerpt from your service):

getAllRecords(): Observable<record[]>
    {
        return this.http.get<record[]>(url)
            .pipe(
                map((data: any) => data.record),      
                catchError( error => { return throwError('bad')}) 
            ) 
    }

I ran into this about a million times.

answered Jan 02 '21 at 11:18

still the same. – Jeb50 Jan 03 '21 at 04:08
can you share a sample? – Jeb50 Jan 03 '21 at 04:36
Can you try removing the pipe and checking if it works? – Jan 03 '21 at 06:37
Same removing whole pipe completely. `return this.http.get(url);` – Jeb50 Jan 03 '21 at 18:02
1

i know this is not good answer but try to remove all types from getAllRecords() in your service . if it works, at least you know the issue and what to fix – Abdelmlak Dhif Jan 05 '21 at 20:24
Good idea. First try verifying all your types and you may find any mistakes. – Jan 06 '21 at 06:56

score 0 · Accepted Answer · answered Jan 06 '21 at 02:00

0

If I'm not mistaken, you're getting back data. If you got trouble with your breakpoint only, try using a method for mapping the data and set your breakpoint there instead of setting it in your lambda:

map((data: any) => this.mapData(data))

Define this new method:

mapData(data: any) {
  return data.record; // set your breakpoint here
}

Few other things though: "data.record" sounds wrong to me, because what it should deliver is more than one records, not only one, so the singular name is at least interesting.

At least in the mssql package, a query would return an object in data called recordset.

Here a link to that: https://www.npmjs.com/package/mssql#query-command-callback

answered Jan 06 '21 at 02:00

Janos Vinceller

1,208
11
25

Breakpoint works inside of `mapData()`! Why it didn't work in the lambda? – Jeb50 Jan 06 '21 at 04:53
Look at this solution here, I hope this helps you, this seems to be a not yet supported debugger feature: https://stackoverflow.com/questions/30664151/how-to-set-a-breakpoint-at-a-lambda-call-in-google-chrome-devtools – Janos Vinceller Jan 06 '21 at 07:34

Backend API completes successfully but NG not receiving anything

3 Answers3