Develop Reference

JS causing console error as the script isn't needed on every page

I have some Javascript (below) that is resulting in a console error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener').
var trigger = document.getElementById("hello");
var audio = new Audio('audio/hello.mp3');
window.addEventListener('DOMContentLoaded', () => {
trigger.addEventListener("click", function(event) {
event.preventDefault();
audio.play();
}, false);
});
I believe this is because all my script is in a single .js file and as the page I'm viewing doesn't run this script it can't find the element it's related to.
As the above script is only run on a certain template. I thought I could wrap it in the following but that didn't seem to work and threw up it's own errors?
if (document.querySelector('.template-name') { // Existing Code }
Not sure if there's more of a 'global' way to prevent these types of error but I thought just checking the html element had a certain class seemed like a good workaround for this instance?

Is there a way to intercept ALL JavaScript errors?

Goal: When any JS error occurs, grab the information from that error and execute a custom function with it.
Description: If a script creates an error like this...
var a = test;
// VM334:1 Uncaught ReferenceError: test is not defined
...how can I "intercept" that error; perhaps something like this:
Error.onerror = function(e){ alert("The error is " + e ); }
// "The error is VM334:1 Uncaught ReferenceError: test is not defined"
Note:
I am aware of the following:
window.onerror = function(){...}
window.addEventListener('error', ... )
Unfortunately these do not get the job done for reasons I believe are related to scope. I believe many errors will fail to be tracked because they do not live on the window object.
try{}catch(e){alert(e)} is also not a solution because it is too particular about where the errors come from.
I have also tried overwriting console.error but this function is not called when a JS error occurs on page.
Is there a way to respond to ANY JS error?
Cheers

How to resolve this error type 'Uncaught TypeError: (...) is not a function'?

I am aware of the another question like this on stackoverflow and have looked at it, but it doesn't answer/resolve my situation that I'm having from which the error has occurred.
I'm trying to make both scripts, embed.js (plugin) & more-content-arrow.js (my script) work properly on the page when the document loads. When and if I remove either script, one or the other will work but not both scripts together. When the page finishes loading first, it will load the more-content-arrow.js properly, then when it is trigged again by a scrolling event, it will give off this error message in the console browser:
VM249 embed.js:2 Uncaught TypeError: ((fe.event.special[s.origType] || (intermediate value)).handle || s.handler).apply is not a function
at dispatch (VM249 embed.js:2)
at m.handle (VM249 embed.js:2)
I tried to resolve it by adding a jQuery.noConflict();, but that doesn't work as I assume it could be a conflict between the two scripts. The only way I found out to get rid of the error message is removing one of the two scripts file or removing $.getScript(...), but I don't want to do that. I want to be able to keep both scripts running properly in the page.
JS:
$(document).ready(function(){
//jQuery.noConflict();
$.getScript("more-content-arrow.js", function(){
alert("arrow script loaded and executed.");
});
});
I recreated a jsfiddle with the uncaught type error here:
https://jsfiddle.net/wr6cc2ct/2/

Your error appears it be in your more-content-arrow.js file, you were passing an integer as a third argument which is not a handler, here is the jquery doc for .on()
$(window).on('scroll', function () {
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}); // <--- removed integer here.
Update
Alternatively, you can use event.stopPropagation(); along with re-ordering the jquery.unevent.js script after the ember.js script.
$(window).on('scroll', function (e) {
e.stopPropagation();
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}, 800);

Checking if specific console error occurred/exists with javascript

I would like to check if a certain console error has occurred using javascript, and alert() myself if it has.
The error will look like this:
00:00:34:0359 TimeEvent.COMPLETE
(anonymous function) # VM17617:1
And the algorithm will look something like this:
function checkError(console) {
if(console.error === "TimeEvent.COMPLETE") {
alert("The error is present");
}
}
I'm not very familiar with the console, and haven't gotten much further with Google research. Can somebody point me in the right direction?

I ultimately solved my question by following this blog post on taking over the console with javascript.
Here is my final code:
var original = window.console
window.console = {
error: function(){
//Gets text from error message.
errorText = arguments['0'];
if (errorText.includes('TimeEvent.COMPLETE')) {
//DO STUFF HERE
}
original.error.apply(original, arguments)
}
}

You didn't provide the whole picture about how and when the console is getting the error. If you raise the error yourself, or if you are able to catch it inside a try catch, that would be the best place to intercept those errors.
However, if you have no control about how those error are raised, you should try to intercept your console's error calls. I never tried it myself but this SO answer explains how to intercept the console's log calls. Knowing that the console usually have a function named error that is similar to the log function, I'm sure you could apply the same logic to intercept the errors sent to the console.
If you are using chrome, you may refer to the console documentation for more details about the error function. I'm not sure if there's a standard butInternet Explorer and Firefox also has support for console error function.

Possible causes of Cannot read property constructor of undefined

I want to iterate over all the forms present in a div. So I am using the following code for this
$('#divid form').each(function (index, formDetails) {
if (formDetails) {
console.log($(formDetails).attr('id'));
}
});
This is working fine in Mozilla with no issues but when I run this code in Chrome sometimes it throws the following error.
This error is coming
Uncaught TypeError: Cannot read property 'Constructor' of undefined
I am using Version 33.0.1750.117 m of Chrome.
Why this error is coming I am not able to understand?

Sounds like you don't have jQuery included before your try and load your functions.
Wrap your javascript code inside the below function:
$(document).ready(function() {
alert('loaded');
}
Also check if the initial is $ or jQuery