Develop Reference

How to check internet connection using javascript and asyn functioon?

I found this sample code in the following websites:
github
freecodecamp
to help determine the connection status between client side and the internet.
const checkOnlineStatus = async () => {
try {
const online = await fetch("/1pixel.png");
return online.status >= 200 && online.status < 300; // either true or false
} catch (err) {
return false; // definitely offline
}
};
setInterval(async () => {
const result = await checkOnlineStatus();
const statusDisplay = document.getElementById("status");
statusDisplay.textContent = result ? "Online" : "OFFline";
}, 3000); // probably too often, try 30000 for every 30 seconds
// forgot to include async load event listener in the video!
window.addEventListener("load", async (event) => {
const statusDisplay = document.getElementById("status");
statusDisplay.textContent = (await checkOnlineStatus())
? "Online"
: "OFFline";
});
However this seems to produce an error in the console when running it. The error is:
script.js:6 GET http://127.0.0.1:5500/1pixel.png 404 (Not Found)
Does anyone else get this same error or know how to get around this?
Edit: I got the solution by changing the fetch API call to this:
const online = await fetch("https://jsonplaceholder.typicode.com/todos/1");
Probably the error was caused by the previous fetch API not correctly working

Throw custom timeout exception

I have a Google Apps Script web app ("Web App") that executes as the user, then calls individual functions from another Apps Script project ("API Executable") via the Apps Script API using UrlFetchApp.fetch() and executes them as me (see Get user info when someone runs Google Apps Script web app as me).
A limitation of this method is that UrlFetchApp.fetch() has a 60s timeout, and one of my functions often takes longer than this. The API Executable function finishes running successfully, but the web app throws a timeout exception. I would like to handle this exception by running a second "follow-up" function that finds and returns the URL of the Google Sheet successfully created by the original function. However, I'll need to pass the follow-up function one of the parameters passed to the original function, and it appears I can't do this within a standard try...catch block.
My idea was to throw an exception that contains the needed parameter, but I can't figure out how to throw my own timeout exception; since Google Apps Script is synchronous, there's no way to track how long UrlFetchApp.fetch() has been running while it's running.
Is there a way to throw your own timeout exception? Or, is there another way I can pass the needed parameter to a function that executes if there's a timeout error?
I tagged Javascript in this post as well since there's a lot of overlap with Google Apps Script and I figured it would improve my chance of connecting with someone who has an answer--hope that's okay. Below is the function I'm using in my web app to call my API Executable functions, in case that's helpful.
EDIT: Based on #TheMaster's comment, I decided to write the script as though parameters passed to executeAsMe() WERE being passed to the catch() block, to see what happened. I expected an exception regarding the fact the opt_timeoutFunction was undefined, but strangely it looks like only the first line of the catch() block is even running, and I'm not sure why.
function executeAsMe(functionName, paramsArray, opt_timeoutFunction, opt_timeoutParams) {
try {
console.log('Using Apps Script API to call function ' + functionName.toString() + ' with parameter(s) ' + paramsArray.toString());
var url = 'https://script.googleapis.com/v1/scripts/Mq71nLXJPX95eVDFPW2DJzcB61X_XfA8E:run';
var payload = JSON.stringify({"function": functionName, "parameters": paramsArray, "devMode": true})
var params = {method:"POST",
headers: {Authorization: 'Bearer ' + getAppsScriptService().getAccessToken()},
payload:payload,
contentType:"application/json",
muteHttpExceptions:true};
var results = UrlFetchApp.fetch(url, params);
var jsonResponse = JSON.parse(results).response;
if (jsonResponse == undefined) {
var jsonResults = undefined;
} else {
var jsonResults = jsonResponse.result;
}
} catch(error) {
console.log('error = ' + error); // I'm seeing this in the logs...
console.log('error.indexOf("Timeout") = ' + error.indexOf("Timeout").toString); // ...but not this. It skips straight to the finally block
if (error.indexOf('Timeout') > 0) { // If error is a timeout error, call follow-up function
console.log('Using Apps Script API to call follow-up function ' + opt_timeoutFunction.toString() + ' with parameter(s) ' + paramsArray.toString());
var url = 'https://script.googleapis.com/v1/scripts/Mq71nLXJPX95eVDFPW2DJzcB61X_XfA8E:run';
var payload = JSON.stringify({"function": opt_timeoutFunction, "parameters": opt_timeoutParams, "devMode": true})
var params = {method:"POST",
headers: {Authorization: 'Bearer ' + getAppsScriptService().getAccessToken()},
payload:payload,
contentType:"application/json",
muteHttpExceptions:true};
var results = UrlFetchApp.fetch(url, params);
var jsonResponse = JSON.parse(results).response;
if (jsonResponse == undefined) {
var jsonResults = undefined;
} else {
var jsonResults = jsonResponse.result;
}
}
} finally {
console.log('jsonResults = ' + jsonResults);
return jsonResults;
}
}

I ended up using the '''catch()''' block to throw an exception back to the client side and handle it there.
Google Apps Script:
function executeAsMe(functionName, paramsArray) {
try {
console.log('Using Apps Script API to call function ' + functionName.toString() + ' with parameter(s) ' + paramsArray.toString());
var url = 'https://script.googleapis.com/v1/scripts/Mq71nLXJPX95eVDFPW2DJzcB61X_XfA8E:run';
var payload = JSON.stringify({"function": functionName, "parameters": paramsArray, "devMode": true})
var params = {method:"POST",
headers: {Authorization: 'Bearer ' + getAppsScriptService().getAccessToken()},
payload:payload,
contentType:"application/json",
muteHttpExceptions:true};
var results = UrlFetchApp.fetch(url, params);
var jsonResponse = JSON.parse(results).response;
if (jsonResponse == undefined) {
var jsonResults = undefined;
} else {
var jsonResults = jsonResponse.result;
}
return jsonResults;
} catch(error) {
console.log('error = ' + error);
if (error.toString().indexOf('Timeout') > 0) {
console.log('Throwing new error');
throw new Error('timeout');
} else {
throw new Error('unknown');
}
} finally {
}
}
Client-side Javascript (a simplified version):
function createMcs() {
var userFolder = getDataFromHtml().userFolder;
google.script.run
.withSuccessHandler(createMcsSuccess)
.withFailureHandler(createMcsFailure)
.withUserObject(userFolder)
.executeAsMe('createMasterCombinedSchedule', [userFolder]);
}
function createMcsSuccess(mcsParameter) {
if (mcsParameter == undefined) {
simpleErrorModal.style.display = "block"; // A generic error message
} else {
document.getElementById("simpleAlertHeaderDiv").innerHTML = 'Master Combined Schedule Created Successfully';
document.getElementById("simpleAlertBodyDiv").innerHTML = 'Your Master Combined Schedule was created successfully. Click here to view.';
simpleAlertModal.style.display = "block";
}
}
function createMcsFailure(mcsError, userFolder, counter) { // The exception I threw will activate this function
if (!counter) { // Added a counter to increment every time checkForCreatedMcs() runs so it doesn't run indefinitely
var counter = 0;
}
if (mcsError.message == 'Error: timeout' && counter < 5) { // If timeout error, wait 10s and look for MCS URL
window.setTimeout(checkForCreatedMcs(mcsError, userFolder, counter), 10000);
} else if (mcsError.message == 'Error: timeout' && counter == 5) { // If it hasn't worked after 5 tries, show generic error message
simpleErrorModal.style.display = "block";
} else { // For any error that's not a timeout exception, show generic error message
simpleErrorModal.style.display = "block";
}
}
function checkForCreatedMcs(mcsError, userFolder, counter) {
counter++;
google.script.run
.withSuccessHandler(checkForCreatedMcsSuccess)
.withUserObject([mcsError, userFolder, counter])
.executeAsMe('checkIfMcsExists', [userFolder]); // checkIfMcsExists() is a pre-existing function in my API Executable project I had already used elsewhere
}
function checkForCreatedMcsSuccess(mcsExistsParameter, params) {
var mcsError = params[0];
var userFolder = params[1];
var counter = params[2];
if (mcsExistsParameter == undefined) { // If function returns undefined, show generic error message
simpleErrorModal.style.display = "block";
} else if (mcsExistsParameter == false) { // If function returns false, wait 10s and try again
createMcsFailure(mcsError, userFolder, counter);
} else { // If function returns URL, show success modal with link
document.getElementById("simpleAlertHeaderDiv").innerHTML = 'Master Combined Schedule Created Successfully';
document.getElementById("simpleAlertBodyDiv").innerHTML = 'Your Master Combined Schedule was created successfully. Click here to view.';
simpleAlertModal.style.display = "block";
}
}
I am sure there has to be a tidier/less complex way to do this, but this worked!

Race condition in Amplify.Hub signIn handler when using oath

Example code:
Hub.listen('auth', event => {
const { event: type, data } = event.payload;
if (type === 'signIn') {
const session = data.signInUserSession;
console.log('SESSION', data.signInUserSession);
setTimeout(() => {
console.log('SESSION', data.signInUserSession);
}, 100);
}
});
When using oath, after the provider redirects to my app, the Hub fires a signIn event. However, the signInUserSession property is null when the event is fired, but gets a value some time later (within 100 ms). This does not seem to occur when using Auth.signIn(email, password) directly; signInUserSession is populated when the event is fired.
What is happening here, and how can I get around it? Currently, I have an explicit delay in the code, which is a terrible hack.

Perhaps the old way of JavaScript for waiting for value to be populated is useful to ensure that code does not fail even if the it takes longer than expected in populating the value.
Here is a sample code that I normally use when no other options are available.
waitForValue(){
if(myVar!= null && typeof myVar !== "undefined"){
//value exists, do what you want
console.log(myVar)
}
else{
setTimeout(() => {this.waitForValue()}, 100);
}
}
You can refactor this sample code as per your need.
Alternatively, AWS Amplify also have other ways to get current logged in user session. e.g. Auth.currentAuthenticatedUser() and Auth.currentSession() return promise. They can be used like this
private async getUser(){
let user = null;
try {
user = await Auth.currentAuthenticatedUser();
//console.log(user);
} catch (err) {
//console.log(err);
}
//return user;
}

i am not used to aws amplify - just read some github and so far i can see we will need info about your userPool implementation - i guess some weird callback issue
But for a workaround you can proxy the reference:
const event = {type: "signIn", data: {signInProperty: "null"}}
setTimeout(()=>event.data.signInProperty = "{Stack: Overflow}", 1000)
// mock events
function emit(type, args){
console.log(type, args)
}
//initialize
let watchedValue = event.data.signInProperty
document.getElementById("app").innerHTML = event.data.signInProperty
// protect reference
Object.defineProperty(event.data, "signInProperty", {
set(newValue){
watchedValue = newValue
document.getElementById("app").innerHTML = newValue
emit("event:signInCompleted", event.data)
},
get(){
return watchedValue
}
})
<div id="app"></div>

Bluemix - Cloudant node.js: Error when calling API

I have a node.js app to call an API. The API works well on the first call, but on the second call, it returns this error message:
404 Not Found: Requested route ('abc.mybluemix.net') does not exist.
Please help review the app.js function:
app.js
app.get('/abc/:provider_id/staffs', function(request, response) {
console.log("Get method invoked.. ")
db = cloudant.use(dbCredentials.dbStaff);
//db = cloudant.use("staffs");
var docList = [];
db.list(function(err, body) {
if (!err) {
var len = body.rows.length;
console.log('total # of docs -> '+len);
if(len == 0) {
// error
} else {
var i = 0;
body.rows.forEach(function(document) {
db.search('allstaff', 'allstaff_index', {q:"provider_id:"+request.params.provider_id}, function(err, doc) {
if (!err) {
if(doc['_attachments']) {
// todo
} else {
var responseDataStaff = createResponseDataStaffs(
doc.rows[i].fields.id,
doc.rows[i].fields.provider_id,
doc.rows[i].fields.firstname,
doc.rows[i].fields.lastname,
doc.rows[i].fields.avatar,
doc.rows[i].fields.email,
doc.rows[i].fields.mobile,
doc.rows[i].fields.address,
doc.rows[i].fields.username,
doc.rows[i].fields.lastlogin,
doc.rows[i].fields.lastlogout
);
}
docList.push(responseDataStaff);
i++;
if(i >= doc.rows.length ) {
response.write(JSON.stringify(docList));
console.log('ending response...');
response.end();
}
} else {
console.log(err);
}
});
});
}
} else {
console.log(err);
}
});
and log file:

The reason you get 404 on the second time is because your app crashed.
Debug it locally before you push to Bluemix.
To debug locally you need to have VCAP_SERVICES defined for your app:
Open a terminal and type cf env
Copy the content of VCAP_SERVICES to a local file (e.g. VCAP_SERVICES.json)
Create a new file next to app.js (e.g. debugApp.js) with this content
if(!process.env.VCAP_SERVICES){
process.env.VCAP_SERVICES = JSON.stringify(require("./VCAP_Services.json"));
}
require('./app.js');
Then run node debugApp.js

I'm not sure what you're trying to achieve here but it looks bad
You're calling db.list to get a list of all your documents - fair enough
You then iterate through each document in the list to give a variable 'document' which you never use
You then issue a search request to Cloudant for each document you retrieved in the list. These search requests will be executed in parallel because they are started in a for loop. All of the search requests are identical and do not contain anything about the document you fetched.
I'm guessing that this isn't what you intended to do.

Firebase Authentication - Migrate users from SQL to Firebase

I am rewriting a website of mine, to JavaScript in combination with Firebase. So far, I love Firebase, but now I am on a part where I need to migrate all of my old users to the Firebase system.
All the users have custom extra settings and i wan't to take down the server where it's on now (€ 103, p/m). So I need it all to be copied. As far as I know, it needs to be done one by one (createUserWithEmailAndPassword). On the server, I make a JSON object and on the new site I do:
$.get("/alljsonfromalink", function (rdata) {
var $jData = jQuery.parseJSON(rdata);
var i = 0;
for (var user in $jData) {
whenYouFeelLikIt(user, $jData);
}
});
function whenYouFeelLikIt(i, $jData) {
setTimeout(function() {
firebase.auth().signInWithEmailAndPassword($jData[i].email, RandomPassword)
.then(function(){
console.log("Succes Login");
//if exist i set extra settings
setusersettings($jData[i], $jData[i].email);
})
.catch(function(error) {
var errorCode = error.code;
console.log(errorCode);
if(errorCode == "auth/user-not-found") {
firebase.auth().createUserWithEmailAndPassword($jData[i].email, RandomPassword).then(function () {
console.log("Created: " + $jData[i].email);
});
}
});
},2000 * (i));
}
It works, but even with a 2-second timeout, I got after 20 or 30 inserts:
firebase.js:73 Uncaught Error: We have blocked all requests from this device due to unusual activity. Try again later.
Anyone has an idea how to work around this?
--Update--
JamieB suggested to use .fetchProvidersForEmail() So now I use
firebase.auth().fetchProvidersForEmail($jData[i].email)
.then(function(succes){
console.log(succes.length);
if(succes.length == 0) {
// the createUserWithEmailAndPassword() with timeout
create(i, $jData);
}
})

FIREBASE REFERENCE indicates that createUserWithEmailAndPassword(email, password) returns firebase.Promise containing non-null firebase.User. So, it returns a promise. These can be pushed into an array that can be handed to the .all Promise method. You can use the below function to add the username and photoURL to the Auth subsystem where they will be stored.
Any additional user properties can be store under a users node where each child id is the UID of the user. The script at the bottom shows an example of using Promise.all.
function registerPasswordUser(email,displayName,password,photoURL){
var user = null;
//NULLIFY EMPTY ARGUMENTS
for (var i = 0; i < arguments.length; i++) {
arguments[i] = arguments[i] ? arguments[i] : null;
}
auth.createUserWithEmailAndPassword(email, password)
.then(function () {
user = auth.currentUser;
user.sendEmailVerification();
})
.then(function () {
user.updateProfile({
displayName: displayName,
photoURL: photoURL
});
})
.catch(function(error) {
console.log(error.message);
});
console.log('Validation link was sent to ' + email + '.');
}
...an example of Promise.all:...
function loadMeetings(city,state) {
return ref.child('states').child(state).child(city).once('value').then(function(snapshot) {
var reads = [];
snapshot.forEach(function(childSnapshot) {
var id = childSnapshot.key();
var promise = ref.child('meetings').child(id).once('value').then(function(snap) {
return snap.val();
}, function(error) {
// The Promise was rejected.
console.error(error);
});
reads.push(promise);
});
return Promise.all(reads);
}, function(error) {
// The Promise was rejected.
console.error(error);
}).then(function(values) {
//for each snapshot do something
});
}