Page fails to render AJAX \ Angular content

[brianb-cp]

We have a page that renders correctly in stand-alone PhantomJS (exe). But when run as part of manet, the renderer fails to wait for the page to finish loading data via ajax. The result is that the page is rendered with correct formatting but without data. Even if the timeout is set to 10 seconds. (in reality the page takes about 2 sec or less to load its data).

An example of the page can be found here: http://goo.gl/Y43rb0

[vbauer]

It looks like your page contains error. I've just checked it with standalone PhantomJS and used the following script:

var page = require('webpage').create();
page.open('http://cp-ms-estimate-dev.azurewebsites.net/items/customer.html?id=brian-pc', function() {
  page.render('test.png');
  phantom.exit();
});

The result was:

3:26:47 vbauer@vladislav-bauer manet master ? phantomjs src/scripts/check.js                                                                                                                                                              8 ↵
TypeError: 'undefined' is not a function (evaluating 'a[e].bind(a)')

  http://cdn.jsdelivr.net/pouchdb/3.4.0/pouchdb.min.js:10
ReferenceError: Can't find variable: angular

  http://cp-ms-estimate-dev.azurewebsites.net/items/customer.html?id=brian-pc:472

You will have the similar error, if use parameter --level=debug with manet:

debug: Options for script: {"url":"http://cp-ms-estimate-dev.azurewebsites.net/items/customer.html?id=brian-pc"}, base64: eyJ1cmwiOiJodHRwOi8vY3AtbXMtZXN0aW1hdGUtZGV2LmF6dXJld2Vic2l0ZXMubmV0L2l0ZW1zL2N1c3RvbWVyLmh0bWw/aWQ9YnJpYW4tcGMifQ==, command: ["phantomjs","--ignore-ssl-errors=true","/Users/vbauer/Documents/workspace/js/manet/src/scripts/screenshot.js","eyJ1cmwiOiJodHRwOi8vY3AtbXMtZXN0aW1hdGUtZGV2LmF6dXJld2Vic2l0ZXMubmV0L2l0ZW1zL2N1c3RvbWVyLmh0bWw/aWQ9YnJpYW4tcGMifQ==","/var/folders/3k/mymj0cx15f9c3m0kv4gch66h0000gn/T/eyJ1cmwiOiJodHRwOi8vY3AtbXMtZXN0aW1hdGUtZGV2LmF6dXJld2Vic2l0ZXMubmV0L2l0ZW1zL2N1c3RvbWVyLmh0bWw/aWQ9YnJpYW4tcGMifQ==.png"]
debug: Process output: Script options: {"url":"http://cp-ms-estimate-dev.azurewebsites.net/items/customer.html?id=brian-pc"}
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/items/customer.html?id=brian-pc
Resource downloaded: http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
Resource downloaded: https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js
Resource downloaded: http://cdn.jsdelivr.net/pouchdb/3.4.0/pouchdb.min.js
TypeError: 'undefined' is not a function (evaluating 'a[e].bind(a)')

  http://cdn.jsdelivr.net/pouchdb/3.4.0/pouchdb.min.js:10
Resource downloaded: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/javascript/db.js
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/normalize.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/interior.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/colorsFonts.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/javascript/dbRemote.js
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/container.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/item.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/room.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/doors.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/proposal.css
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/CSS/dialog.css
ReferenceError: Can't find variable: PouchDB

  http://cp-ms-estimate-dev.azurewebsites.net/javascript/dbRemote.js:24
  http://cp-ms-estimate-dev.azurewebsites.net/items/customer.html?id=brian-pc:588
  http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
  http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
  http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
  http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4
Resource downloaded: http://cp-ms-estimate-dev.azurewebsites.net/Images/CPlogo_4C_trans_350.png
Rendered screenshot: /var/folders/3k/mymj0cx15f9c3m0kv4gch66h0000gn/T/eyJ1cmwiOiJodHRwOi8vY3AtbXMtZXN0aW1hdGUtZGV2LmF6dXJld2Vic2l0ZXMubmV0L2l0ZW1zL2N1c3RvbWVyLmh0bWw/aWQ9YnJpYW4tcGMifQ==.png

debug: Execution time: 5.69 sec
debug: Process finished work: eyJ1cmwiOiJodHRwOi8vY3AtbXMtZXN0aW1hdGUtZGV2LmF6dXJld2Vic2l0ZXMubmV0L2l0ZW1zL2N1c3RvbWVyLmh0bWw/aWQ9YnJpYW4tcGMifQ==

You can try to update PouchDB library, maybe it will help.

[vbauer]

Hmm.. Accidentally, it works fine with query parameter delay=1000.

[brianb-cp]

Thank you for the fast response.

I am trying to reproduce the error message you found using PhantomJS v2.0 which is what I was initially using to test but v2.0 does not seem to support --level=debug. I am trying page.onError but that is not showing any errors. Is there a way to instruct manet to use a manually installed version of Phantom (eg 2.0)?

I have attached a png which was created during my testing. Since it is fully rendered it would seem that the various libraries (pouch, angular, etc) are able to successfully load. But again, this is in 2.0.

[vbauer]

I am trying to reproduce the error message you found using PhantomJS v2.0 which is what I was initially using to test but v2.0 does not seem to support --level=debug.

Actually, it is manet's parameter and you can use it like this: manet --level=debug

I am trying page.onError but that is not showing any errors. Is there a way to instruct manet to use a manually installed version of Phantom (eg 2.0)?

You can't configure version of PhantomJS, but it is possible to configure specific path to the PhantomJS executable file using 'default.json' configuration file or --command parameter (see readme file).

I have attached a png which was created during my testing. Since it is fully rendered it would seem that the various libraries (pouch, angular, etc) are able to successfully load. But again, this is in 2.0.

Could you please provide a code snippet for PhantomJS, which you used to make this screenshot? It will help to fix this issue.

[brianb-cp]

The following code successfully renders the page in PhantomJS (v2.0):

var page = require('webpage').create();

page.onError = function (msg, trace) {
    console.log(msg);
    trace.forEach(function (item) {
        console.log('  ', item.file, ':', item.line);
    });
};

page.open('http://cp-ms-estimate-dev.azurewebsites.net/items/customerPDF.html', function() {

    console.log('Page open');

    page.evaluate(function() {
        document.body.bgColor = 'white';
    });

    setTimeout(function () {

        console.log('Begin render');

        page.render('manetTest.pdf');

        phantom.exit();

    },5000)

});

[vbauer]

I've just tried to check this issue with PhantomJS 2 and it also works fine...

npm uninstall -g phantomjs
npm install phantomjs2

I used the following URL with Manet:

http://localhost:8891/?url=http%3A%2F%2Fcp-ms-estimate-dev.azurewebsites.net%2Fitems%2Fcustomer.html%3Fid%3Dbrian-pc&delay=5000&force=true

Could you please provide URL that you checked? It could help to find a problem.

PS: Btw, which version of Manet did you use?

[vbauer]

I suggest to close this issue, if somebody has the similar problem - please reopen it or create a new one.