P5js, puppeteer twitter bot having node or canvas issue

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.

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

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?

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