Chrome violation : [Violation] Handler took 83ms of runtime
JavascriptGoogle ChromeFacebook Javascript-SdkJavascript Problem Overview
I'm trying to implement the Facebook's logout functionality in my project. Login works just fine. But I'm facing the getting the following message in JavaScript console with the logout code.
> [Violation] Long running JavaScript task took 318ms session.php:51 1 > sdk.js:135 > > [Violation] Handler took 83ms of runtime (50ms allowed)
I've tried to search for other similar threads and those solutions didn't work out for me. I tried removing parts of my code and see which part is giving problem. Its quite clear that its getting the error due to Facebook's JS SDK as seen in the message. I've also disabled all of my Chrome extensions.
The code works fine in Firefox but not in Chrome, nor in Opera. Is there any method for me to extend this timeout duration? Or any other method to fix this issue in chrome. Here is my code for logout.
<?php
session_start();
//echo $_SESSION["current_user"];
//echo $_COOKIE["current_user"];
session_destroy();
unset($_COOKIE["current_user"]);
setcookie("current_user","",time() -3600, "/","", 0);
//header("location: login.php");
?>
<!doctype html>
<html>
<head>
</head>
<body>
<script>
// Default settings
window.fbAsyncInit = function() {
FB.init({
appId : '<app-id>',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.onload = function(){
logout();
}
function logout(){
console.log("1");
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.logout();
console.log("2");
window.location="login.php";
console.log("3");
}
else{
console.log("4");
window.location="login.php";
console.log("5");
}
});
}
</script>
</body>
</html>
For obvious reasons I've removed the App-Id from the code. Any help is appreciated. :)
Javascript Solutions
Solution 1 - Javascript
"Chrome violations" don't represent errors in either Chrome or your own web app. They are instead warnings to help you improve your app. In this case, Long running JavaScript and took 83ms of runtime are alerting you there's probably an opportunity to speed up your script.
("Violation" is not the best terminology; it's used here to imply the script "violates" a pre-defined guideline, but "warning" or similar would be clearer. These messages first appeared in Chrome in early 2017 and should ideally have a "More info" prompt to elaborate on the meaning and give suggested actions to the developer. Hopefully those will be added in the future.)
Solution 2 - Javascript
Perhaps a little off topic, just be informed that these kind of messages can also be seen when you are debugging your code with a breakpoint inside an async function like setTimeout like below:
[Violation] 'setTimeout' handler took 43129ms
That number (43129ms) depends on how long you stop in your async function
Solution 3 - Javascript
It seems you have found your solution, but still it will be helpful to others, on this page on point based on Chrome 59.
> 4.Note the red triangle in the top-right of the Animation Frame Fired event. Whenever you see a red triangle, it's a warning that there may > be an issue related to this event.
If you hover on these triangle you can see those are the violation handler errors and as per point 4. yes there is some issue related to that event.
Solution 4 - Javascript
As no one has answered how to make it go away... Turns out, if your handler is an async function with an await method, it will suppress the message.
function sleep (ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
async timeoutHandler() {
await sleep(1)
... // heavy duty code here
}
setTimeout(timeoutHandler, 10000)
If you're doing this a lot... it is probably best to replace sleep(1) with a dedicated suppressor method. I just happen to have sleep laying around in my utils for debugging race conditions.
Solution 5 - Javascript
I realize I could just ignore this violation. But, when I tried the answer by Ray Foss, the violation went away!
I borrowed his sleep function, then added "await sleep(1)" as the first line of the function causing the violation message. The code still runs fine, and the violation message is no longer displayed in the console!
I had to make one change to Ray's example. The function that is being declared as an async function still needs the "function" keyword.
So, in Ray's example, "async timeoutHandler()" should be "async function timeoutHandler()". Once I made that change, the code ran fine.
Note: Technically, my function is now a little slower, due to the calling the sleep(1) function. But, it's not noticeable, and in my opinion, it's worth the overhead to make the violation message go away.
Solution 6 - Javascript
This is a warning only and it is informing that there is a delay or a wait to continue with the code a (Future). As they said in a comment above this can be triggered by a simple alert and you can test it by placing it in the middle of your JS code where it waits for the user's response.
if for example you place an alert("I wait for you") you will see that the faster you are to give ok it will decrease the time in the warning "[Violation]'change' handler took 1496ms".
in your case this is happening because you have a connection check "(response.status === 'connected')" this should wait for a connection response.
Solution 7 - Javascript
to know that this kind of messages can also be seen when you use
alert("bla bla");
It just happened to me so I share this with you.