I'm implementing Application Insights to our AngularJS application.
We've already setup some kind of logic to track the loading times for API calls.
I was wondering if it is possible to track the loading times of the app.js and vendor.js files.
Do you guys know if this is possible?
Thank you in advance!
I was wondering if it is possible to track the loading times of the app.js and vendor.js files.
According to ApplicationInsights-JS, to get the page loading time, you can use pageView.properties.duration , try the following code snippet taken from the document:
_self.trackPageView = (pageView?: IPageViewTelemetry, customProperties?: ICustomProperties) => {
try {
let inPv = pageView || {};
_pageViewManager.trackPageView(inPv, {...inPv.properties, ...inPv.measurements, ...customProperties});
if (_self.config.autoTrackPageVisitTime) {
_pageVisitTimeManager.trackPreviousPageVisit(inPv.name, inPv.uri);
}
} catch (e) {
_throwInternal(
eLoggingSeverity.CRITICAL,
_eInternalMessageId.TrackPVFailed,
"trackPageView failed, page view will not be collected: " + getExceptionName(e),
{ exception: dumpObj(e) });
}
};
You can refer to Capture and view page load times in your Azure web app with Application Insights and PageViewPerformanceManager.ts
Related
Is is possible to get the onload event for the pwa application in general. I meant we had implemented the a custom versioning logic in-order to keep the app version based on database field.(ie clearing the service worker cache). The issues here is the logic almost works but when ever a new version is updated in the database, then we need to clear the cache of the respective browser in-order to trigger the update. On more investigation I found that when once the pwa app is opened, it is keeping the some sort of cache image, on reopening the pwa app again won't trigger the start-up code of the app, but load app from cache.
So is it possible to get an onload sort of event for pwa ?
For testing purpose I added some alert() in the app component, but didn't fired, on reopening a pwa app
this.httpService.GetAppVersion(ver).subscribe(
res => {
if (res != null || res !== undefined) {
this.version = res.versionNumber;
ver = localStorage.getItem("appVersion");
if (ver === null || ver === undefined) {
localStorage.setItem("appVersion", "1.0");
ver = "1.0";
}
let localVersion = ver.split(".");
let incomingVersion = this.version.split(".");
let result = this.helperService.compareVersion(
localVersion,
incomingVersion
);
//alert("result : " + result);
if (result === 1) {
const snackBarRef = this.snackBar.open(
"New version available. Load New Version?",
"Yes",
{ duration: 50000000 }
);
snackBarRef.afterDismissed().subscribe(() => {
console.log("The snack-bar was dismissed");
});
snackBarRef.onAction().subscribe(() => {
localStorage.setItem("appVersion", this.version.toString());
this.helperService.Update(); // which clears the cache
setTimeout(() => {
window.location.reload(true);
}, 500);
});
}
}
},
error => {
alert("http error" + JSON.stringify(error));
}
);
at least the code in the app component's constructor will execute every time when the app is reopened after closing.
See: How to display a "new version available" for a Progressive Web App
I know this question is very old, but what I'm doing now (and I'm trying to find a better approach because I don't really like this one) is storing the version on the service worker code.
Then, when the window.onload fires, the main JavaScript code sends a message to the service worker (using postMessage()) and the service worker replies with the version number.
It's not exactly what you need, but it's an approximation.
Still, and as I said, I'm looking for a better, more maintenable approach. If I find one I'll post it here, just in case someone is searching for this (as I did).
I am trying to save a variable's data into a text file and update the file every time the variable changes. I found solutions in Node.js and vanilla JavaScript but I cannot find a particular solution in React.js.
Actually I am trying to store Facebook Long Live Access Token in to a text file and would like to use it in the future and when I try importing 'fs' and implementing createFile and appendFile methods I get an error saying Method doesn't exist.
Please help me out. Here is the code below
window.FB.getLoginStatus((resp) => {
if (resp.status === 'connected') {
const accessToken = resp.authResponse.accessToken;
try {
axios.get(`https://graph.facebook.com/oauth/access_token?client_id=CLIENT_id&client_secret=CLIENT_SECRET&grant_type=fb_exchange_token&fb_exchange_token=${accessToken}`)
.then((response) => {
console.log("Long Live Access Token " + response.data.access_token + " expires in " + response.data.expires_in);
let longLiveAccessToken = response.data.access_token;
let expiresIn = response.data.expires_in;
})
.catch((error) => {
console.log(error);
});
}
catch (e) {
console.log(e.description);
}
}
});
React is a frontend library. It's supposed to be executed in the browser, which for security reasons does not have access to the file system. You can make React render in the server, but the example code you're showing is clearly frontend code, it uses the window object. It doesn't even include anything React-related at first sight: it mainly consists of an Ajax call to Facebook made via Axios library.
So your remaining options are basically these:
Create a text file and let the user download it.
Save the file content in local storage for later access from the same browser.
Save the contents in online storage (which could also be localhost).
Can you precise if any of these methods would fit your needs, so I can explain it further with sample code if needed?
I have a request, Can anyone tell me, how to properly do. I want to make two navbars in my project, first is intended for admin, second for user. I use with NodeJS (back), AngularJS (front). At the moment I created on the side NodeJS script, Which checks the status of the user role:
In router index.js (I think its good place?)
router.get('/checkRole', function (req, res) {
if (req.user != null) {
if (req.user.role == 'admin') {
res.json('admin');
}
} else {
res.json('user');
}
});
Now the question is what next?
Create Service with http.get to index route, and every time, when will be loaded page check status and load navbar?
(Important thing)
So I need in each controller to add a service (http get, check status, load navbar) yes?
Or is another way? Can someone explain me??
Sorry for english, and thanks for help.
I am working on integrating BrightCove into an Ionic App (allows HTML and JS/Angular to run as a native app on mobile devices).
The app will play videos and allow user's to download the video to save the user's device, I can get the app to play the video but am having issues getting the
Media API to run the 'find_video_by_id' call.
So I have a download button which triggers the following function
_this.downloadBrightcoveVideo = () => {
let searchParams = {}
BCMAPI.token = 'xxxx..'
BCMAPI.callback = 'useDownloadLink'
BCMAPI.command = 'find_video_by_id'
searchParams.video_id = 1234567890
searchParams.media_delivery = 'HTTP'
searchParams.video_fields = 'FLVURL'
BCMAPI.find (BCMAPI.command, searchParams)
}
where token and video_id are set to my video and URL Access token.
I have tried setting the useDownloadLink function as below
let useDownloadLink = function () { console.log ("I'm Alive") }
or
function useDownloadLink () { console.log ("I'm Alive") }
or
_this. useDownloadLink = () => { console.log ("I'm Alive") }
Every time I run the code I get the error below, even though I have useDownloadLink above the download function
Uncaught ReferenceError: useDownloadLink is not defined
I have tried several variations now and nothing is working, any solution would be gratefully received.
Thanks in advance,
Áine
So after a bit of Google-ing came to the conclusion it was better to use BrightCove's CMS Api to achieve the results I wanted, once going through the api it was actually pretty simple..
Hope that helps someone else :D
Happy Coding!
I am trying to implement google custom search in an angular js website.
When I click on the search button it does not display me anything, but the url is updated to the url.
I have followed the steps mentioned in the documentation by google.
I am not sure what I am doing wrong?
My search bar is located on the home page as -
<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>
my search result has -
<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>
Any input is much appreciated.
Thanks,
You may have more than one problem happening at the same time...
1. Query Parameter mismatch
Your searchresults-only does not match the queryParameterName specified on gcse:searchbox-only.
Index.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
Search.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
2. Angular.js is blocking the flow of Google CSE
Under normal circumstances, Google Search Element will trigger an HTTP GET with the search parameter. However, since you are dealing with a one-page application, you may not see the query parameter. If that suspicion is true when you target resultsUrl="#/searchresult", then you have two options:
Force a HTTP GET on resultsUrl="http://YOURWEBSITE/searchresult". You may have to match routes, or something along those lines in order to catch the REST request (Ember.js is really easy to do so, but I haven't done in Angular.js yet.)
Use JQuery alongside Angular.js to get the input from the user on Index.html and manually trigger a search on search.html. How would you do it? For the index.html you would do something like below and for the results you would implement something like I answered in another post.
Index.html
<div>GSC SEARCH BUTTON HOOK: <strong><div id="search_button_hook">NOT ACTIVATED.</div></strong></div>
<div>GSC SEARCH TEXT: <strong><div id="search_text_hook"></div></strong></div>
<gcse:search ></gcse:search>
Index.js
//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
callback: googleCSELoaded
};
//When it renders, their initial customized function cseLoaded() is triggered which adds more hooks. I added comments to what each one does:
function googleCSELoaded() {
$(".gsc-search-button").click(function() {
$("#search_button_hook").text('HOOK ACTIVATED');
});
$("#gsc-i-id1").keydown(function(e) {
if (e.which == 13) {
$("#enter_keyboard_hook").text('HOOK ACTIVATED');
}
else{
$("#search_text_hook").text($("#gsc-i-id1").val());
}
});
}
(function() {
var cx = '001386805071419863133:cb1vfab8b4y';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
I have a live version of the index.html code, but I don't make promises that will be permanently live since it is hosted in my NDSU FTP.