Getting startededit

Using Package Managersedit

Install the APM agent for JavaScript as a dependency to your application:

npm install @elastic/apm-rum --save

Configure the agent:

import { init as initApm } from '@elastic/apm-rum'
const apm = initApm({

  // Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space)
  serviceName: '',

  // Set custom APM Server URL (default: http://localhost:8200)
  serverUrl: 'http://localhost:8200',

  // Set service version (required for sourcemap feature)
  serviceVersion: ''
})

Using Script Tagsedit

Add a <script> tag to the HTML page and use the elasticApm global object to load and initialize the agent:

Please download the latest version of JavaScript agent from GitHub or UNPKG and host the file in your Server/CDN before deploying to production.

<script src="https://your-cdn-host.com/path/to/elastic-apm-rum.umd.min.js" crossorigin></script>
<script>
  elasticApm.init({
    serviceName: '',
    serverUrl: 'http://localhost:8200',
  })
</script>

Currently the optimized(minified + gzipped) JavaScript bundle size is about 16KiB.

Using Production Buildedit

By default, RUM agent logs all the debug messages to the browser console. These logs are very useful in development. However, they make the RUM agent bundle size larger so you should make sure to use the optimized production version when deploying your application.

You can find instructions for building optimized code below for different bundlers

Webpackedit

For optimized webpack production build, include the Environment/Define plugin in the webpack configuration.

const { EnvironmentPlugin } = require('webpack')

plugins: [
  new EnvironmentPlugin({
    NODE_ENV: 'production'
  })
]

You can learn more about this in Webpack documentation.

Rollupedit

For optimized rollup production build, include the replace plugin which ensures the right build environment is used.

const replace = require('rollup-plugin-replace')

plugins: [
  replace({
    'process.env.NODE_ENV': 'production'
  })
]

Configuring CORSedit

If APM Server is deployed in an origin different than the page’s origin, you will need to configure Cross-Origin Resource Sharing (CORS). To configure CORS, simply:

  1. Enable RUM support in APM Server.
  2. Adjust the apm-server.rum.allow_origins configuration. By default, APM Server allows all origins.

How CORS worksedit

When the RUM agent makes it’s initial POST request, the browser will check to see if it is a cross-origin request. If it is, the browser automatically makes a preflight OPTIONS request to the server to ensure the original POST request is allowed. If this OPTIONS check passes, then the original POST request is allowed. This request will fail if RUM support is not configured in the APM Server.

If you use a proxy, the preflight request headers may be necessary for your configuration:

Access-Control-Request-Headers: Content-Type
Access-Control-Request-Method: POST
Origin: [request-origin]

The response should include these headers:

Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Origin: [request-origin]

To learn more about CORS, see the MDN page on Cross-Origin Resource Sharing.