Chrome Debugger can't access variable of static callback - javascript

I have a static class with only static method written in javascript. The pourpose of the calss and the method is to be a callback container for a certain kind of ajax call.
From the HTML page, sometimes an ajax call is raised and the static method of static class described above, is passed as callback argument.
All work just fine, i also remeber to have debugged the callback previously, but after the last chrome update, even if i can debug the callback, i can't see variable value.
I can't access variable value (when a breackpoint in the static callback is hit, so in the same scope of breakpoint) with the console nor with the watch.
This is the callback class with static method (it's a bit triky, but i prefer not simplify it because maybe the problem reside in the callback code)
/**
* List of defaults callback
* */
class CallbackDefaults {
/**
* Callback used to update price of priced articles
* #param {object} data Page of ArticleDto with actual prices
*/
static priceUpdateCallback = function (data) {
var callbackSource = "getPricesAndStock_callback";
try {
if (!data || data.Success == false || !data.ReturnData || !data.ReturnData.PageContent && data.ReturnData.PageContent.length > 0)
return;
for (var index = 0; index < data.ReturnData.PageContent.length; index++) {
var currentArticle = data.ReturnData.PageContent[index];
var item = document.querySelector(".cgi-priced[ref-code='" + currentArticle.Code + "']");
if (item && currentArticle && currentArticle.Attributes && currentArticle.Attributes.PriceData && currentArticle.Attributes.PriceData.TaxedPrice) {
var priceData = currentArticle.Attributes.PriceData;
var finalPrice = globals.isVatIncluded ? priceData.TaxedPrice : priceData.CalculatedPrice;
let precetageBadge = item.querySelector(".discount-percentage") || { textContent: "" };
let originalPrice = item.querySelector(".original-price") || { textContent: "" };
let discountedPrice = item.querySelector(".discounted-price") || { textContent: "" };
let buyButton = item.querySelector(".buy") || { disabled: false };
var percentage = globals.trustAS400Perc ?
finalPrice.DiscountPercentage :
finalPrice.CalculatedDiscountPercentage;
var percentageString = globals.trustAS400Perc ?
finalPrice.DiscountPercAsString :
finalPrice.CalculatedDiscountPercAsString;
if (!percentage || percentage <= 0)
precetageBadge?.classList?.add("d-none");
else
{
if (precetageBadge?.classList?.contains("d-none"))
precetageBadge?.classList?.remove('d-none');
precetageBadge.textContent = percentageString || "";
}
if (finalPrice.NetPriceAsStringWithCurrency == finalPrice.GrossPriceAsStringWithCurrency)
originalPrice?.classList?.add("d-none");
else
{
originalPrice.textContent = finalPrice.GrossPriceAsStringWithCurrency || "";
}
if (finalPrice.NetPriceAsStringWithCurrency)
discountedPrice.textContent = finalPrice.NetPriceAsStringWithCurrency || "";
else
buyButton.disabled = true;
//update quantity limit
var inSpinner = $(item).find("input[meta=original]");
if (inSpinner && inSpinner.length == 1) {
var updatedQuantity = currentArticle?.Attributes?.StockInformation?.AvailableQuantityFromCgi;
if (updatedQuantity && updatedQuantity > 0) {
inSpinner.inputSpinner("destroy");
inSpinner[0].max = updatedQuantity;
inSpinner.inputSpinner(globals.inputSpinnerConf);
}
}
}
}
}
catch (callbackErr) {
ClientLogManager.logError(callbackSource, callbackErr);
Toaster.getToast("tstTemplatePriceError");
}
};
}
In JQuery ajax success function i call the callback in the following way :
success: function (data) {
try
{
CallbackDefaults.priceUpdateCallback(data);
}
catch (callErr) {
ClientLogManager.logError(source, callErr)
}
}
When i place a breack point into priceUpdateCallback, for example on the following line :
var callbackSource = "getPricesAndStock_callback";
And the run code, the breakpoint will be hit, but i can't see the actual value of 'callbackSource' variable.
I can't get the value hovering, placing the variable in the watch or writing it into the console.
If i try to access the variable through console i get this error :
VM255:1 Uncaught ReferenceError: callbackSource is not defined
at eval (eval at priceUpdateCallback (CallbackDefaults.js:1:1), <anonymous>:1:1)
at priceUpdateCallback (CallbackDefaults.js:13:30)
at Object.success (ConnectionManager.js:169:25)
at c (jquery-3.6.0.min.js:2:28327)
at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2:29072)
at l (jquery-3.6.0.min.js:2:79901)
at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2:82355)
I can't understand why, because i remember to have debugged that function before, and seems strange that the new chrome version just introduce a so blatant bug.
--Edit :
i am using Chrome 98.0.4758.102 (Official Build) (64-bit)

Related

MongoDB Scheduled Trigger Save Error -- What to Return?

This problem is very annoying. So, I am making a scheduled trigger run every 24 hours. It simply gets items from one collection does some data processing then appends information to another collection. The functioning code works even when the function runs. But it will not let me save because there are "runtime" errors? Even though it was executed perfectly and returned.
Console Error
> result (JavaScript):
EJSON.parse('{"$undefined":true}')
I suppose this has something to do with returning. but when I return null I get this:
> result:
null
> result (JavaScript):
EJSON.parse('null')
when trying to save I get this at the top of the page:
runtime error during function validation
Function Code:
exports = async function() {
const usersCol = context.services.get("SchoologyDashCluster").db("SchoologyDashApp").collection("users");
const gradesCol = context.services.get("SchoologyDashCluster").db("SchoologyDashApp").collection("grades");
var usersCusor = await usersCol.find( ).toArray();
var gradesCusor = await gradesCol.find( ).toArray();
let insert = [];
for (let i = 0; i < usersCusor.length; i++) {
var user = usersCusor[i];
var userSavedGrades = gradesCusor[i].grades
var currentGrades = await getGrades(user.schoologyUID, user.consumerKey, user.secretKey);
var lastGraded = NaN;
let index = gradesCusor[i].grades.length - 1;
while (true) {
if (gradesCusor[i].grades[index].changed == 1) {
lastGraded = index;
break
}
index = index - 1;
}
console.log(lastGraded)
if (userSavedGrades[lastGraded].grades.ga == currentGrades.ga){
currentGrades = { changed : 0, time: new Date().getTime()};
} else {
currentGrades = {changed : 1, grades: currentGrades, time : new Date().getTime()};
}
gradesCol.updateOne(
{"user" : user._id},
{"$push" : {"grades" : currentGrades}}
)
}
// return usersCol.find( );
return null;
};
The answer was simple and now I feel ignorant. Instinctual I put the module imports at the top of the document. However this is incorrect and they need to be placed in the exports function, like so:
exports = function (x,y,z) {
const http = context.http;
return;
}

Function not running after page load

I have the following function. This function works perfectly when I call it using a click event listener. However, I want it to execute after the page has finished loading.
I used to use the following to call the function after page load:
window.addEventListener("load",compSummary);
It used to work perfectly. But I recently changed some stuff in my code, and now it doesn't work anymore. As mentioned: The function works if I use a different event listener, but not if I try to load it after the page has finished loading.
Is there anything in my code that can prevent it from working? Or should I try a different way to run the function after page load?
function compSummary() {
var e = [];
summaryWidgetList.innerHTML = "",
document.querySelectorAll(".component").forEach(t => {
var o = t.querySelector(".component_name"),
n = t.querySelector(".component_text"),
r = t.querySelector(".component_heading"),
m = t.querySelector(".component_product"),
c = t.querySelector(".component_qty");
var i = null == n ? o.textContent.trimStart() :
null == c ? n.textContent : m.getAttribute("data-qty") + " x " + n.textContent;
if("None" != i) {
var u = document.createElement("li");
u.innerHTML = "<b>" + r.textContent + "</b>: " + i,
summaryWidgetList.appendChild(u),
e.push(i)
}
}),
PriceField.value = document.querySelector(".comp-price").textContent,
SummaryField.value = [...e].join("\n"),
document.querySelector("#comp-price-display").textContent = document.querySelector(".Price-amount").textContent
}
UPDATE:
Sorry, didn't see this in the console originally. I have no idea what it means though.
The console is showing the following:
Uncaught TypeError: can't access property "textContent", o is null
And it points to the following line:
var i = null == n ? o.textContent.trimStart() :
null == c ? n.textContent : m.getAttribute("data-qty") + " x " + n.textContent;

Trying to get if statement to determine 'context' of addon app

I'm working this Google Workspace Add-on app, I'm trying to get a function that sets the appropriate function for calling the document id depending on if it's called in the context of drive, docs, sheets, etc.
function checkContext(event){
var itemId;
Logger.log(event)
if (DocumentApp.getActiveDocument().getId() != null && DocumentApp.getActiveDocument().getId() != undefined)
{
itemId = DocumentApp.getActiveDocument().getId();
Logger.log(itemId);
}
else if (e.drive.selectedItems[0].id != null && e.drive.selectedItems[0].id != undefined){
var itemId = e.drive.selectedItems[0].id;
Logger.log(itemId);
}
else if (SpreadsheetApp.getActive().getId() != null && SpreadsheetApp.getActive().getId() != undefined){
var itemId = SpreadsheetApp.getActive().getId();
Logger.log(itemId);
}
else {
var itemId = SlidesApp.getActivePresentation().getId();
Logger.log(itemId);
}
As you can see, I've attempted to achieve this with a nested if statement, where the itemId variable is set to the appropriate context depending on which getId() does NOT fail. Despite my best efforts, I always get the
TypeError: Cannot read property 'getId' of null
error every time the my function is triggered.
This is the solution I ended up with, using Cooper's insight about commonEventObjects. This function returns the a string for getting a document ID in the appropriate context. The returned string can then be run with eval()to return a doc id in function with the same event.
function serveDocCall(event){
var context = event.commonEventObject.hostApp
var docCall;
if (context == "DOCS")
{docCall = 'DocumentApp.getActiveDocument().getId()';
Logger.log(docCall);}
else if (context == "DRIVE"){
var docCall = 'event.drive.selectedItems[0].id';
Logger.log(docCall);}
else if (context == "SHEETS"){
var docCall = 'SpreadsheetApp.getActive().getId()';
Logger.log(docCall);}
else {
var docCall = 'SlidesApp.getActivePresentation().getId()';
Logger.log(docCall);}
return docCall;
}

Getting Error: "Cannot read property 'length' of undefined" only in production setup

vue Version: 2.1.1
I am getting following error, only in production setup:
TypeError: Cannot read property 'length' of undefined
at s.updated (vue.common.js:6077)
at we (vue.common.js:2754)
at De (vue.common.js:2831)
at Array. (vue.common.js:473)
at e (vue.common.js:422)
This works perfectly in the local setup, but only in production I get this error. When I go to s.updated (vue.common.js:6077) line from chrome console, I get following code:
var TransitionGroup = {
props: props,
render: function render (h) {
var tag = this.tag || this.$vnode.data.tag || 'span';
var map = Object.create(null);
var prevChildren = this.prevChildren = this.children;
var rawChildren = this.$slots.default || [];
var children = this.children = [];
var transitionData = extractTransitionData(this);
for (var i = 0; i < rawChildren.length; i++) {
var c = rawChildren[i];
if (c.tag) {
if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
children.push(c);
map[c.key] = c
;(c.data || (c.data = {})).transition = transitionData;
} else if (process.env.NODE_ENV !== 'production') {
var opts = c.componentOptions;
var name = opts
? (opts.Ctor.options.name || opts.tag)
: c.tag;
warn(("<transition-group> children must be keyed: <" + name + ">"));
}
}
}
if (prevChildren) {
var kept = [];
var removed = [];
for (var i$1 = 0; i$1 < prevChildren.length; i$1++) {
var c$1 = prevChildren[i$1];
c$1.data.transition = transitionData;
c$1.data.pos = c$1.elm.getBoundingClientRect();
if (map[c$1.key]) {
kept.push(c$1);
} else {
removed.push(c$1);
}
}
this.kept = h(tag, null, kept);
this.removed = removed;
}
return h(tag, null, children)
},
beforeUpdate: function beforeUpdate () {
// force removing pass
this.__patch__(
this._vnode,
this.kept,
false, // hydrating
true // removeOnly (!important, avoids unnecessary moves)
);
this._vnode = this.kept;
},
updated: function updated () {
var children = this.prevChildren;
var moveClass = this.moveClass || ((this.name || 'v') + '-move');
if (!children.length || !this.hasMove(children[0].elm, moveClass)) { // <=== This is the line throwing error
return
}
I have lot of code in the repo with involvement of multiple components so not sure what code to put here which can help the community debug.
Code requested:
I am only using transition-group in one of the component, which is being used just before navigating to this page:
<transition-group tag="ul" name="prod-covered" class="prod-box">
<li :key="index" v-for="(prod, index) in prods" v-if="prod" class="prod">{{prod}}</li>
</transition-group>
Here prods is static data which is being passed as props to that component.
For me, I had accidentally ended up with 1 child in a transition-group, and this would cause the error. I only used transition-group if there was more than one child in it, and that solved the problem.
The error would only show up once we tried to go to a different page, triggering an update().
I upgraded to latest version: 2.2.1 and not seeing that error after upgradation, seems they might have fixed in it this version.
Make sure children exist before accessing the length.
Change
if (!children.length || !this.hasMove(children[0].elm, moveClass)) {
to
if (!children || !children.length || !this.hasMove(children[0].elm, moveClass)) {

Checking for undefined causes undefined error

Trying to check if some variables contain things, because they throw errors and break the ajax function when they don't. Problem is that just checking if data[2][0] contains something causes the following error:
Uncaught TypeError: Cannot read property '0' of undefined
I'd very much prefer not to check this in a previous stage. How do I check if data[2][0] is defined, without causing the actual checking to break my js?
Code:
//ajax ^
success: function(data){
var xp = data[0][0]; //Contains a string
var yp = data[1][0]; //Contains a string
var zp = data[2][0]; //Is not set, fails here
if(xp === ''){ //Tried using null & undefined here aswell
//Do nothing
} else {
var one = data[0][0];
var oneH = data[0][1];
var oneS = data[0][2];
}
if(yp === ''){
//Do nothing
} else {
var two = data[1][0];
var twoH = data[1][1];
var twoS = data[1][2];
}
if(zp === ''){
//Do nothing
} else {
var three = data[2][0];
var threeH = data[2][1];
var threeS = data[2][2];
}
//ajax continues v
Any help will be much appreciated.
You should check if a variable is undefined using typeof, not with an equality check against '':
if (typeof myVar === 'undefined')
You can also check if a variable is an array using Array.isArray(myVar)
I would check to see if data[2] exists first, and then redefine zp if it does.
var zp = data[2];
if (zp) zp = zp[0];

Categories