[Bug]: listeners added via page.on("request", listener) can't be removed via page.off("request", listener)

[fruttut]

Bug description

Consider this snippet:

import puppeteer from "puppeteer";

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("http://example.com", { waitUntil: ["load", "networkidle0"] });
await page.setRequestInterception(true);
const handler = (request) => {
  console.log("Handler invoked");
  request.continue();
};
console.log(page.listenerCount("request")); // 0
page.on("request", handler);
console.log(page.listenerCount("request")); // 1
page.off("request", handler); // the listener is not removed
console.log(page.listenerCount("request")); // 1
})();

This is very confusing in and of itself, but it gets much worse if I need to swap my request listener with another one later on:

const anotherHandler = (request) => {
  console.log("Another handler invoked");
  request.continue();
};
/*
 * When this handler is invoked and tries to process request with request.continue(), I get 
 * UnhandledPromiseRejectionWarning: Error: Request is already handled!
*/
page.on("request", anotherHandler);

As far as I can see from the puppeteer code, it happens because in Page.ts the EventEmitter's on() method is overridden in such a way that, for request events, it creates a new callback and registers that callback as a listener instead of the one passed in the arguments.

Steps to reproduce the problem:

1. Run the snippet above
2. Observe the logs

Puppeteer version

10.2.0

Node.js version

14.17.6

npm version

6.14.15

What operating system are you seeing the problem on?

Linux

Relevant log output

No response

[JCMais]

having the same problem

[jschfflr]

@fruttut Thanks for taking the time to report this issue!
I'll look into this :)