Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

How to link Angular SPA browser app in ServiceMap with Zuul Gateway and Springboot Microservices

spa
springboot
servicemaps
keytransaction
zuul

#1

We are trying to create a service map like below, using which we want to track as key transaction.

When I check the Service map of the Gateway, I can see that the map is generated from Gateway to API, but it is not automatically mapping the browser requests from the Angular SPA app.

A little background, we have three applications created in new relic and capturing the default instrumentation and some custom events (API) and custom pageActions(Browser) without any issues.

  1. Browser app - SPA - Angular
  2. APM app - Gateway - Zuul Gateway - Java
  3. APM app - API - Java SpringBoot

How do I map all the three together. Please let me know if you need more information.


#2

Hello @sriram.sureshkumar

I dont think you can achieve it with your angular app, being a standalone front end (i.e. not generated by some backend service, like plain old JSPs) .

Newrelic links transactions via cross application transaction tracing, and in this case “application” is your java app instances (zuul and springboot) and not the html frontend (angular).

Perhaps NR guys can correct me on this, however I believe you have noticed when you added your browser app into newrelic, you were presented with option, if your app is linked to any of the existing monitored backends. From what I figured, that question is exactly for the purpose of attending to your problem.

I personally believe this question (the one whether your app is linked to the existing monitoring backend) does not make sense anymore in the world multiple microservices serving single angular frontend.

Regards


#3

I’d say @Boris.Zozoulia is on target here in saying that if the Browser application was instrumented using the standalone or copy and paste method (which is the most common method for Angular apps), there’s no way to force everything to map together. That’s going to require Browser deployment via the Java APM agent.

For the sake of the broader community discussion, I wanted to share a couple of links on how to achieve that. I’m not sure if they’ll apply to you as it sounds like your configuration may not be compatible, but I think it’s worth at least knowing what the process is.