wkhtmltopdf and the jQuery.ready() function - javascript

I've been trying to generate a PDF using the wkhtmltopdf tool (http://wkhtmltopdf.org/). The page from which I want to generate a PDF using jQuery and has some initializations using a jQuery.ready() function, something like this:
jQuery(function() {
// do something
});
However, when I try to generate a PDF from the page the script is not executed. I've tried setting a delay to wait for the JavaScript to be executed with the option:
--javascript-delay 30000
But the result is the same.
When I've enabled wkhtmltopdf's JavaScript debugging option I get a warning, which I'm not sure if it's related to the problem:
Warning: undefined:0 TypeError: 'null' is not an object
Has anyone encountered this problem? Is there some kind of workaround?
EDIT: Seems the problem is caused by the error Warning: undefined:0 TypeError: 'null' is not an object. I've managed to print the error on the PDF using:
window.onerror = function(error, url, line) {
$('body').before('<b> Error: ' + error + '</b> <br />');
$('body').before('<b> Url: ' + url + '</b> <br />');
$('body').before('<b> Line: ' + line + '</b> <br />');
console.log(error, ' ', url, ' ', line);
};
But the information is very limited and I have no idea what might cause it:
Error: TypeError: 'null' is not an object
Url: undefined
Line: 0

The problem turned out to be that Qt doesn't support localStorage, so one of the initialization scripts failed which cause the jQuery.ready() not being executed.
I've managed to debug it with a browser with Qt support: QtWeb. (Tried Arora as well, couldn't run it on my system).

Related

Can't pinpoint error origin using Chrome Developer Tools + Apps Script (Javascript error)

I am trying to debug an error on my code, I am using Apps Script and I know my error is related to JavaScript. To be more exact, here:
agendaColaboradores.append('<input class="elementoFormularioMovCob" type="time" id="movCobHoraEntradaES' + colaboradorTrim + '" name="movCobHoraEntrada' + colaboradorTrim + '"' + 'onchange="teste()"' + '>\r');
every time I edit the input, the onchange trigger works as expect. I know this because everytime I change the input value I get this error message:
Uncaught SyntaxError: missing ) after argument list (at userCodeAppPanel:1:40922)
With is useless since I can't check what is the code content. If i click userCodeAppPanel:1:40922 it's just show me a blank script.
Nothing in this error seems to make sense:
<input class="elementoFormularioMovCob" type="time" id="movCobHoraEntradaESAlexsandroLuizAlbani" name="movCobHoraEntradaAlexsandroLuizAlbani" onchange="teste()">
This is the result of the .append. A regular input element with no errors, it should just trigger teste() but I keep getting this content.
Try it this way:
agendaColaboradores.append(`<input class="elementoFormularioMovCob" type="time" id="movCobHoraEntradaES${colaboradorTrim}" name="movCobHoraEntrada${colaboradorTrim}" onchange="teste();" />`);
write debugger in the first line of taste function and then trigger it from frontend , it should stop execution in the first line of dev tools and from there you can step till the line you get error

Javascript function not defined in FireFox only - indeed_clk is not defined

I'm at a loss to figure out why a JavaScript function is not defined.
It works on all browsers, and all versions of FireFox on my dev machine. But the error occurs for some users running FireFox.
The external JavaScript include file is provided by Indeed.com.
The include file that contains the function definition (indeed_clk) is
<script type="text/javascript" src="http://www.indeed.com/ads/apiresults.js"></script>
This line appears immediately after the head elememt
Further down the page, the indeed_clk function is referenced using the following pattern
<a onmousedown = "indeed_clk(this,'7832');" href="landing page..." >Click to view</a>
The error message is "indeed_clk is not defined"
A sample page that demonstrates the rendered html and Javascript code is
http://www.contractsforgeeks.com/TechJobs/All_States/All_Cities.aspx
Any suggestions as to why the function would not be defined in FF, and not work only for certain machine configurations would be appreciated.
Try changing:
indeed_clk(this,'7832')
To:
indeed_clk(this,'7832');"
I found a solution/workaround to the problem, but still don't understand why the error occurs.
It seems that the presence of an error Handler causes an error (but only in FF for some users)
An error handler was hooked up
(document).ready ( errorHandling);
function errorHandling()
{
window.onerror = function (message, url, line) {
var msg = message + "\n" + " url:" + url + "\nline:" + line;
alert(msg);
}
Disabling the error handling enabled the missing indeed_clk function to be found.

Line and column in Javascript Error event attributes

I've decided that there are some errors which I don't want to go to the browser error handler. But I still want to know about them. In my actual code I have a function which stores the errors in a hidden element and ajax submits them to a database. Following is a simplified version of my try block:
try
{
newValueEvaled = eval(newValue);
}catch(err)
{
alert("Error caught: Line " + err.lineNumber + ((err.columnNumber != undefined)?', Column:' + err.columnNumber:"") + '\n' + err.message);
}
I'd like the columnNumber too. Currently it is never there, but somehow the browser error console has access to it. Can anyone tell me how I can get access to it as well?
I'm almost certain it's not possible to get the error column number from JavaScript running in the page. Firebug/WebKit console/IE console has access to internal browser objects that provide more information about the call stack than is available to code running inside the page.
You can access the error line and possibly column using a custom error handler function:
function dumpErrors(error, file, line, column)
{
alert('Error: ' + error + ', occurred in file: ' + file + ', on line: ' + line + ', at column: ' + (column || 'unknown'));
}
onerror = dumpErrors;
The «line» is available for all browsers. For the «column», it seems it's available on latest Chrome (release 30.0+), but not on Firefox (release 17, running on my Linux).

Is there a way to try/catch an entire page dynamically?

I have a page on which mysterious JavaScript errors keep popping up. They appear to be coming from the application we use and do not own the source for. I'm working on a real solution to this issue, but we have a demo tomorrow and I was wondering if there is a way to just suppress JS errors page wide (like wrapping ALL the javascript components in a giant try catch).
You could add a handler to the window.onerror event. In this case, all the errors that occur inside the window will be redirected to the handler of this event. (I did test this in Firefox and it worked, but I was having trouble with it in Chrome - my Chrome installation is pretty messed up, so that could be the problem, but there are Chromium bugs filed that relate to this issue: bug #7771 and bug #8939)
window.onerror = function (msg, url, line) {
alert("Error on line " + line + " in " + url + ":\n" + msg);
// return true to prevent browser from displaying error
return true;
}

Does Javascript fire an event for unhandled/uncaught exceptions?

I'm looking to log unhandled javascript exceptions. Is there an event that fires when an exception isn't caught? I'm looking to catch the exceptions before they cause javascript errors in the browser, but I'd rather not run my entire application inside of a try/catch. Any help would be appreciated. Thanks!
Update:
tvanfosson pointed out onerror as a possibility. It is not part of a spec and is only available in IE or Gecko based browsers.
For more information - http://books.google.com/books?id=tKszhx-XkzYC&pg=PA386&lpg=PA386&dq=safari+onerror+javascript&source=web&ots=gQaGbpUnjG&sig=iBCtOQs0aH_EAzSbWlGa9v5flyo#PPA387,M1
OnError Support Table - http://www.quirksmode.org/dom/events/error.html
Mozilla's documentation - https://developer.mozilla.org/en/DOM/window.onerror
WebKit Bug Report - https://bugs.webkit.org/show_bug.cgi?id=8519
Check out this Fiddle:
http://jsfiddle.net/xYsRA/1/
window.onerror = function (msg, url, line) {
console.log("Caught[via window.onerror]: '" + msg + "' from " + url + ":" + line);
return true; // same as preventDefault
};
window.addEventListener('error', function (evt) {
console.log("Caught[via 'error' event]: '" + evt.message + "' from " + evt.filename + ":" + evt.lineno);
console.log(evt); // has srcElement / target / etc
evt.preventDefault();
});
throw new Error("Hewwo world. I crash you!!!");
throw new Error("Hewwo world. I can only crash you once... :(");
Which prints:
Caught[via window.onerror]: 'Uncaught Error: Hewwo world. I crash you!!!' from http://fiddle.jshell.net/xYsRA/1/show/:32 fiddle.jshell.net:21
Caught[via 'error' event]: 'Uncaught Error: Hewwo world. I crash you!!!' from http://fiddle.jshell.net/xYsRA/1/show/:32 fiddle.jshell.net:26
ErrorEvent {lineno: 32, filename: "http://fiddle.jshell.net/xYsRA/1/show/", message: "Uncaught Error: Hewwo world. I crash you!!!", clipboardData: undefined, cancelBubble: false…}
fiddle.jshell.net:27\
Notes:
If you remove the "return true" / "evt.preventDefault()" lines, then after the error is logged, it will print on the JS console in the normal way.
Contrary to statements made above, window.onerror worked in all the browsers I tested. However, the addEventListener method is probably better anyways and provides richer semantics.
Try using an onerror handler. Docs from MDN. This will allow you to do something when an error is detected, but probably won't let you continue in a graceful way that a try/catch block would. Be aware that are undoubtedly differences between browsers in how this is handled.

Categories

Resources