Install the Agent

There are three ways to use the APM RUM Agent:

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: ''
})

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

<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>

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

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.

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'
  })
]