Introduction
Over the festive season, developers and support engineers will be on high alert for many systems looking for issues and spikes in usage to keep their systems alive for eager shoppers or users trying to finish off their workloads ahead of time off the celebrate festivities. You may be wondering how we can collect data to gain these insights. Can you use the Elastic User Experience and APM dashboards to keep an eye on things?
Image source: Elastic Docs Observability Guide > User Experience
Using a simple example of a JavaScript frontend connected to a Node.js service, I will share how combining Real User Monitoring, or RUM, with Application Performance Monitoring, or APM, in Elastic Observability can help you be on the lookout for issues in your JavaScript application at this busy time of year.
RUM Instrumentation
Real User Monitoring, or RUM, is a JavaScript instrumentation technique that allows us to gather
UI events, navigations and metrics from our application through user interactions without the need to trigger custom API endpoints.
Instrumentation of your application is achieved using the Elastic RUM agent using the below package manager install:
npm install @elastic/apm-rum --save
Once installed, the agent needs to be initialized using the below code snippet. The serviceName and serverUrl are required parameters. If you want to have visibility of front to back tracing with the Node.js service on a different origin, you will need to also include your service in the distributedTracingOrigins list.
import { init as initApm } from '@elastic/apm-rum';
initApm({
serviceName: 'my-js-ui',
serverUrl: 'https://my-elastic-deployment:port',
serviceVersion: '1',
environment: 'dev',
distributedTracingOrigins: ['http://my-node-js-service']
});
If you are using SPA frameworks such as Angular, React or Vue, you may need to include one of the Framework specific extensions for full instrumentation and error capture.
APM Instrumentation
APM, or Application Performance Monitoring, is the ability to capture events and metrics from your application. RUM generally is a subset of APM, but here we are referring to backend service instrumentation. There are several APM agents available for different technologies, but here we shall use the Elastic APM Node.js Client.
Example 1: Elastic APM Agent
To use the native Elastic APM agent requires instrumentation of your service package manager requires a single install:
npm install elastic-apm-node --save
Once installed, the agent needs to be initialized using the below code snippet. The serviceName, serverUrl and secretToken parameters are required.
require('elastic-apm-node').start({
serviceName: 'my-node-js-service',
serverUrl: 'https://my-elastic-deployment:port',
secretToken: 'my-deployment-secret-token',
serviceVersion: '1',
environment: 'dev'
});
Example 2: OpenTelemetry
OpenTelemetry, or OTel, is an open standard for collecting and exporting telemetry data describing the performance and behaviour of an application. As of Elastic APM Node.JS Client version 3.x, it is possible to use OTel via the Elastic OpenTelemetry Bridge and the @opentelemetry/api dependency.
OpenTelemetry requires installation of both the Elastic APM Node.js client and the OpenTelemetry Node.js agent via your favourite package manager:
npm install --save elastic-apm-node @opentelemetry/api
The agent is initialized similar to the above example, with the addition of the opentelemetryBridgeEnabled feature flag. Note that use of the flag to explicitly enable the bridge will change in a future version.
require('elastic-apm-node').start({
serviceName: 'my-node-js-service',
serviceVersion: '1',
serverUrl: 'https://my-elastic-deployment:port',
secretToken: 'my-deployment-secret-token',
environment: 'dev',
opentelemetryBridgeEnabled: true
});
Seasons Greetings!
Congrats! You now know how to instrument the frontend and backend layers of your JavaScript application. You'll now be able to monitor your application through the festive season via the User Experience and APM dashboards in Elastic Observability.
Image source: Pexels
Enjoy some RUM with your Eggnog this year!