Comments (21)
Hi @annitsb , do you have a public site that you could share that reproduces the issue?
Boomerang SPA monitoring doesn't capture scroll events. Could you describe the workflow that happens when a scroll occurs? History API calls, XHRs, etc.
from boomerang.
Hi QueryMetrics,
We don't have site which is public, it is internal application. When i do slow scroll i dont see negative value but when i do scrolling fast, i am able to reproduce negative values for t_done, t_page, rt.tt
from boomerang.
@annitsb do you have your own scroll handler that fires XHRs or something else when scrolls happen? Boomerang itself doesn't look at scrolling so something else is firing network transitions. If your site is doing something during scroll, it may be useful to implement some kind of throttling or debouncing for the scroll event.
See https://css-tricks.com/debouncing-throttling-explained-examples/ for some information.
from boomerang.
On scroll, whenever switched to different tab, we have this code in application history.replaceState
from boomerang.
@annitsb please include the code that you mention.
from boomerang.
angular SPA application have below java script function , this function will be called on SCROLL on page.
addAnchorToUrl(t) {
let a = window.location.href.split("#")[0] + "#!" + t;
history.replaceState(null, null, a),
this.anchor = t
}
And in boomerang i can see below code in History.js plugin
if (impl.monitorReplaceState && typeof history.replaceState === "function") {
history.replaceState = (function(_replaceState) {
return function(state, title, url) {
var fromUrl = BOOMR.window.document.URL, toUrl = fromUrl;
As i said initially i see negative value only when i scroll page fast, if i scroll page slowly and give some pause, then i get correct data.
from boomerang.
Will look into why this is happening, but just FYI, there is a bug in your code. Using location.href
doesn't work well for #
across browsers as Safari will URL encode it. You should use document.URL
instead.
from boomerang.
we are currently checking for Chrome and Edge. Issue is more frequently reproducible in Chrome
from boomerang.
Hi bluesmoon, Any update on this?
from boomerang.
No, I don't see anything in the code that would cause the values to be negative.
from boomerang.
Ok, so what will happen if user set history.replacestate. how beacon fired?. and please help me in understanding how rt.tstart and rt.end values are assigned? because i see rt.end is less than rt.tstart. and t_done = rt.end-rt.tstart which gives negative value. i am curious to know how rt.end can be less than rt.tstart
from boomerang.
when you call history.replaceState
or history.pushState
, it calls a function in the history.js
plugin. This in turn fires a route_change
in the spa.js
plugin. This sets the start time, and then sets a mutation observer to watch for changes to the DOM or network events (auto-xhr.js
). Once everything is stable, it fires a sendResource
which calculates the end time. Throughout this process, the object with the start time is passed through from call to call, so the end time should always be >= the start time. I can't tell why it's not just by inspecting the code.
from boomerang.
Thank you bluesmoon. I will do some analysis around application and check end time is less than start time.
from boomerang.
Can you run a debug version of boomerang and post the console logs when you see a negative timer?
from boomerang.
how to run debug version of boomerang
from boomerang.
Hello @annitsb
The build process automatically creates a debug build.
After you build Boomerang, then could you check the build folder for file that end with -debug.js
?
You should have something similar to:
from boomerang.
Hi ceckoslab,
Please find console logs
console_logs.txt
from boomerang.
@annitsb very interesting ... your boomerang is called boomerang-history.min.js
.
I see some debug info but I am not sure that this is really a debug build because I would expect the log to be much more verbose.
Could you please share unminified debug version from your boomerang?
from boomerang.
Please find attachment. It was not allowing to attach javascript, so i changes ext to txt
boomerang.txt
from boomerang.
any update on this issue?
from boomerang.
Hello again @annitsb
I looked at the share log and the Boomerang build but I still can't find why this could be happening.
The log that you shared previously seems to be filtered. Could you send a full log only with Boomerang messages?
Also is it possible to share the code where you call BOOMR.init
in your application?
from boomerang.
Related Issues (20)
- Which event should I subscribe to control header value? HOT 1
- Can we use Boomerang to send custom metrics/logs? HOT 1
- Bug: Trying to read metric from plugin that is undefined HOT 1
- How does the Cache-Reload Plugin works HOT 3
- API Key Disclosure HOT 2
- how about to move Plugins to webworker
- Integrate Plugins into asynchronous loader snippet HOT 5
- Continuity Visually Ready (c.tti.vr) gradually increased in Chromium 105 and 106 HOT 3
- What event should I subscribe to to know when the fetch is complete HOT 2
- Global collision issue HOT 2
- about web vital score HOT 1
- How to know user spent time on page HOT 6
- soft navigation not stop
- disable page unload beacon HOT 2
- Potential forced style layout HOT 5
- What is the use of the last_location function in spa plugin HOT 2
- SPA beacon is blocked if link href value is updated after soft navigation HOT 2
- Increment in TTI value for long task
- Critical vulnerabilities in the project HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from boomerang.