I am trying to implement a location search API from HERE places-api inside an Ionic5 app.
Everything works fine in localhost environment but search stops working on the device.
Question: Is there a special App-Code or -Key for the use of devices (also for testing via Android Studio)? And why is it working on localhost and not on the device by testing with android-studio?
I tried to change app-code & app-id into app-key and tried also Rest, JS and Rest-JS auth credentials but it is not working. I have no idea what to do next because there is no error at testing on the device, there is just no reaction to this API.
index.html
<script
src="https://js.api.here.com/v3/3.0/mapsjs-core.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://js.api.here.com/v3/3.0/mapsjs-service.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://js.api.here.com/v3/3.0/mapsjs-places.js"
type="text/javascript"
charset="UTF-8"
></script>
Search service
public async searchLocation(search): Promise<any> {
var platform = new H.service.Platform({
app_id: "my-id",
app_code: "my-code",
});
var searchParams = {
q: search,
in: "-180,-90,180,90"
};
return this.startSearch(platform, searchParams);
}
public async startSearch(platform: any, searchParams: object): Promise<any> {
return new Promise((resolve, reject) => {
var search = new H.places.Search(platform.getPlacesService());
const self = this;
search.request(
searchParams,
{},
function onResult(data: any) {
self.Result = data.results.items;
resolve(self.Result);
},
function onError(error: any) {
console.log("HERE search error", error);
reject(error);
}
);
});
}
EDIT - Error log
E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 43427 - Msg: ERROR Error: Uncaught (in promise): Error: [timeout] http://places.api.here.com/places/v1/discover/explore?xnlp=CL_JSMv3.0.17.0&app_id=--myID--&app_code=--myCode--&in=49.9949556%2C10.1767104%3Br%3D10000&size=100 request failed
Error: [timeout] http://places.api.here.com/places/v1/discover/explore?xnlp=CL_JSMv3.0.17.0&app_id=--myID--&app_code=--myCode--&in=479.9949556%2C10.1767104%3Br%3D10000&size=100 request failed
at Object.Zc (eval at <anonymous> (https://js.api.here.com/v3/3.0/mapsjs-core.js:56:36), <anonymous>:11:176)
at b (eval at <anonymous> (https://js.api.here.com/v3/3.0/mapsjs-core.js:56:36), <anonymous>:9:440)
at eval (eval at <anonymous> (https://js.api.here.com/v3/3.0/mapsjs-core.js:56:36), <anonymous>:10:43)
at ZoneDelegate.invokeTask (http://localhost/polyfills-es2015.js:3741:31)
at Object.onInvokeTask (http://localhost/vendor-es2015.js:73280:33)
at ZoneDelegate.invokeTask (http://localhost/polyfills-es2015.js:3740:60)
at Zone.runTask (http://localhost/polyfills-es2015.js:3518:47)
at invokeTask (http://localhost/polyfills-es2015.js:3815:34)
at ZoneTask.invoke (http://localhost/polyfills-es2015.js:3804:48)
FIXED:
Thanks #Raymond, i fixed the usecase with another way.
Instead of my API call of my question i changed it to URL request by httpClient.
public async searchLocation(search): Promise<any> {
const BASE_NOMINATIM_URL = "nominatim.openstreetmap.org";
const DEFAULT_VIEW_BOX = "-25.0000%2C70.0000%2C50.0000%2C40.0000";
const url = `https://${BASE_NOMINATIM_URL}/search?format=json&q=${search}&${DEFAULT_VIEW_BOX}&bounded=1`;
return this.http.get(url).subscribe((ans) => {
console.log("data", ans);
});
}
I don't know why the way inside my question is not working. But the URL way works.
Related
Introduction
Hello everyone,
I am trying to implement azure active directory B2c into my nuxt 3 application. Because #nuxtjs/auth-next is not yet working for nuxt 3, I am trying to make my own composable that makes use of the #azure/msal-browser npm package.
The reason I am writing this article is because it is not working. The code I created can be seen below:
Error:
Terminal
[nitro] [dev] [unhandledRejection] BrowserAuthError: non_browser_environment: Login and token requests are not supported in non-browser environments. 21:07:32
at BrowserAuthError.AuthError [as constructor]
Browser console
PerformanceClient.ts:100 Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
at PerformanceClient2.startMeasurement
Code:
file: /composables/useAuth.js
import * as msal from '#azure/msal-browser'
let state = {
applicationInstance: null,
}
export const useAuth = () => {
//config auth
const msalConfig = {
auth: {
clientId: '',
authority: '',
knownAuthorities: [``],
redirectUri: '',
knownAuthorities: ['']
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
}
state.applicationInstance = new msal.PublicClientApplication(msalConfig);
return {
signIn
}
}
const signIn = () => {
//handle redirect
state.applicationInstance
.addEventCallback(event => {
if(event.type == "msal:loginSuccess" && event.payload.account)
{
const account = event.payload.account
state.applicationInstance.setActiveAccount(account)
console.log(account)
}
})
//handle auth redirect
state.applicationInstance
.handleRedirectPromise()
.then(() => {
const account = state.applicationInstance.getActiveAccount()
if(!account) {
const requestParams = {
scopes: ['openid', 'offline_access', 'User.Read'],
}
state.applicationInstance.loginRedirect(requestParams)
}
})
}
file: index.vue
<script setup>
const auth = useAuth();
auth.signIn()
</script>
You need to make sure that you try to login only in the browser because Nuxt runs also server side.
You can check if you are client side with process.client or process.server for server side.
<script setup>
if (process.client) {
const auth = useAuth();
auth.signIn() // Try to sign in but only on client.
}
</script>
NuxtJS/VueJS: How to know if page was rendered on client-side only?
Hello im searching for a way to use component testing as well as end to end testing with nuxt.
we want to be able to test components (which already works) and also check if pages parse their url parameters correctly or sitemaps are correctly created and other page level features and router functions
i tried ava but we already implemented the component testing with jest which works fine now and in the nuxt docs the server rendering for testing was described with ava and i adapted that to jest now but i get timeout errors so i increased the time out to 40 seconds but still get a timeout.
did anybody get the testing to work with the nuxt builder like in the example (https://nuxtjs.org/guide/development-tools)?
this is my end to end test example file
// test.spec.js:
const { resolve } = require('path')
const { Nuxt, Builder } = require('nuxt')
// We keep the nuxt and server instance
// So we can close them at the end of the test
let nuxt = null
// Init Nuxt.js and create a server listening on localhost:4000
beforeAll(async (done) => {
jest.setTimeout(40000)
const config = {
dev: false,
rootDir: resolve(__dirname, '../..'),
telemetry: false,
}
nuxt = new Nuxt(config)
try {
await new Builder(nuxt).build()
nuxt.server.listen(4000, 'localhost')
} catch (e) {
console.log(e)
}
done()
}, 30000)
describe('testing nuxt', () => {
// Example of testing only generated html
test('Route / exits and render HTML', async (t, done) => {
const context = {}
const { html } = await nuxt.server.renderRoute('/', context)
t.true(html.includes('<h1 class="red">Hello world!</h1>'))
jest.setTimeout(30000)
done()
})
})
// Close server and ask nuxt to stop listening to file changes
afterAll((t) => {
nuxt.close()
})
my current error is :
● Test suite failed to run
Timeout - Async callback was not invoked within the 40000ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 40000ms timeout specified by jest.setTimeout.
any info is very appreciated as i could not resolve this issue myself
I'm trying to run a webpage that calls a .wasm file in playwright webkit
const { webkit } = require('playwright');
(async () => {
const browser = await webkit.launch();
const page = await browser.newPage();
page.on("pageerror", err => {
console.error(err.message)
})
await page.goto('https://wasmbyexample.dev/examples/hello-world/demo/rust/');
})();
However, I get the following page-error:
Unhandled Promise Rejection: ReferenceError: Can't find variable: WebAssembly
Seems that the WebAssembly object within the browser is not even initialized.
Any idea why this is happening?
If it matters, I'm on windows.
I am trying to automatically test tracking code and I am using the RequestLogger from Testcafé. I succeeded to intercept calls to example.com and localhost but not to https://www.google-analytics.com/. What could be the reason?
Expected
This test should be green
Test code
import { RequestLogger } from 'testcafe';
const logger_ga = RequestLogger('https://www.google-analytics.com/');
fixture `localhost`
.page('http://localhost:8000')
test
.requestHooks(logger_ga)
('logs calls to Google Analytics', async t => {
await t.click("#ga-button");
console.log(logger_ga.requests); // is empty due to timing
await t.expect(logger_ga.contains(record => record.response.statusCode === 200)).ok();
});
Fixture for this test
I am serving the following index.html page via python -m SimpleHTTPServer 8000
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
<p>Hello world!</p>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<a onclick="ga('send', 'event', 'my_event_category', 'my_event_action', 'my_event_label');" href="#" id="ga-button">Google Analytics</a>
</body>
</html>
Observed
The above test is red
However, these tests are green
import { RequestLogger } from 'testcafe';
const logger = RequestLogger('http://example.com');
fixture `example`
.page('http://example.com');
test
.requestHooks(logger)
('logs calls to example.com', async t => {
await t.expect(logger.contains(record => record.response.statusCode === 200)).ok(); // green
});
const logger_localhost = RequestLogger('http://localhost:8000');
fixture `localhost`
.page('http://localhost:8000');
test
.requestHooks(logger_localhost)
('logs calls to localhost', async t => {
await t.expect(logger_localhost.contains(record => record.response.statusCode === 200)).ok(); // green
});
How can I intercept calls to Google Analytics successfully?
As Marion suggested it is probably due to timing. The following code works:
import { Selector, RequestLogger } from 'testcafe';
const gaCollect = 'https://www.google-analytics.com/collect';
const gaLogger = RequestLogger({gaCollect}, {
logRequestHeaders: true,
logRequestBody: true,
});
fixture `Fixture`
.page('http://localhost:8000')
.requestHooks(gaLogger);
test('Log Google Analytics call', async t => {
await t.click('#ga-button')
await t.expect(gaLogger.contains(record =>
record.request.url.match(/ec=my_event_category&ea=my_event_action&el=my_event_label/))).ok();
for(let r of gaLogger.requests) {
console.log("*** logger url: ", r.request.url);
}
});
The timing factor #Marion mentioned seems to play a role. Compare the previous with the following snippet and its output. Here, we do not see the calls logged to https://google-analytics.com/collect.
fixture `Fixture`
.page('http://localhost:8000')
.requestHooks(gaLogger);
test('Log Google Analytics call', async t => {
await t.click('#ga-button')
for(let r of gaLogger.requests) {
console.log("*** logger url: ", r.request.url);
}
await t.expect(gaLogger.contains(record =>
record.request.url.match(/ec=my_event_category&ea=my_event_action&el=my_event_label/))).ok();
});
Is there any working solutions to prevent Facebook Like Box to not breaking his container or something ? Have set the async to TRUE but still gets out. As I can see on stackoverflow there are issues only for fb:login_button, however I receive the same warning to console:
fb:like_box failed to resize in 45s
To sum up, here is my code, perhaps I am missing something.
HTML Tag
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
FB Initialization
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: <?php echo $this->config['facebook']['appId']; ?>,
status: true,
cookie: true,
xfbml: true
});
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
FB Like Box
<div class="facebook-plugin">
<div class="fb-like-box" data-href="https://www.facebook.com/****" data-width="346" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
This is it. Any help would be appreciated. Thanks in advance!
Accordingly to new Facebook API upgrade, they give up to Like Box, therefore this is no longer an issue.
With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.
If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.
Page Plugin link is https://developers.facebook.com/docs/plugins/page-plugin