I have a Nativescript-Vue project built with vue init nativescript-vue/vue-cli-template using the axios library.
If I run the following snippet in a browser environment, it works fine, that is, times out as expected with such a short timeout setting:
const apiClient = axios.create({
timeout: 1,
})
apiClient.request({
url: 'https://jsonplaceholder.typicode.com/todos/1',
}).then(response => {
console.log('this.apiClient.defaults.timeout', apiClient.defaults.timeout)
console.log(response.config)
console.log(response.data)
}).catch(e => {
console.log(e)
})
However, when I run the code in a NativeScript-Vue project on Android, the request completes as if there were no timeout setting present at all. Even though you can see from the console.logs that the value for timeout is 1.
If I make a similar request with NativeScript's "http/http-request" module, the timeout setting is respected as expected.
[Update:]
Turned out that Manoj's workaround below alone wasn't sufficient for our requirements because only connect timeout is set for the HttpURLConnection in org.nativescript.widgets.Async's HttpRequestTask. Setting read timeout provided the desired result, that is, causing the timeout to expire when no data is received within the timeout period. So, I suggested considering setting read timeout in addition to connect timeout:
// apply timeout
if (options.timeout > 0)
{
connection.setConnectTimeout(options.timeout);
connection.setReadTimeout(options.timeout);
}
I guess it's not implemented in the XHR wrapper (as of v6.2.0) but only in the original http request class. Try adding the code below in your app.js.
import { XMLHttpRequest } from 'tns-core-modules/xhr';
import * as types from "tns-core-modules/utils/types";
XMLHttpRequest.prototype.originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (data) {
if (types.isDefined(this._options) && types.isNumber(this.timeout)) {
this._options.timeout = this.timeout;
}
this.originalSend(data);
};
You might want to submit a issue at Github.
Related
i used node js as a backend in a remote server(not localhost) with "188.226.146.190:3000/api/meetups", but i got network error in android 5.1 physical devise and return undefined as output of api,what should i do? i used a simple get requset to my api. i test an example api "https://jsonplaceholder.typicode.com/users" and it works properly with this test api.
i have an api file:
export const fetchMeetups = () =>
fetch('http://188.226.146.190:3000/api/meetups')
.then(res => res.json()).catch((e) =>e);
and in the app.js:
static defaultProps = {
fetchMeetups
}
state = {
loading: false,
meetups: []
}
async componentDidMount() {
this.setState({
loading: true
});
const data = await this.props.fetchMeetups();
setTimeout( () => this.setState({loading: false, meetups:
data.meetups}),2000);
}
and in the android i got this error:
Network request failed
Network request failed normally means the the server was not reachable.
To get more information about failures like this you can add Stetho to your project. It allows you to see failures in the network tab of your browsers and examine them like you would do in the tests.
The React Native docs have a detailed section about this at debugging#debugging-with-stetog.
In your case I would assume that the IP of your service is not up-to-date anymore, you might want to check this.
Let me start by saying I've found several proposed solutions online, but none of them seem to work for me.
Issue:
I have a meteor app I'm trying to run on android. For this, I've deployed the app on Heroku and I call the run android-device command using the --mobile-server https://myapp.heroku.com parameter.
I permanently receive the error
"XMLHttpRequest cannot load https://myapp.heroku.com/sockjs/... . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:12848' is therefore not allowed access. The response had HTTP status code 404.", source: http://localhost:12848/ (0)
Here is what I've tried so far:
I set ROOT URL at meteor startup:
process.env.ROOT_URL = "https://myapp.heroku.com";
I tried setting the Access Control like this, server-side at meteor startup:
WebApp.connectHandlers.use(function(req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header('Access-Control-Allow-Origin', 'https://myapp.heroku.com');
res.header('Access-Control-Allow-Origin', 'http://localhost:12848');
res.header('Access-Control-Allow-Origin', 'http://meteor.local');
res.header("Access-Control-Allow-Headers", "Content-type,Accept,X-Custom-Header");
return next();
});
I tried to use the browser-policy package, like this, server-side at meteor startup:
BrowserPolicy.content.allowSameOriginForAll();
BrowserPolicy.content.allowOriginForAll('*');
BrowserPolicy.content.allowOriginForAll('http://meteor.local');
BrowserPolicy.content.allowOriginForAll('https://myapp.heroku.com');
BrowserPolicy.content.allowOriginForAll('https://*.myapp.heroku.com');
BrowserPolicy.content.allowEval();
I tried adding access rules to "mobile-config.js":
App.accessRule("*");
I made sure the name in the "package.json" file under root is identical to the App name under "mobile-config.js"
What else am I missing?
Edit:
I've also tried adding the express and cors packages to whitelist local host:
var whitelist = [
'http://localhost:3000',
'http://localhost:12848',
'https://myapp.heroku.com'
];
var corsOptions = {
origin: function(origin, callback){
var originIsWhitelisted = whitelist.indexOf(origin) !== -1;
callback(null, originIsWhitelisted);
},
credentials: true
};
app.use(cors(corsOptions));
Also tried to enable pre-flight, like this:
app.options('*', cors())
This is probably the stupidest problem I ever ran into. Trying to run the app using the --mobile-server https://myapp.heroku.com parameter was wrong. Instead, it should be https://myapp.herokuapp.com
That was it. That was the problem all along...
Adding '*' to whitelist should do the job. The ultimate solution lies within config.xml, this should be helpful: https://stackoverflow.com/a/36124935/8056323
I'm (newly) using protractor to run e2e cucumber tests.
I got a web-app which is angularJS based. I'm using appium to remotely run the test on a real android device. Here are the versions i'm using :
windows8.1
protractor#1.3.1 (with submodule selenium-webdriver#2.43.5)
appium#1.3.0beta1
android device with 4.4.4
my protractor configuration (extracts), corresponding to https://github.com/angular/protractor/blob/master/docs/browser-setup.md:
currentDeviceUDID = (...);
var appToTestURL = 'http://my.website.com:9000/app/index.html';
exports.config = {
seleniumAddress: 'http://localhost:4723/wd/hub';
chromeOnly: false,
specs: ['features/sample.feature'],
capabilities: {
browserName: 'chrome',
'appium-version': '1.0',
platformName: 'Android',
platformVersion: '4.4.4',
udid: currentDeviceUDID
},
baseUrl: appToTestURL
framework: 'cucumber',
cucumberOpts: {
require: 'features/stepDefinitionsSample.js',
tags: '#dev',
format: 'progress'
},
// configuring wd in onPrepare
onPrepare: function () {
var wd = require('wd'),
protractor = require('protractor'),
wdBridge = require('wd-bridge')(protractor, wd);
wdBridge.initFromProtractor(exports.config);
},
allScriptsTimeout: 30000,
getPageTimeout: 30000
};
As you can see, i have replaced the protractor's webdriver url with the appium webdriver. i start the appium from commandline with "appium &", then i run the test with "protactor cucumbertest.conf"
The phone opens chrome browser and navigates to the url i give it with "browser.get(url)"
the problem is the following:
the call waitForAngular(), which is asynchronously waiting for the website to load and on all open http request (as far as i understand), is not executed sucessfully on the phone. the phone does not react to the call, and the webdriver proxy returns a 500.
Corresponding to https://github.com/angular/protractor/issues/1358, i understood that the waitForAngular() function is mixed in protractor into the calls
['getCurrentUrl', 'getPageSource', 'getTitle'];
Behind waitForAngular() in the file protractor.js is the function below, which is proxied to the phone:
functions.waitForAngular = function(selector, callback) {
var el = document.querySelector(selector);
try {
if (angular.getTestability) {
angular.getTestability(el).whenStable(callback);
} else {
angular.element(el).injector().get('$browser').
notifyWhenNoOutstandingRequests(callback);
}
} catch (e) {
callback(e);
}
};
Additional information: when i stimulate an error on the webdriver (browser) object, the error message points to the chromedriver.exe inside the protractor directory. i dont understand why the error is not from appium's chromedriver
so tldr;
without the successful call waitForAngular, i cannot (stable or at all) access elements on the page on the phone, so not testing. maybe im misunderstanding some fundamental configuration detail here, all hints are welcome.
edit: added appium server logs here: http://pastebin.com/vqBGUdXH
I assume i have identified the problem. Appium and Protractor work fine.
My angularJS app causes the issue. It uses $timeout for polling (im forced on angular 1.07 which has no $interval). This causes protractor to expect the page to be still in the loading stage and not finished. Therefore the function call waitForAngular() never returns and the test timeouts after the specified timeout-timespan.
This behaviour is expected and known, also documented (better read doc first ;) ) at http://angular.github.io/protractor/#/timeouts
The doc suggests the following for continuous polling: replace $timeout with $interval:
If your application continuously polls $timeout or $http, it will never be registered as completely loaded. You should use the $interval service (interval.js) for anything that polls continuously (introduced in Angular 1.2rc3).
For now, i fixed the issue another way: disable the built-in angular sync and manually sync
this.Before(function(next){
ptor = protractor.getInstance();
ptor.ignoreSynchronization = true; //disables waitForangular()
next();
});
Sync method 1:
//at a testcase, wait for an element to be visible with a promise/then
browser.wait(function () {
element.all(by.css('.myCssClass')).then(function (items) {
items[0].getText().then(function (text) {
console.log(text);
});
});
return true;
}
Sync method 2 :
// "eventually" (chai-as-promised) internally uses "promise" (and therefore acts like "then")
browser.get(url);
expect(browser.getTitle()).to.eventually.equal("connect me").and.notify(next);
I'm using Titanium SDK 3.4.0 GA, developing an Android app that load remote images from my web server to an ImageView.
The problem comes when the device lost connectivity during the load of that images, so, what I need is a way to catch that error (timeout, 404...) and set an "imageNotAvailable".
I'm using Network Link Conditioner for MacOSX to reproduce that scenario, with low latency, lost of packets...
To prove this I use the following code in my test.js (Alloy Controller) and a simple view with an ImageView with id='imageView' in my test.xml.
Sometimes, throws an exception:
TiDownloadManager: (pool-4-thread-1) [45929,118581] Exception downloading http://...
but not always (remote connection timeout seems infinite), anyway with this exception and without this I can't catch this (probably due to the asynchronous request) nor fires the ERROR event.
function imageNotAvailable(e)
{
Ti.API.info('Error loading image:'+JSON.stringify(e));
$.imageView.image = "/imageNotAvailable.png";
}
function onLoad(e)
{
Ti.API.info('Image Loaded:'+JSON.stringify(e));
}
function setImageAndroid(image)
{
try{
$.imageView.image = 'http://....';
}catch(e){
$.imageView.fireEvent("error");
}
$.imageView.addEventListener("error", imageNotAvailable);
$.imageView.addEventListener("load", onLoad);
}
Excuse my bad English! Thanks!
Have you tried adding your event listeners before setting the imageView's image property?
i can suggest a way around using http request
create a function in some library class which accepts the url that you are supposed to hit
Connection.getImage = function(link){
var xhr = Titanium.Network.createHTTPClient({
onload : function(e) {
var responseResult = this.responseText;
callback(responseResult);
},
// function called when an error occurs, including a timeout
onerror : function(e) {
callback("fail");
// Ti.API.info('IN ERROR ' + e.error);
},
timeout : 5000
});
xhr.open("GET", link);
xhr.send();
};
// ps you will receive a blob in response which you can attach to imageView.blob property , an it would suggest using a default image which will act as placeholder until you get the success response.
I want user to wait for specified time(4seconds) to get connected to server. If it cannot connect within the specified time period, application should get closed.
Here is what I have coded:
var downloadDataReq = Titanium.Network.createHTTPClient({timeout :4000});
downloadDataReq.onload = function() { //some code }
downloadDataReq.onerror = function(event) { //some code }
var urlToDownloadData = 'http://www.google.com';
downloadDataReq.open("POST", urlToDownloadData);
downloadDataReq.send();
The Problem is that app waits for fix time (timeout parameter does not effect at all).
P.S.: making an app for android using Titanium.
Try to use method like this:
downloadDataReq.setTimeout(4000);
For me, timeout on HTTP requests aren't working as it should. I had very weird issues, such as:
If I put 1000ms timeout, it'll be called on 2 or 3 seconds.
If I put 2000ms timeout or above, it'll never be called.
I'm using Android ICS and JB, and on both I get the issues above. Seems that timeout parameter is buggy.
As a workaround, I'm doing checks inside onload (example: if I'm downloading a file, I compare the checksum of local file, with the checksum of the same file on the server), and I'm simulating timeouts with JavaScript's setTimeout. It's working to an extend.
The code below demonstrate how to simulate a request timeout, with JS's setTimeout command:
var downloadDataReq = Titanium.Network.createHTTPClient();
downloadDataReq.onload = function() {
clearTimeout(timeout);
alert('loaded');
}
downloadDataReq.onerror = function(e) {
clearTimeout(timeout);
alert('error: ' + e.error);
}
var urlToDownloadData = 'http://10.1.1.183/maquina_local/arquivos/FirefoxPortable_12.0_PortugueseBR.paf.exe';
downloadDataReq.open("GET", urlToDownloadData);
var timeout = setTimeout(function(){
downloadDataReq.onload = function(){
downloadDataReq.onerror({'error': 'timeout'});
};
downloadDataReq.abort();
}, 4000);
downloadDataReq.send();
On timeout, I'm changing onload event to onerror one, because if you try aborting a running request, it'll trigger 'onload' event, not 'onerror'. If you don't do it, this issue can give you corrupted files (ex: a 20mb file that, when request is aborted, file will be incomplete, with a size smaller than 20mb).
I'm still testing this solution, but at least for now, it solved a few bugs for me.
Try this.
Ti.App.timeOut = 99000; //declare in app.js
then use anyWhere in your project.But make Sure every time when you create a httpClient.
dont recreate or redefine in Code or through out the page.
this works fine for me.
//HAVE A LOOK OVER THE USE OF THIS
var xhr = Titanium.Network.createHTTPClient({timeout:Ti.App.timeOut});