Elastic APM Angular Package Returns 400 with Angular 9

[edarioq (Edgar Quintero)]

If you are asking about a problem you are experiencing, please use the following template, as it will help us help you. If you have a different problem, please delete all of this text

Kibana version: 7.6.2

Elasticsearch version: 7.6.2

APM Server version: 7.6.2

APM Agent language and version: @elastic/apm-rum-angular 1.1.1. Angular 9.1.0

Browser version: Firefox 76.0b8

Original install method (e.g. download page, yum, deb, from source, etc.) and version: Used the Angular Integration instructions

Fresh install or upgraded from other version?

Is there anything special in your setup? For example, are you using the Logstash or Kafka outputs? Are you using a load balancer in front of the APM Servers? Have you changed index pattern, generated custom templates, changed agent configuration etc.

Everything is running inside Docker containers with docker-compose
APM is running on port 9200
Enabled CORS in elasticsearch.yml, useing:

http.cors.enabled: true
http.cors.allow-origin: "*"
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers: X-Requested-With,X-Auth-Token,Content-Type, Content-Length

Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):

Errors in browser console (if relevant):

[Elastic APM] Failed sending events! Error: "http://localhost:9200/intake/v2/rum/events HTTP status: 400"

[Hamidreza (Hamidreza Jahtalabziabari)]

Hi @edarioq,

Thanks for reporting the issue.

Would you please find the response from APM Server to the http://localhost:9200/intake/v2/rum/events request (in the Network panel of devtools) and send it here?

Cheers,
Hamid

[edarioq (Edgar Quintero)]

Hello @Hamidreza. I fixed it by installing APM server with Docker alongside the other services and making the call to that instead of Elastic directly. The errors are appearing correctly now. Thanks.

In the docker-compose.yml file:

  apm-server:
    image: docker.elastic.co/apm/apm-server:7.6.2
    container_name: apm-server
    command: >
      apm-server -e
        -E apm-server.rum.enabled=true
        -E apm-server.rum.event_rate.limit=300
        -E apm-server.rum.event_rate.lru_size=1000
        -E apm-server.rum.allow_origins=['*']
        -E apm-server.rum.library_pattern="node_modules|bower_components|~"
        -E apm-server.rum.exclude_from_grouping="^/webpack"
        -E apm-server.rum.source_mapping.enabled=true
        -E apm-server.rum.source_mapping.cache.expiration=5m
        -E apm-server.rum.source_mapping.index_pattern="apm-*"
        -E setup.kibana.host=kibana:5601
        -E apm-server.kibana.enabled=true
        -E apm-server.kibana.host=kibana:5601
        -E output.elasticsearch.hosts=["elastic:9200"]
    volumes:
      - logs_data:/logs
      - data01:/usr/share/apm-server/data
    ports:
      - 8200:8200
    depends_on:
      - elastic
    networks:
      - observability

And now in Angular I just send it to localhost:8200 insead of localhost:9200.

const apm = service.init({
      serviceName: 'frontend',
      serverUrl: 'http://localhost:8200/', // APM Server
      serviceVersion: '1.0.0',
    });