P5js, puppeteer twitter bot having node or canvas issue

Glitch Help
1

Hello,
my twitter bot was working until May 23 when it started tweeting the same image over and over again…

project name is cellular-botomata

in create-img.js it creates a image using p5.js on a canvas

var cnv = createCanvas(510, 510);
cnv.id('ca-canvas');

then on the node side, in server.js, it runs puppeteer, takes a screenshot and then stashes the png in the tmp directory. the following code is how puppeteer knows to take a screenshot of the canvas element.

var imgBuff = await screenshotDOMElement({
  path: 'tmp/desire.png',
  selector: 'canvas',
  padding: 0
})

Then it waits for puppeteer to evaluate the page - code is from screenshotDOMElement():

const rect = await page.evaluate(selector => {
    const element = document.querySelector(selector);
    if (!element)
        return null;
    const {x, y, width, height} = element.getBoundingClientRect();
    return {left: x, top: y, width, height, id: element.id};
  }, selector);

if (!rect)
  throw Error(`Could not find element that matches selector: ${selector}.`);

/app/server.js:49 is the throw Error message.

cron-job.org is making successful GET requests
create-img.js is generating a new img each time I click “show live” or go to https://cellular-botomata.glitch.me/.

I deleted desire.png from the tmp directory and now nothing gets tweeted because server.js is not writing a desire.png file into the tmp directory.

Node is throwing the following error messages over and over:

(node:536) UnhandledPromiseRejectionWarning: Error: Could not find element that matches selector: canvas.
    at screenshotDOMElement (/app/server.js:49:13)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

(node:536) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().

I used a mix-in from someone else to get puppeteer to work, but, as I said, this was working a week ago, not sure if I’m having the error because I’m not handling async issues – no catch blocks, no .catch() - still trying to figure out how to code these properly – or if something changed with puppeteer in the last week or so and I need to update that code.

Any suggestions/directions will be helpful.

2

It looks like you’re loading https://nonstop-turnover.glitch.me with puppeteer, and then looking for a canvas element there. There doesn’t seem to be a canvas element on that page, so you get an error. Maybe that project was changed?

Great name, BTW.

2 Likes
3

woah. that is weird.

that was the original name for the project, then I changed the name to cellular-botomata. but I did that a month or two ago. and like i said, it has been running for weeks without barfing.

So, a simple mistake, but odd that it broke now and not earlier…

i updated the code to reflect the current name and it created a new desire.png, which worked the first time i hit the http://cellular-botomata.glitch.me/tweet endpoint, but then it started tweeting that image over and over again.

So, again, I deleted desire.png from the tmp directory, and, now it is not writing a new desire.png file into the tmp directory.

Thanks for the eyes, but something else seems to be going on.

  // create the image via puppeteer screenshot
  var imgBuff = await screenshotDOMElement({
      path: 'tmp/desire.png',
      selector: 'canvas',
      padding: 0
  })
  console.log('ib', imgBuff);

it never gets to the console.log, or at least it doesn’t write that in the console. in fact when i add other console.log() statements in server.js that runs puppeteer it doesn’t get to them:

  // options with timeout: 0 mean NO Navigation Timeout errors
  await page.goto('https://cellular-botomata.glitch.me', {
              waitUntil: 'networkidle2', 
              timeout: 0
              });
  console.log('open page');

doesn’t write “open page” in the console.

but it does write this one which comes before the other 2:

console.log('delay over');

any more thoughts?

4

ok. now it is working again. i hate intermittent errors.