How to send core web vitals data to RUM(Real User Monitoring) in a angular 11 app?

Hi there,
I was configuring RUM for my angular app using this [Angular integration | APM Real User Monitoring JavaScript Agent Reference [5.x] | Elastic]. But when check the in Kibana user experience section I was not able to see data for core web vitals of my angular application. I need to know how to enable or send core web vital data of my applications to apm server.
Any help would be appreciated. :slight_smile:

cheers
sam

Hi @DSMilestone,

If you are using the latest Angular package, you should not need to configure anything as the agent already tracks the core web vitals metrics and reports them for all page-load transaction.

Could you please let us know what you see in the Kibana User Experience app for the web app you are instrumenting.

Thanks,
Vignesh

1 Like

Thanks for your reply @vigneshshanmugam
I have attached the screenshot below.

This is my app.module.ts constructor

constructor(service: ApmService) {
    // Agent API is exposed through this apm instance
    const apm = service.init({
      serviceName: 'employee-angular-app',
      serviceVersion: '1.0.0',
      active: true,
      instrument: true,
      environment: 'dev',
      logLevel: 'info',
      breakdownMetrics: true,
      eventsLimit: 160,
      serverUrl: 'http://apm-server.dockerelk.io:8200'
    })

    apm.setUserContext({
      'username': 'foo',
      'id': 'bar'
    })
  }

Hi @DSMilestone ,

Thanks for the screenshot. Have you tried increasing the percentile or the time range in the top of the User Experience app. It could be due to the less number of impressions/page views that the aggregation considers them to be too low. Trying to change the percentile or time range should change that. Let us know if that solves your issue.

Also try putting some more load by increasing the page-views.

Thanks,
Vignesh

1 Like

Hi @vigneshshanmugam ,
Thanks for your reply, I'll check that.

cheers,
sam