Develop Reference

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.

Damaged or frozen script on website, how to find it?

I am getting a message sometimes in Firefox, which says that a script is frozen or damaged. The script which the dialog mentions is:
http://example.com/:1
I can not reproduce the dialog at the moment, but the :1 looks suspicious. What could that mean?
The message in Firefox is similiar to this one: A script on this page may be busy, or It may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.
Thanks!

If a JavaScript error has a colon followed by a number, the number is what line in the script that caused the error.
For example, foo-bar.js:57 means the error occurred on the 57th line in "foo-bar.js".
The reason why your error says http://example.com/ is because the server of "example.com" is configured to display the home-page without saying "/home.html" in the URL, so you don't see anything after the "/". The JavaScript of "example.com" is probably inline, so it doesn't say http://example.com/script.js:1 either.
* I used fake examples for the "example.com" thing.

How to detect and display Javascript error from AJAX call in Chrome DevTools

I have a Rails app that receives form data and renders some Javascript. Here is an example of such a response:
The Rails app generates the Javascript without error and serves it with the correct content-type and a status code of 200. So on this tab in the DevTools there is no apparent error.
However, there is an error in the Javascript itself, namely an undefined function:
As you can see, I have "Log XMLHttpRequests" turned on in my DevTool settings. Javascript errors triggered from page events appear in the Console as expected, but Javascript errors from AJAX calls don't. The only way I can discover that there was an error in the returned Javascript is to copy/paste the code from the response into the Console.
This seems like a pretty critical feature that just doesn't exist. Am I missing something or is this simply not possible with Chrome DevTools? If so, is there a workaround to this problem that would fit into my workflow?

Javascript in asp.net MVC... Beginner issue

I created an Asp.Net MVC Internet Aplication and in my Index view of the Home Controller I have this
This is the first line, before the script results.
<script type="text/javascript" src="~/Script/Teste.js"></script>
<br />
This line comes after the script.
In my Teste.js I have this:
document.write("Yes! I am now a JavaScript coder!");
But nothing happens. If I change the src attribute and put some random name src="aaaa", despite the fact "aaaa" doesnt exist, I get no error in runtime.

EDIT
Also, check your path again. The default MVC templates in VS create a folder called Scripts, not Script. ("~/Scripts/teste.js")
Per the comment below, this was not the root cause of the issue, but in other cases can easily bite new JavaScript developers.
Most likely, your document.write function is firing before the document is ready, leading to the appearance that nothing is happening. Try the following in your Teste.js file
window.onload = function ()
{
document.write("Yes! I am now a JavaScript coder!");
//or even better as a test
alert("This alert was called");
}
Check the source of your page as well, it could be the document is being written to, you just can't see it due to markup/page styling.
As for you second issue, there will be no 'Runtime Exception' thrown if you reference a non-existent file. If you are using tools like Firebug or Chrome's developer tools, you should see a request to http://siteDomain/Scripts/aaaa.js with a response of 404, not found.

You generally should avoid using document.write() unless you absolutely have to use it for some reason... I don't think I've ever come across such a situation, and write a lot of Javascript.
Try this:
1) Put this in your HTML:
<script src="/scripts/teste.js"></script>
2) Put this in your JS:
alert('Yes! I am now a JavaScript coder!');
3) Open Chrome since it makes it easy to look for external resources loading and open the Network tab in Developer Tools (click the menu button at top-right, Tools > Developer Tools, Network tab).
4) Run your project and copy/paste the URL in the browser that comes up into this Chrome window, and hit enter.
When your page loads one of 2 things will happen:
A) You'll get the alert box you wanted or
B) You'll find out why it isn't loading because the Network tab will show the browser attempting to fetch teste.js and failing in some fashion, for example a 404, which would indicate you've got a typo in the path, or the script isn't where you thought it was, etc.

Put the following line at the very end of your document. There should not be anything after. Then try to load the page.
<script type="text/javascript" src="~/Script/Teste.js"></script>
Also, try pressing F12 once the page loads to see the source. Check if you script is there.

In MVC, the tilde is used to refer to the root URL of your application. However, it cannot normally parse this information. If you write:
<script src="~/Script/Teste.js"></script>
The lookup will fail, because the ~ means nothing special in HTML. If you're using Razor as your view engine (not ASPX), you need to wrap that call in Url.Content like so:
<script src="#Url.Content(~/Script/Teste.js)"></script>
Doing this will ensure a valid URL is provided to the browser.
With that in mind, you need to check that you have the file name and folder name both correct. You also need to ensure that the file is being deployed with your application. You can do this my opening the properties panel while the file is selected in the Solution Explorer and pressing F4.

Can I prevent the Chrome Developer Tools console from logging image 404 errors? [duplicate]

This question already has answers here:
Suppress Chrome 'Failed to load resource' messages in console
(3 answers)
Closed 5 years ago.
The Chrome Developer Tools console logs an error each time a page asset (including an image) isn't found (i.e. returns 404).
In my work, I'm often working on sites where images are provided by third parties and may not be available during development. Having each missing image show up as an error in the console makes other more important errors (e.g. JavaScript errors) harder to notice.
Is there a setting that stops the console logging unfound images as errors?
Or is there some way to filter console messages by the same sort of criteria that you can filter requests by in the Network tab?
(See e.g. http://chromium.googlecode.com/issues/attachment?aid=1337330000000&name=Screenshot-Google%2B+-+Google+Chrome.png&token=1F05er8uKjAQEEBrUITFjsIGJ2A%3A1358867878658&inline=1)

Work has "started" on this by the Chromium team: https://code.google.com/p/chromium/issues/detail?id=96212
Update: The feature request was closed on March 18, 2013. I'm not sure in which version of Chrome this feature first appeared, but I can confirm console filtering options in my Chrome v33.0.1750.152 (Linux).
Update 2: Currently, when a filter (plain text or regular expression) is entered, it is tested against the message text (e.g. GET http://example.com/foobar 404 (Not Found)) as well as the text of the right side link (e.g. test.html:65). (I have filed an issue with Chromium to track this.)
As a workaround, use a regular expression filter like:
^(?!.* 404 \(Not Found\))(?!.*[file name])
where [file name] is the file name from the right side link.
For example, if my page is test.html, then ^(?!.* 404 \(Not Found\))(?!.*test\.html) will work.
Note: This will also filter out messages that have the file name in the message text. I'm not sure there is a way around this for now.
Update (2019-06-05): This expression will filter out 404s in my current version of Chrome (75.0.3770.80):
-/404\s\(Not\sFound\)$/
It seems the filtering first splits the filter string by whitespace before processing each token, but it will also split spaces inside of a regular expression, so the \s's are necessary.
Technically, this will filter out any message ending with the (case insensitive) string "404 (Not Found)", including console.log messages.

In the chrome developer tools, it's under the "Console" tab. Click "Filter" and it will be on the filter line as a checkbox.

As an alternative answer you could run a bit of javascript to alter the src attribute of the offending images when on your dev server (just make sure you don't publish it to your production environment!).
If you don't want to actually add javascript to the page (understandably) you could probably run the script on load of the page via a chrome plugin (perhaps the greasemonkey chrome clone - tampermonkey).
n.b. Thanks for the feedback, notably for this to work it'll need to be within an event after the dom is ready and before the images load.

In your app, in your 'catch' statement.. log the exception under 'console.warn' .. know it works with firebug. In Firebug, you can then find these 'errors' under the 'warnings' tab. I would like to think the same can be true for Chrome Developer Tools..
actually did something similar day ago.. my app would stop on some error, so, I instead used the 'try' and 'catch' block. My catch looks like:
catch (e) {
console.warn(e);
}