If you’re familiar with New Relic browser monitoring, you might be using single-page application (SPA) monitoring for deeper visibility and actionable insights into real user interactions with single-page apps. After you set up your single-page app with an SPA-enabled version of the browser monitoring agent, you’re excited to capture all the metrics and traces from your app. But, wait! Distributed tracing isn’t working!
The agent shows that distributed tracing is enabled by default, but you can’t capture distributed trace details. Several thoughts go through your mind… Is it because the backend service doesn’t have an agent? Or is it because the backend service is deployed separately from your web service? Maybe it’s both. Help!
This blog post will help you with SPA monitoring, so you can take advantage of distributed tracing to find out what your users are experiencing, fix issues quickly, and make customers happy.
Example scenario
In this scenario, let’s say you have a full-stack JavaScript application. Your frontend (you might be using React, Angular, or Vue, for example) is hosted on a static web host (which might be something like Netlify, Amazon S3, Render, or GitHub Pages). Your backend web service could be hosted on an Amazon Elastic Compute Cloud, an Amazon Elastic Block Store, or on Google Cloud Platform with Google Engine Compute Engine or Google App Engine.
The name of your frontend browser app is www.spa-app.awesome.com.
The name of your backend web service is www.robust-webservice.awesome.com.
Configure New Relic for SPA and Node.js APM agents
You're setting up New Relic for two application performance monitoring (APM) agents: SPA and Node.js. That means you configure your applications with these New Relic agents:
- The browser monitoring agent for SPA
- (Optional) An APM agent for the backend service, in this case the Node.js agent for an Express app (a Node.js web application framework).
The problem
As you can see in this screen capture, when you configure your settings at Browser > Settings > Applications settings, you see the default browser agent configuration Pro+SPA and can set Distributed Tracing to ON.
But with the application hosting model described earlier, this setting does not show any traces.
Three attempted fixes
I’ll walk through three ways you might try to fix the problem. Let’s assume you are using the application model described in the example scenario section.
Spoiler alert: As I’ll show with our example scenario in this blog post, the third attempt will work.
Attempted fix #1: Enable CORS
If your frontend app and backend service are hosted on different subdomains or hosts, you might want to enable cross-origin resource sharing, also called CORS, for the browser agent. Select Browser > Settings > Applications settings again. Include the base URL for your backend service or API, as shown in this screenshot.
But the result for enabling CORS still doesn’t help. You don’t see any distributed traces!
Attempted fix #2: Enable CORS with New Relic headers
OK, let’s try again. Go back to Browser > Settings > Applications settings again.
This time, under Cross-Origin Resource Sharing (CORS), add origins. Select Use newrelic header and Use trace context headers, as shown in the next screen capture.
You hope that if you add origins, you’ll see the distributed traces for your cross-origin AJAX calls.
The result? Still no traces!
Attempted fix #3: Accept the CORS headers
Look at the previous screenshot again. When you’re in the Browser > Settings > Application settings, you’ll notice that the Cross-Origin Resource Sharing (CORS) section includes a warning about potential failure of AJAX requests if the New Relic custom header or WC3 trace context headers are not accepted.
If there aren’t any failures in AJAX requests from the frontend app, you might overlook or ignore this message.
But this is the answer to your problem!
You need to both accept and return these headers as part of the response to the AJAX/API calls from the frontend application.
Use this example to allow the headers:
/* Node+Express JS Sample */
//set custom headers
app.use(function(req, res, next) {
res.setHeader(
"Access-Control-Allow-Headers", ["newrelic","traceparent","tracestate"]
);
return next();
});Here are your results: Finally, you see your traces! In this example, you can see 2 entities: angular12-spa and angular12-nodeService. This is the distributed trace from your browser app to your backend service.
다음 단계
Now that you know how to get distributed tracing working for your single-page application (SPA) monitoring, you are closer to understanding how your customers use your applications.
Continue on your browser monitoring and distributed tracing journey with New Relic.
- Explore more browser monitoring features to monitor the performance of your applications.
- To monitor the availability of your browser-based applications, get started with synthetic monitoring.
이 블로그에 표현된 견해는 저자의 견해이며 반드시 New Relic의 견해를 반영하는 것은 아닙니다. 저자가 제공하는 모든 솔루션은 환경에 따라 다르며 New Relic에서 제공하는 상용 솔루션이나 지원의 일부가 아닙니다. 이 블로그 게시물과 관련된 질문 및 지원이 필요한 경우 Explorers Hub(discuss.newrelic.com)에서만 참여하십시오. 이 블로그에는 타사 사이트의 콘텐츠에 대한 링크가 포함될 수 있습니다. 이러한 링크를 제공함으로써 New Relic은 해당 사이트에서 사용할 수 있는 정보, 보기 또는 제품을 채택, 보증, 승인 또는 보증하지 않습니다.
