elastic / apm-agent-rum-js Goto Github PK
View Code? Open in Web Editor NEWElastic APM Real User Monitoring JavaScript agent
Home Page: https://www.elastic.co/guide/en/apm/agent/rum-js/current/index.html
License: MIT License
Elastic APM Real User Monitoring JavaScript agent
Home Page: https://www.elastic.co/guide/en/apm/agent/rum-js/current/index.html
License: MIT License
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
timeToComplete
Please add support for secret token.
Related: #56
In order to distinguish between different deployment environments (staging, production, etc), need to add service.env
to the configuration.
In order to avoid inaccuracies in the client's system time make it into APM data, we should set the timestamp of the transaction in the apm-server. Starting in 6.3.0 apm-server will set a timestamp if it is not available on the transaction.
In some browsers (e.g. IE9) navigation and resource timing apis are exposed in timestamps instead of DOMHighResTimeStamp therefore the generated spans have incorrect start and end.
In order to keep the span name short we remove the query string part of the http request url, however we also need to store the full url in the span context.
If there are no changes to the specifications, this will imply no changes to the agent
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.
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
, we can parse this string and show user friendly valuesWork 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.
Instrumentation of XMLHttpRequest
.
Implement lightweight OpenTracing API compatibility bridge.
Should align with elastic/apm#32
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
It returns http status 0, potentially a cross-origin issue.
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:
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",
TransactionService
, Transaction
, Span
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.
Apm server will require span count field through elastic/apm-server#1241 in v2 intake.
Need to provide documentation on which technologies are supported.
Some examples of similar docs in other projects:
https://www.elastic.co/guide/en/apm/agent/ruby/current/supported-technologies.html
https://www.elastic.co/guide/en/apm/agent/go/current/supported-tech.html
https://www.elastic.co/guide/en/apm/agent/java/current/supported-technologies-details.html
Debugging e2e tests when they fail on travis is hard, printing the logs can help with that.
active
(with sampling example)logLevel
serverStringLimit
flushInterval
errorThrottleLimit
errorThrottleInterval
transactionThrottleLimit
transactionThrottleInterval
sendPageLoadTransaction
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.
Some transactions can be lost if the user closes the window in the gap between they are created and sent (500ms). A way around this is to handle beforeunload
and force a queue flush.
Work is underway to add support for distributed tracing to the API/server:
Tasks:
elastic-apm-traceparent
header (whitelist domains) -> Needs more investigationGlobal DT checklist:
transaction.span_count.started
(elastic/apm-server#1241)Related:
Other than transaction_id
, trace_id
and parent_id
needs to be recorded as well!
Postponed:
TransactionService.sendPageLoadMetrics
TransactionService.startTransaction
with the type set to page-load
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.
Related: elastic/apm-server#1237
Further discussion here.
The following context fields are not defined in the apm-server schema and they should be defined if we decide to lock down the allowed fields under context:
{
page: { referer: "", url: "" }
}
performance.mark
.A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.