Random syntax error in js script, what causes can it be? - javascript

i'm getting random syntax errors in js files, sometimes in my bundle, sometimes other files, like fabric.min.js which i know works fine, and i can't figure it out.
For example lately i got :
bundle.js Uncaught SyntaxError: Unexpected token ) at 2:261833
which point to this function :
return function (t, n, a, o) {
if (!e(n)) {
var u, l = !1, h = [];
if (e(t)) l = !0, f(n, h); else {
var d = r(t.nodeType);
if (!d && sr(t, n)) O(t, n, h, null, null, o); else {
if (d) {
if (1 === t.nodeType && t.hasAttribute(I) && (t.removeAttribute(I), a = !0), i(a) && A(t, n, h)) return S(n, h, !0), t;
u = t, t = new pt(c.tagName(u).toLowerCase(), {}, [], void 0, u)
}
var p = t.elm, m = c.parentNode(p);
if (f(n, h, p._leaveCb ? null : m, c.nextSibling(p)), r(n.parent)) for (var g = n.parent, y = v(n); g;) {
for (var _ = 0; _ < s.destroy.length; ++_) s.destroy[_](g);
if (g.elm = n.elm, y) {
for (var x = 0; x < s.create.length; ++x) s.create[x](ar, g);
var k = g.data.hook.insert;
if (k.merged) for (var T = 1; T < k.fns.length; T++) k.fns[T]()
} else ir(g);
g = g.parent
}
r(m) ? w([t], 0, 0) : r(t.tag) && b(t)// error here at 0)
}
}
return S(n, h, l), n.elm
}
r(t) && b(t)
}
which is a function inside vue, i think it's the patch function.
When browser is restarted, it fixes the issue for some times, but in the end it comes back.
I was thinking about SRI but since we use file:// protocol (app is loaded locally in a webview inside android), i can't do that.
I'm tracking this issue for weeks without success,
how can a valid file become invalid and trigger syntax error ? can it be some cache issue ?
I know it's kind of a broad question, and i don't have much code to show, if you have any idea on how i could debug that or what could be the culprit here, like filesystem/hardware issue.
Thanks.

Related

Function call and definition have different names in stack trace

I was trying to understand the JavaScript on a website when I found a weird phenomenon. I enabled breakpoints for XHRs in devtools and was reading through the stack trace when it hit the breakpoint. The issue is this.
There would be a function definition that is something like:
function foo(someObject) {
//Some code
}
and when I went one more step up the stack trace to see the call to this function, I'd see something like:
bar(someobject);
The name of the call doesn't match the definition! Someone please explain how this works. Some references to articles would be appreciated too.
This may be a rookie question so thank you for the patience.
Edit 1 - Here are some screenshots:
This is at the last item in the stack. The code paused at line 1829. This is inside the function named _() starting at line 1805. If I jump one step back in the stack trace,
it jumps to line 268 of the same js file, where the function call is. But the call is to t.scheduleFn(), not to _(). I have checked and verified that the object passed in is identical to the object received at the definition. Please drop a comment if you need any more info.
If you need to see this live, please go to this website, turn on breakpoints for XHRs, enter any number into the input field, click on 'Get OTP' and look at the stack trace.
Edit 3 - Here's some of the code:
Please read the comments that I've added.
This is the function inside which the code paused:
function _(e) { //Note that this is the function name
const o = e.data,
c = o.target;
c[i] = !1,
c[h] = !1;
const l = c[r];
d || (d = c[s], g = c[a]),
l && g.call(c, 'readystatechange', l);
const u = c[r] = () =>{
if (c.readyState === c.DONE) if (!o.aborted && c[i] && 'scheduled' === e.state) {
const n = c[t.__symbol__('loadfalse')];
if (n && n.length > 0) {
const r = e.invoke;
e.invoke = function () {
const n = c[t.__symbol__('loadfalse')];
for (let t = 0; t < n.length; t++) n[t] === e && n.splice(t, 1);
o.aborted || 'scheduled' !== e.state || r.call(e)
},
n.push(e)
} else e.invoke()
} else o.aborted || !1 !== c[i] || (c[h] = !0)
};
return d.call(c, 'readystatechange', u),
c[n] || (c[n] = e),
T.apply(c, o.args), //The code paused here.
c[i] = !0,
e
}
If I went one step back to see the call to the function _() I see this:
scheduleTask(e, t) {
let n = t;
if (this._scheduleTaskZS) this._hasTaskZS && n._zoneDelegates.push(this._hasTaskDlgtOwner),
n = this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt, this._scheduleTaskCurrZone, e, t),
n || (n = t);
else if (t.scheduleFn) t.scheduleFn(t); //The debugger shows that this is where the call to _() happened.
else {
if (t.type != S) throw new Error('Task is missing scheduleFn.');
k(t)
}
return n
}
My question is simply, how can a call to t.scheduleFn() go to _(). Hope this is clear.

What does ||| mean in JavaScript?

I've googled this and searched through the JavaScript documentation but I can't find any mention of this operator: a |ǀ| b
When I try the operator on its own I get an error but when I run the following code it runs perfectly fine:
var a, b = 0; tex = '\u0076\u0061r'
var players, score = 0, x, y, z = 1;
function f(s) {
var t = 0, r = 0;
var js = 'window';
while (t == r) {
if (t == 1) {
r = s.length;
return false;
} else {
t += 1;
} for (var i = 0; i < 20; i++) {
r = 20;i+=9000;eval(s); x = 50; y =+ 8;
z = -20; y = s;
}
if (r < 20) {
return t + 2;
}}
return true;
} while (f(tex + ' \u01C0='+'0') && score < 900) {
score = 9000.0001;}eval(y); a = 1; b += a;
x = 50;{y =+ 8;
}
// testing:
document.writeln(false |ǀ| false); // 0
document.writeln(false |ǀ| true); // 1
document.writeln(true |ǀ| false); // 1
document.writeln(true |ǀ| true); // 1
Changing the values of a and b would suggest it works like || but I just can't work out why it works with the previous code, but doesn't work on its own. Does anyone know whats going on here?
It's not an operator. It's the | operator, twice, with a "Latin letter 'Dental Click'" character in between. That character is valid in JavaScript identifiers. Thus the expression:
false |ǀ| false
(probably) means the same thing as
false | undefined | false
because there's no real variable called ǀ. (edit — Actually there probably is, otherwise you'd get a reference error.)
The | (bitwise-OR) operator treats its operands as numbers, and both false and undefined become 0.
That function f() is what's defining a window property called ǀ.

javascript + mocha: probably a closure issue with functions declared inside a for loop

To learn javascript, I implement and test classic algorithms with it.
Here is my attempt at implementing binary search and tests for it:
var assert = require('assert')
function binsearch (xs, v) {
if (xs === undefined || xs.length === 0) { return null }
var lo = 0
var hi = xs.length - 1
while (lo <= hi) {
var i = (lo + hi) / 2 | 0
if (xs[i] === v) {
return i
} else if (v < xs[i]) {
hi = i - 1
} else if (v > xs[i]) {
lo = i + 1
}
}
return null
}
var check_bsearch = function (bsearch, xs, x, i) {
it(bsearch.name + ' [' + xs + '] ' + x + ' ' + i, function () {
assert.equal(bsearch(xs, x), i)
})
}
describe('Test binsearch', function () {
describe('on a sorted array', function() {
var xs = []
for (var i = 0; i < 2; ++i) {
xs[i] = 2 * i
for (var j = 0; j <= i; ++j) {
check_bsearch(binsearch, xs, 2 * j, j)
check_bsearch(binsearch, xs, 2 * j + 1, null)
check_bsearch(binsearch, xs, -1, null)
check_bsearch(binsearch, xs, -2, null)
check_bsearch(binsearch, xs, 2 * i + 1, null)
check_bsearch(binsearch, xs, 2 * i + 2, null)
}
}
})
})
In order to reproduce what I am about to say, copy the code above into some bsearch.js file, install mocha.js with something like sudo npm install -g mocha and finally run the file: mocha bsearch.js
One test should be failing: the one with xs = [0], x = 2 and expected result of null. If you recreate this test separately though, it will pass.
I am suspecting that this is a closure issue. You might have noticed that I am already using a helper function check_bsearch to get the expected closure environment. However, I am clearly missing something. How do I fix the tests?
Arrays are passed by reference. What happens is that as you loop you modify the xs array you pass to your functions, and by the time the tests actually run, they all get the same value. You should copy the array so that each test gets a snapshot of its value at the time it was called. It can be as simple as:
var check_bsearch = function (bsearch, xs, x, i) {
xs = xs.slice(); // Make a private copy of xs.

Why does setting the pixel color using `color` give such bad performance

I am writing a physics simulation and want to postprocess the results using P5*JS (a JS implementation of the Processing language).
I am using the following piece of code to set the color of each pixel:
colorMode(RGB,1);
for (var x = 0; x < nX; x++) {
for (var y = 0; y < nY; y++) {
var id = getIdx(x,y);
var v = vArray[id]; //range=[0,1]
var c = color(v, 0, 1-v);
set(x, y, c);
}
}
updatePixels();
It is very straightforward; i get a value from an array vArray which is in the range [0,1]. A color c is is calculated using color() and pixel [x,y] is set to c.
Unfortunately, this has very bad performance compared to the rest of my code; color() takes approximately 60% of the CPU time:
It is a huge bottleneck compared to the rest of the code which should be the bottleneck considering it is doing heavy work. If i move color() out of the loop the code runs efficiently again (ofcours without coloring the pixels):
Does anyone know why color() is so inefficient? How can I avoid this inefficiency, either by modifying the use of color() or perhaps by setting the pixel color in some other way?
Edit: As it turns out color() contains many if checks. I found much better performance could be achieved by passing an array containing color data to set() directly:
for (var x = 0; x < nX; x++) {
for (var y = 0; y < nY; y++) {
var id = getIdx(x,y);
var v = vArray[id]; //range=[0,1]
var c = [255*v, 0, 255*(1-v), 255];
set(x, y, c);
}
}
updatePixels();
colorMode() does not need to be explicitly set anymore.
To understand what the color() function is doing, the best thing you can do is go to the source.
Here is the start of the color() function:
p.color = function(aValue1, aValue2, aValue3, aValue4) {
// 4 arguments: (R, G, B, A) or (H, S, B, A)
if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef && aValue4 !== undef) {
return color$4(aValue1, aValue2, aValue3, aValue4);
}
// 3 arguments: (R, G, B) or (H, S, B)
if (aValue1 !== undef && aValue2 !== undef && aValue3 !== undef) {
return color$4(aValue1, aValue2, aValue3, colorModeA);
}
// 2 arguments: (Color, A) or (Grayscale, A)
if (aValue1 !== undef && aValue2 !== undef) {
return color$2(aValue1, aValue2);
}
// 1 argument: (Grayscale) or (Color)
if (typeof aValue1 === "number") {
return color$1(aValue1);
}
// Default
return color$4(colorModeX, colorModeY, colorModeZ, colorModeA);
};
That then calls the color$4() function:
function color$4(aValue1, aValue2, aValue3, aValue4) {
var r, g, b, a;
if (curColorMode === PConstants.HSB) {
var rgb = p.color.toRGB(aValue1, aValue2, aValue3);
r = rgb[0];
g = rgb[1];
b = rgb[2];
} else {
r = Math.round(255 * (aValue1 / colorModeX));
g = Math.round(255 * (aValue2 / colorModeY));
b = Math.round(255 * (aValue3 / colorModeZ));
}
a = Math.round(255 * (aValue4 / colorModeA));
// Limit values less than 0 and greater than 255
r = (r < 0) ? 0 : r;
g = (g < 0) ? 0 : g;
b = (b < 0) ? 0 : b;
a = (a < 0) ? 0 : a;
r = (r > 255) ? 255 : r;
g = (g > 255) ? 255 : g;
b = (b > 255) ? 255 : b;
a = (a > 255) ? 255 : a;
// Create color int
return (a << 24) & PConstants.ALPHA_MASK | (r << 16) & PConstants.RED_MASK | (g << 8) & PConstants.GREEN_MASK | b & PConstants.BLUE_MASK;
}
This function has if statements, rounding, then bit shifting. This is "more work" than your collide() function. At its core, that's why this is "taking more time".
But that's not saying that the color() function is a "bottleneck" or "inefficient". You're calling the color() function for every single pixel in your image, which is pretty much guaranteed to take up more CPU than anything else.
You might try to think about alternative approaches: do you really need to do this for every single pixel? Do you really need to do this every single frame?
But really, if you aren't noticing any problems with your framerate, then this is a non-issue. It seems to bother you that the color() function is taking more CPU time, but I would argue that you're focusing on the wrong thing. Premature optimization is the root of all evil, and all that.

visual studio vs filezilla for publishing website [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
My first Question:Which is better publish a web site from visual studio,or upload it by filezilla?
I didn't try any of them but someone told me when using filezilla:when I try to access my website, i get a file listing and when i try to view one of them, i just get a html text version of my pages.
but then again he said filezilla keeps the website even if it goes offline,is visual studio also the same?
And my SECOND Questin:
This is a jquery or javascript function?am I right?(which one?)
I saw it in a source code of a site,why does it look strange?I can't understand it,it has been encrypted?how can I turn it to sth which is more understandable?
(function (a, b) {
function c(a) { return K.isWindow(a) ? a : a.nodeType === 9 ? a.defaultView || a.parentWindow : !1 } function d(a) { if (!cl[a]) { var b = H.body, c = K("<" + a + ">").appendTo(b), d = c.css("display"); c.remove(); if (d === "none" || d === "") { cm || (cm = H.createElement("iframe"), cm.frameBorder = cm.width = cm.height = 0), b.appendChild(cm); if (!cn || !cm.createElement) cn = (cm.contentWindow || cm.contentDocument).document, cn.write((H.compatMode === "CSS1Compat" ? "<!doctype html>" : "") + "<html><body>"), cn.close(); c = cn.createElement(a), cn.body.appendChild(c), d = K.css(c, "display"), b.removeChild(cm) } cl[a] = d } return cl[a] } function e(a, b) { var c = {}; return K.each(cr.concat.apply([], cr.slice(0, b)), function () { c[this] = a }), c } function f() { cs = b } function g() { return setTimeout(f, 0), cs = K.now() } function h() { try { return new a.ActiveXObject("Microsoft.XMLHTTP") } catch (b) { } } function i() { try { return new a.XMLHttpRequest } catch (b) { } } function j(a, c) { a.dataFilter && (c = a.dataFilter(c, a.dataType)); var d = a.dataTypes, e = {}, f, g, h = d.length, i, j = d[0], k, l, m, n, o; for (f = 1; f < h; f++) { if (f === 1) for (g in a.converters) typeof g == "string" && (e[g.toLowerCase()] = a.converters[g]); k = j, j = d[f]; if (j === "*") j = k; else if (k !== "*" && k !== j) { l = k + " " + j, m = e[l] || e["* " + j]; if (!m) { o = b; for (n in e) { i = n.split(" "); if (i[0] === k || i[0] === "*") { o = e[i[1] + " " + j]; if (o) { n = e[n], n === !0 ? m = o : o === !0 && (m = n); break } } } } !m && !o && K.error("No conversion from " + l.replace(" ", " to ")), m !== !0 && (c = m ? m(c) : o(n(c))) } } return c } ...
it countinues
Your friend told you non-sense or you understood it that way. There's more than plain file transfer in VS deploy solution (like compilation of your source code into a dll for example), that can be fine tuned and so. Filezilla on its side is just plain ftp : you send the files you wish to a server.
You're not supposed to ask 2 questions at the same time, but still, to your second question :
this looks a lot like javascript, and it probably was minimized. This is a technique in which a parser replaces variable names by short names (letters), removes whitespaces and line feeds, etc in order to make the file smaller. Oh and JQuery is actually a javascript framework so there's no big difference between both.

Categories