Browser-sync: Strange Bug with <<BS_START>> <<BS_END>> output in riot templates

[fluffywaffles]

You can find the exact code that readily replicates the issue here: https://github.com/skorlir/lucid-goose-nai/tree/1e93618b76da44b2219aa64ee82d3b69d231b157

It's an interesting one.

See that weird output? I'm almost 100% certain that's coming from Browser-Sync.

Now if you take a look at src/tags/projects.tag.jade, you'll see that there's only one project in the array. If I increase the number of projects to 2, everything renders correctly.

And it works with 3.

And it isn't a bug caused just by removing an item from the array...

But now once I'm down to one item again...

Weird, right?

I thought the bug was being introduced at the jade-rendering step. But I switched to pre-rendered templates and the bug persisted.

If you want to reproduce (or try, who knows if it'll happen consistently for someone else), you can download the code at the snapshot tree above and npm i && gulp. Then go to localhost:3000. Then change the number of items in the array in src/tags/projects.tag.jade.

I've seen this type of output before from BrowserSync, but never like this, and never with such a weird reproduction.

Hopefully you'll find time to look into it! In the meantime, I'm just going to try to keep my lists larger than 1. ;)

[fluffywaffles]

Also worth noting: the number of times <<BS_START>> (nonsense) <<BS_END>> is output is directly related to the number of times I hit reload, BEFORE the bug occurs. After the bug has occurred, every reload after that DECREASES the number of nonsenses outputted by one.

[shakyShane]

Do you use window.name anywhere in your app?

[fluffywaffles]

No. window.name? Definitely not intentionally, if I do.

[shakyShane]

Ok, I will take a look at your sample code asap. Basically the 'jibberish' you're seeing is some meta-info that Browsersync stores in the window.name property. When working correctly it should clear its track on page load

[dhoko]

Hi,

I love it.

"<<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":0}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":28}}}<<BS_END>><<BS_START>>{"bs":{"hardReload":true,"scroll":{"x":0,"y":28}}}<<BS_END>>"

cf Barney Stinson

Why not window.___browserSync___.name ? Namespace is a powerfull feature to prevent issues.

2016 and someone is still using a global var without a namespace WTF :-1: It's coming from BrowserSync WTF !!!

So, I tried to fix this in order to make a PR. I failed, too many references of a _lol_ constant, window.name inside both:

• browser-sync-ui
• browser-sync-client

BrowserSyncUI

if (window && NG_ENABLE_DEBUG_INFO.test(window.name)) {
  config.debugInfoEnabled = true;
  window.name = window.name.replace(NG_ENABLE_DEBUG_INFO, '');
}
if (window && !NG_DEFER_BOOTSTRAP.test(window.name)) {
  return doBootstrap();
}
window.name = window.name.replace(NG_DEFER_BOOTSTRAP, '');
angular.resumeBootstrap = function(extraModules) {
  forEach(extraModules, function(module) {
    modules.push(module);
  });
  return doBootstrap();
};

popcorn

You can use an alias inside your own code, it's better ;) Because when you want to upgrade your application no need to use sed :+1:

var BROWSER_SYNC_LOL_GLOBAL_VAR = window.name

BrowserSyncClient

same issue cf code-sync.js

So I change the ref for both and this one [default-config.js L293] and connector.tmpl:

window.___browserSync___ = {};
___browserSync___.io = window.io;
window.io = window.___browserSync___oldSocketIo;
window.___browserSync___oldSocketIo=undefined;
window.___browserSync___.name = '';
___browserSync___.socketConfig = %config%;
___browserSync___.socket = ___browserSync___.io(%url%, ___browserSync___.socketConfig);

(https://github.com/BrowserSync/browser-sync/blob/master/lib/default-config.js#L293) but don't know why inside my App:

window.name === '<DAT BORDEL>'
window.___browserSync___.name === ''

Can move window.name to your own namespace ?
Thank you.

[shakyShane]

We can't use the method you suggest - window.name is a special property that survives a page reload, which is why we use it.

There seems to be a bug though and that needs fixing, but you are incorrect about the usage of namespaces in this case.

[shakyShane]

also the first example directly from Angular JS

[dhoko]

Wut I don't understand you cannot use something else, such as window.__browserSync__name (_not the object_) ?

[dhoko]

o/ wooo didn't know that, thanks dude ! TIL window.name good to know.
Ok so my issue is useless :-1:

Mea culpa

_You should add a comment about it for others like me_ ;)

[shakyShane]

I think the original issue from @skorlir still stands, however :)

[bolaum]

See #1364.