Code works in Codepen but not when called with index.html - javascript

https://codepen.io/mdaw11/pen/rNMbdqd
Created this little issue tracker for public use, works fine in Codepen, however once I try to open it in Chrome browser, the console outputs error
'Uncaught TypeError: Cannot read property 'length' of null
at fetchIssues (main.js:71)
at onload ((index):10)'
This tells me that there is something wrong with my fetchIssues(); perhaps var issues = JSON.parse(localStorage.getItem('issues')); isn't outputting what I expect it to be?
Any help would be much appreciated!

Could be fetchIssues() is being executed too early and could also happen if you don't have anything saved to the localStorage yet. Also double check what localStorage.getItem('issues') returns.
To fix that error you could try something like:
var issues = JSON.parse(localStorage.getItem('issues') || '[]');

Related

Uncaught TypeError: Cannot read property 'unselectable' of null in VueJS-Laravel

I'm having a problem with CKEditor. It's very unstable. Sometimes it works, most times it doesn't. After reading some internet chatter, CKEditor does a poor job at sanitizing themselves and causes this error Uncaught TypeError: Cannot read property 'unselectable' of null. Whatever that means :/ Bottom line is, it crashes a lot.
One solution I found was to add:
ckInstance.removeAllListeners();
CKEDITOR.remove(ckInstance);
Not sure where that should go so I added to the instantiation of CKEDITOR in app.balde.php, like so:
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
try{
CKEDITOR.replace( 'article-ckeditor' )
ckInstance.removeAllListeners();
CKEDITOR.remove(ckInstance);
}
catch {
};
</script>
That's not fixing it. Am I supposed to add this somewhere else? Or do you have any other ideas? Here's a kicker. If I add:
import CKEditor from "#ckeditor/ckeditor5-build-classic";
Vue.use(CKEditor);
in the app.js file, it works, but lots of other stuff break everywhere. I'm not sure what gives.
Any help is appreciated

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.

How do I log everything with sentry/raven-js

I'm working on an existing project, with a lot of webpages. My task is to introduce logging og client script errors, usingsentr/raven-js.
In the docs, it says that i need to wrap the functions that I need to track in try/catch blocks - this is familiar to me, since I usually work in C#. But I don't wat to edit alle pages to wrap ALL javascript functions in try/catch. Is there a way to log ALL errors?
I tried something with window.onError = Raven.process, but I didn't get any logentries.
Can someone show me a what I'm missing? My setup is this:
var options = {
logger: 'my-test-logger',
whitelistUrls: [
/localhost/,
/localhost:2109/
]
};
Raven.config('https://<public-key-removed>#app.getsentry.com/<project-key-removed>', options).install();
window.onerror = Raven.process;
My setup was correct, except for the line:
window.onerror = Raven.process
For some reason I couldn't provoke any error to fire the logging event, but once I managed to simulate a real error, the logging worked just fine. The line:
Raven.config('https://#app.getsentry.com/', options).install();
does catch all errors.
It is important to realize that raven does not capture errors you trigger with the console. You need to put some error generating code directly in the page, or do something like this from the console:
window.setTimeout(function(){ foo() });
Also, i think that doing:
window.onerror = Raven.process
Is unnecessary, Raven already does that for you, in a much more advanced way.
Try the following code to disable logs from raven.js
Raven.config('your dsn', {
autoBreadcrumbs: {
console: false
}
});
Raven will from version 1 log all window.onerror errors by default.
See https://raven-js.readthedocs.org/en/latest/config/index.html#collectwindowerrors

Uncaught TypeError: Cannot read property 'value' of null, need some direction

I have been trying to figure out this particular problem in my developer tools, but I've had no luck thus far. I have an error on one of my js files that says
Uncaught TypeError: Cannot read property 'value' of null
The following error refers to the 1st variable of dt_version below. The particular thing is if I comment out the first line of code. I get the same error on the following variables of offload1 and offload2. The variable is a number that I am trying to get passed over. I run this function on my body when the page loads...onload=updatetotal();
function updatetotal() {
var dt_version = document.getElementById("dt_version").value-0;
var offload1 = document.getElementById("capacity_offload1").value-0;
var offload2 = document.getElementById("capacity_offload2").value-0;
var offload3 = document.getElementById("capacity_offload3").value-0;
}
If a run an if statement looking for document.getElementByID("dt_version");...it defaults to false..so its not being carried over though on the previous page, I can see its input fine with the value in it. What am I missing here guys?
This error means that the id dt_version does not exist. Check your html to make sure it is there:
var dt = document.getElementById("dt_version");
if (dt){
// do your stuff
}else {
console.log("dt does not exist")
}
Another cause for this error may be- as you are calling the javascript function on page load there is a possible chance that your control is not yet completely rendered to the page. A simple solution is just move that control to the beginning of the page. If it doesn't work then an reliable solution is, call the function inside jquery $(document).ready().

Problem tracking what javascript is causing jQuery UI error in firebug

So I am getting the following error in firebug regarding jQuery UI. It would be as simple if it was a matter of a process-of-elimination on the JS on the page, but there is allot of JS as well as some on the page and some on the site.master.
ERROR
(this.uiDialogTitlebarCloseText = c("<span/>"))
.addClass("ui-icon ui-icon-closethick").text(m.closeText).appendTo
is not a function
Is there a way in Firebug to see what javascript is the initial caller?
Well your problem is likely that m.closeText is null. If you pass a null argument to text() it will actually return the text of the element, and not set the text to null.
I'm not sure about how to debug it though.
EDIT: The error is thrown because if text(null) returns a string, than you'll be saying string.appentTo rather than $().appendTo.

Categories

Resources