Debug Javascript in wicked pdf

[divyaravva]

Hi,

I'm using some javascript in the html file to get colors in the PDF for a SVG map.
Is there any way to debug (using consoles) in the javascript.

Thanks for the help!!!

[unixmonkey]

You can use the :view_as_html option to render like this:

  render pdf: 'mypdf', view_as_html: true

Though this can change the way some data is loaded, it's a great way to debug and get things ready.

If you are having issues with the JavaScript that only manifest in the PDF render, I'm not very sure how you can debug that, except maybe ajax-ing out to your webserver and watching the request log or capturing network traffic.

Let me know how it goes!

[toao]

@unixmonkey I have indeed the issue that the page (including the JS) works in debug mode but not when actually generating the PDF :/
Any ideas on how to see at least the JS errors that might be thrown?

[unixmonkey]

@toao You can use a JS error reporting service, such as https://sentry.io to maybe get more detail if it is erroring out.

[phoenisx]

@unixmonkey I have indeed the issue that the page (including the JS) works in debug mode but not when actually generating the PDF :/
Any ideas on how to see at least the JS errors that might be thrown?

I am facing the same issue, where js loads fine in debug mode (without any errors), but fails on pdf. Previously, I found that when js uses ES6 syntax, wicked_pdf breaks. But this time I am facing the issue, even when there is no ES6 syntax being used.

There should be some way to log errors generated while parsing js in wicked_pdf.

Is there any option or toggle we need to enable in wicked_pdf to debug js errors while parsing?

We are using v1.1.0

[unixmonkey]

This looks like it could be adapted to be a nice way to show you JS errors, since you don't have access to a console in PDFs:
https://stackoverflow.com/a/45168597/23915

if ($pdf=$("#pdf_is_here")).length
    for type in ["log","warn","error"]
        do (type) =>
            console[type]= (a...) =>
                $pdf.append("<div class='#{type}'>#{s}</div>") for s in a

    window.onerror= (messageOrEvent, source, lineno, colno, error) =>
        $pdf.append("<div class='critical'>#{messageOrEvent}</div>")
        $pdf.show()

    $pdf.hide() # just in case css is not here

I'd be open to making a JS version of this a helper in the gem if it works well.

[phoenisx]

@unixmonkey I tried the given solutions from the stackoverflow thread. I used the following js:

      var $pdf = $(".pdf-errors");

      // This prints in the pdf, that means code works till here
      $pdf.append('<span> Testing Errors wrapper</span>');

      // This if block fails in pdf (I guess due to var args, not sure). 
      // So I tested this code, in both ways,
      // where this if block is present and where it is not. 
      if ($pdf.size()) {
        ["log","warn","error"].forEach(function (type) {
          console[type]= function (...a) {
            a.forEach(function (s) {
              $pdf.append('<div class="' + type + '">' + s + '</div>');
            })
          }
        })
      }

      // This gets intialized if the above if bock is not present, but I don't see any 
      // errors, neither do I see my pdf working as expected.
      window.onerror = function (messageOrEvent, source, lineno, colno, error) {
        $pdf.append('<div class="critical">' + messageOrEvent + '</div>');
        return false;
      }

      // This block is just in case situation, thought the above handler might not be initialized in pdf
      // so used this handler, but this one is not working too...
      window.addEventListener('error', function (error) {
        $pdf.append('<div class="critical"> Anything related to error </div>');
      });

I even tried downloading the QT Browser mentioned in the thread, but it does not work on Mac, so couldn't test it.

I guess there should be some other solution, like enabling verbose mode to wkhtmlpdf command, and testing the api and verbose logs (not sure).