Code Monkey home page Code Monkey logo

apm-agent-rum-js's Introduction

Elastic APM Real User Monitoring (RUM) JavaScript agent

ci js-standard-style codecov lerna

Sauce Test Status
Cross Browser testing is provided by Sauce Labs

This is the official Real User Monitoring JavaScript agent.

Documentation

You can find our documentation on our website.

If you are interested in contributing to Elastic APM JavaScript agent, please see our contributing guide.

We'd love to hear your feedback, please take a minute to fill out our survey.

License

This project is MIT licensed.


Made with ♥️ and ☕️ by Elastic and our community.

apm-agent-rum-js's People

Contributors

amannocci avatar apmmachine avatar axw avatar bmorelli25 avatar cachedout avatar clyfish avatar dependabot[bot] avatar devcorpio avatar dsanders11 avatar geekpete avatar geekysam7 avatar hmdhk avatar ismisepaul avatar jahtalab avatar jooj123 avatar kuisathaverat avatar kyungeunni avatar lucabelluccini avatar lucasfcosta avatar marksmithson avatar mdelapenya avatar mdschweda avatar ollyhowell avatar pmusa avatar reakaleek avatar renewerner87 avatar samvk avatar stevenhair avatar v1v avatar vigneshshanmugam avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

apm-agent-rum-js's Issues

Add benchmarks

  • Micro benchmarks
    • Add benchmarks for Transaction & Span creation overhead.
  • Document benchmarks (Plus the Overhead)
  • Store benchmarks in ES
  • Create Kibana dashboards
  • Document the package size
  • Macro benchmarks on how the agent is affecting the user experience #302
  • Run the benchmarks on Jenkins CI for publishing to ES
  • Run the benchmarks on bare metal server #456

Postponed:

Improve docs for custom transactions and terminology

Docs need to be improved in order to better explain how to use custom transactions.
Also we need a glossary or some explanation of the basic terminology of APM. In this last case maybe we could link to some global APM explanation.

Support custom transactions

  • Review _finish, end, done, finish methods in Transaction
  • Refactor TransactionService, Transaction, Span
  • Add e2e tests for using custom transactions (Accessing the current transaction across JS files)
  • Refactor navigation timing marks so it can be add to any transaction
  • A configuration option to include navigation timing on the first transaction, or not at all, also whether to send it automatically or not
  • Write documentation about using the API as well as common pitfalls
    • Async tasks like fetch and the right time to end the transaction
    • There only can be on transaction at any time

Create OpenTracing API compatibility bridge

Implement lightweight OpenTracing API compatibility bridge.

  • Add documentation
  • Create a separate bundle for OpenTracing
  • Improve code coverage
  • Only add special tags if it's a transaction
  • Support logging errors
  • Convert all timestamps to relative times
  • Add opentracing tests
  • Start a transaction if there's no active transaction
  • Introduce open tracing context (needs to be immutable)
  • Implement open tracing subclasses
  • Add support for parent-child relationship between spans #119
  • add timestamp to transactions and spans
  • Support adding tags to individual spans and transactions #65

Should align with elastic/apm#32

isomorphic with elastic-apm-node?

I use both elastic-apm-node and apm-agent-js-base in my nodejs + reactjs project with server side render, and i will import apm both the nodejs and browserify side,

if (typeof window !== 'undefined') {

    const { init: initApm } = require('elastic-apm-js-base');

    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: '',
    });
}
import apmNode from 'elastic-apm-node';

const apm = apmNode.start({
  // Set required app name (allowed characters: a-z, A-Z, 0-9, -, _, and space)
  serviceName: 'xxx',

  // Use if APM Server requires a token
  secretToken: '',

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

I think its better to do someting like axios and isomorphic-fetch to support both node and browserify side.

{
  "name": "isomorphic-fetch",
  "version": "0.0.0",
  "description": "Isomorphic WHATWG Fetch API, for Node & Browserify",
  "browser": "fetch-npm-browserify.js",
  "main": "fetch-npm-node.js",

Add support for Metrics / Stats API

Work is underway to add support for Metrics to the API/server: elastic/apm-server#964
Support needs to be added to this agent too.

The default minimum set of metrics should be supported. TBD which additional metrics will be supported for this agent.

  • Investigate the scope and specific metrics to add

Docs improvements

  • Add notes about stacktrace changes and patching
  • Troubleshooting
  • How to debug (log levels)
  • add captureError to docs
  • Guide about uploading sourcemap if there is secret token setup in the apm-server,(elastic/apm-server#1268)
  • How to use script tags instead of npm

Limit the length for non-keyword fields

Currently only the keyword fields are limited at 1024 characters, we need to also apply this limit to non keyword fields. There will also be extended fields ie. SQL that can go up to 10000 characters to non-keyword fields.

Handling huge cardinality of page load transaction names

A little bit of background on the issue, we used included the page url as transaction name (without the query string) by default and we had the same problem even without the query string there are a lot applications that simply include ids in their url.

Currently the default transaction name is unknown and not the page url so all transactions are grouped by default under unknown but there is an API to let users set the initial page load transaction name and it can be set to the page url by the user which probably is the easiest way to set the page name. This can create a large number of transaction names.

Some solutions:

  • Having a url pattern config option that we use to set the transaction name to the page url
  • Implementing heuristics that tries to detects ids in the URL (I've made a POC) on the agent
  • Implementing a grouping algorithm on the Kibana side.

transactions return 403

This api is resulting in http://.*.com/v1/client-side/transactions 403 Forbidden.
On the local machine it is working fine.

I find this in the apm-server logs

2018-05-29T07:14:48.393Z	ERROR	[request]	beater/handlers.go:384	error handling request	{"request_id": "01e195a0-f20e-4942-98e7-b4fcee146ec1", "error": "forbidden request"}
2018-05-29T07:14:48.393Z	INFO	[request]	beater/handlers.go:150	handled request	{"request_id": "01e195a0-f20e-4942-98e7-b4fcee146ec1", "response_code": 403, "method": "POST", "URL": "/v1/client-side/transactions", "content_length": 1621, "remote_address": "127.0.0.1", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36"}

Not able to figure out why this is happening. Both(local and the server) have the configuration

Instrument XMLHttpRequest

Instrumentation of XMLHttpRequest .

  • Initial R&D
  • POC
  • Handling synchronous requests
  • Implement patchAll
  • Refactor TransactionService to accept XHR events
  • Add unit tests in core
  • Use the patching in the js-base module
  • Add unit tests in base
  • Add e2e tests in base
  • Add documentation
  • Resolve the singleton issue with patching
  • Test for failing requests

Document configuration options

  • active (with sampling example)
  • logLevel
  • serverStringLimit
  • flushInterval
  • errorThrottleLimit
  • errorThrottleInterval
  • transactionThrottleLimit
  • transactionThrottleInterval
  • sendPageLoadTransaction

Implement duration config suffixes

For duration configs (e.g. ELASTIC_APM_API_REQUEST_TIME), we will support time units like 1ms, 1s, 1m. For pre-v2 config, we should allow suffixes, but also continue to allow no suffix and assume the previous unit (e.g. "ms" for min span duration). For v2+ config, we should require suffixes.

Support for custom marks

  • Need to provide an API to record custom marks on the current transaction.
  • Consider capturing marks added by using performance.mark.
  • Add docs
  • Add example marks to opbeans

Instrument fetch API

  • Investigate PerformanceResourceTiming
  • Avoid duplicate spans when fetch is a polyfill
  • Remove domain from the url if on the same origin
  • Implement promise based instrumentation
  • Refactor XHR instrumentation
  • Add tests

spans added but transaction never sent

Hi,

I'm trying to test RUM with a third party web application. I insert js library and initialize it via nginx filter, all seems to be loaded properly within the page

Library version 1.0.0: elastic-apm-js-base.umd.min.js

Initialization

<script src="/static_ext/elastic-apm-js-base.umd.min.js"></script>
<script>elasticApm.init({
	logLevel: "debug", 
	serviceName: "Dev_CelonisAS", 
	serverUrl: "https://sapelk00.bsh.corp.bshg.com:8200"
	})
</script>

page-load tranasaction is being sent to apm-server whenever the page is loaded/reloaded. But for subsequent odata/ajax (ext.HttpRequest spans) i see in the console that thse spans are being started but nothing is sent

When i load the page i see the spans being added...

TransactionService.startSpan POST api/analysis/169/selections ext.HttpRequest
TransactionService.startSpan PUT api/analysis/169 ext.HttpRequest
TransactionService.startSpan GET api/folders/ed5a56a9-b1d9-4687-a025-e1dc924c205d/breadcrumbs ext.HttpRequest

.....

Then wen the page is loaded I see a call to
TransactionService.add
and with it all the spans contained in the transaction are sent to apm-server

If i continue in the page, clicking here and there (several odata calls are triggered with these interactions but the page is stil the same) i see all the spans being added again, but as the page is not reloaded all these spans are not sent

Do i miss something? How could we proceed to send these spans to apm-server?
As far as i can see HttpRequests are properly instrumented as all xhr calls are triggered by apm agent library.
Shoud i include some additional event listener to create/send transactions with all these spans?

Any help/example would be apreciated.

BR,
Raul

Allow sampling of transactions while monitoring all errors

Right now sampling is suggested using active: Math.random() < 0.1. The way I read the docs, if I only enable for 10% of users, any errors on the 90% will never be reported to APM.

I would assume that errors is a rare but important thing, and I would like to have ALL errors reported to APM, while only sampling transactions/RUM.

Right now, I have simply set active to true, and the used addFilter to ignore all payload.transactions, as including these for all 100% of users is way too much data to process for our setup.

Add support for distributed tracing

Work is underway to add support for distributed tracing to the API/server:

Tasks:

  • Set the page load traceId, spanId and sampled from configuration options
  • Document config options and cross-origin guide for the servers
  • Document responding to OPTIONS request
  • Document sampling transactions
  • Adopt new traceparent flags
  • Add tests with a backend agent
  • Add whitelist for origins
  • Resolve cross-origin issue with the elastic-apm-traceparent header (whitelist domains) -> Needs more investigation
  • Add the header to unsampled transaction
  • Implement sampling
  • Investigate Chrome Mobile test failure
  • Add a configuration option to set trace id
  • Add tests for XHR patch
  • Implement correct id format for DT
  • Use correct formats for Transaction, Span and Error Ids
  • Add the header to the same origin requests
  • Generate Trace Id

Global DT checklist:

Related:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.