Recaptcha v3 initialization interrupted - javascript

Recaptcha v3 initialization is not completing when using the production site.
The logo is no longer appearing and if I try to submit the form I'm getting this error : "Uncaught Error: Invalid site key or not loaded in api.js"
It's working when I'm using it on localhost from my PC
The only difference between the dev and the prod are the keys.
Any idea to why it's not loading properly ?
Changed the keys.
Tried on other web browsers.

There's 2 main ways I believe this is caused:
Your domain name should just be the domain. apple.com, not https://apple.com
Make sure you are including the sitekey in the render param when you add the script tag:
<script src="https://www.google.com/recaptcha/api.js?render=<v3_site_key>"></script>
I've gotten the error when I forgot to provide the site key here (originally thought I only had to pass it in as the first argument to grecaptcha.execute)

Related

JSON Parse error: Unrecognized token '!' - error caught by Sentry

The error in the title is caught by Sentry (an error tracking tool). Below is a screenshot from Sentry - showing the stack trace.
Note: the script /en_US/iab.autofill.payment.js where handleMessage is located is loaded from Facebook (link here), and I couldn't find this script in the javascript bundle, nor anything related to it. I assume it's loaded by a 3rd party script - I'm using Google Tag Manager (which is also loading Facebook Pixel), Segment (loading Hotjar and Mixpanel), and Snapchat. The error started to appear without any changes in these scripts or the services that they're sending data to.
Note 2: It seems that the error is triggered quite often, about 10-15% of the time. I tried to reproduce it but given that it's a handled error, it doesn't show in the dev console.
Any direction on where to look would be much appreciated.
I'm seeing this a lot, and it seems to be coming 100% from users using Facebook browser on iOS (I guess this is the browser you see when you're using the Facebook app).
I tried to debug this with a snippet:
<script>
window.addEventListener('message', function (e) {
console.log(e);
JSON.parse(e.data);
console.log('foo');
}, false);
</script>
This is from the library you linked. Assuming that e.data is JSON string (not e.g. an object?), without any safeguard seems to be breaking things.
The second console.log doesn't fire, so I think this is causing some unexpected behaviours in my case (buttons not reacting to clicks with js listeners etc)
I don't know if there is a workaround or a way to protect from this in Facebook embedded browser (I guess it's loaded there)
Looking forward to hear more info
i have meet that too, its because the one script facebook inject in. will postMessage(Object), but the another script will listen the message and try to JSON.parse an object ,so it will came out a error. u can use 'vconsole' lib, and add a window.addEventListener('message',(e)=>{console.log(e.data)}) and u can see that
Apparently, the issue went away after a couple of weeks without changing anything on my side.

Google Drive Api in Angular

I am facing some difficulties in apply the google drive api to my angular web app. I tried copying the code from https://developers.google.com/drive/api/v3/quickstart/js to my components html but I keep getting an error that says
zone-evergreen.js:171 Uncaught {error: "idpiframe_initialization_failed", details: "Not a valid origin for the client: http://localhosā€¦itelist this origin for your project's client ID."}
However, when I put it as a normal index.html without it being in an angular app, the client id is valid. Is it possible that it is because of how angular renders the components, resulting in 'async defer' to be not working? If so, how do I resolve this.
I tried using #types/gapi and gapi-auth2 but I also encounter errors that the module cannot be found. I did many fixes like adding the compilerType but it still does not work so I am trying to use the default html. Thank you.

Occasionally getting Reference Error in Javascript console

I am occasionally getting different types of Reference errors logged in chrome console.
For eg: require not defined
Cookies not defined
lozad not defined
The code is bundled in static-internal-bundle.js which is a combination of 7 different util files and minified using gulp-minify.
This error is coming mainly when the url is hit from paid.braintree.com Ad urls and has utm_source, utm_medium and utm_campaign as query parameters.
This error is not consistent and mostly does not reoccur if the site is refreshed.
Also, it has been logged in sentry for all types of devices and Os for over 1.5k times in 6 months. Though it gets logged in console, nothing seems to break on the webpage.
What could be the possible reasons for this type of error?
<script type="text/javascript" src="https://static.pens.com/576801d7b3a368c06ba1944c07fe260b970da596/build/static-internal-bundle.js"></script>
This is the script that gets added into the page in which the error is coming.
I would add this as a comment but StackO won't let me without 50+ rep... I'll edit as needed.
Possibly the error could be in using "require" on the browser side, as browsers do not implement require
This sounds like a problem I have had with Babel, if it is being used I would try updating.

jQuery waypoints not working on localhost

I'm trying to use jQuery. From jQuery Waypoints I downloaded the example shortcut for infinite scroll. When I checked the web console it gives the following error when it hits the end of the page.
XMLHttpRequest cannot load file:///Users/akash.bansal/Downloads/imakewebthings-jquery-waypoints-415eb55/shortcuts/infinite-scroll/. Received an invalid response. Origin 'null' is therefore not allowed access.`
Edit
Well, that error came because I was accessing a file from a file which got resolved when I allowed the file access in Chrome, but the jQuery-infinite scroll is still not working on localhost!!
Apart from opening Chrome and allow access to the file from other files...
An href link says:
<a href=".">
I changed it to the absolute path. It's working fine for me.

Debugging an error message in Firebug

I get this error message in Firebug:
Permission denied for <http://googleads.g.doubleclick.net> to call method Location.toString
It comes from this page:
http://www.comehike.com/outdoors/trees/add_spotted_trees.php?hike_id=108
The login credentials for this page are:
test#comehike.com | password
When I look at it in Firebug, using the Console --> Errors view, I see that error first, followed by a number of other errors, but I can't really double-click on the errors to see what line they are coming from, and the line isn't written there as far as I can see. There are some line references on the page, but they lead to pretty random spots.
Any ideas how to debug such a thing? I am new to JS and FireBug.
Thanks,
Alex
The Location.toString error is usually due to some ad-serving javascript code, trying to get a text version of the current page's location. Firefox denies access to this information to 3rd party scripts by default, since 3rd party scripts should have no business knowing exactly what page you're on.
Basically it's an attempt by ad networks to work around some clients not sending referers, by trying to grab the location data directly.
In firebug under the "bug" icon (upper left when open) you'll see a pause button (in the console tab). This will cause the page to stop loading and jump to the exact error in the script.
However, when I visited the page I do not see any errors.
body' onLoad is:
initializeTreeHike( , );
You don't need to use comma if you wish to pass no parameters to the function.
When I follow the provided link in Firefox 4.0 with Firebug 1.7, I don't receive the error you encountered. What I do receive however is the following:
Syntax error: initializeTreeHike( , );
It appears this is coming from line 326 in add_spotted_trees.php in the following line:
<body onload="initializeTreeHike( , );"
Perhaps you meant to pass in empty strings as parameters?

Categories

Resources