Unexpected unhandledRejection event for promise which rejection does get handled

Updated, I've tried explaining the behavior I'm seeing, but it still would be great to have an answer from a credible source (in addition to the W3C specs) about when/how exactly the unhandledRejection event gets fired.

---

Why do I get an unhandledRejection event (for "error f1") in the following code? That's unexpected, because I handle both rejections in the finally section of main.

I'm seeing the same behavior in Node (v14.13.1) and Chrome (v86.0.4240.75):

window.addEventListener("unhandledrejection", event => {
  console.warn(`unhandledRejection: ${event.reason.message}`);
});

function delay(ms) {
  return new Promise(r => setTimeout(r, ms));
}

async function f1() {
  await delay(100);
  throw new Error("error f1");
}

async function f2() {
  await delay(200);
  throw new Error("error f2");
}

async function main() {
  // start all at once
  const [p1, p2] = [f1(), f2()];
  try {
    await p2;
    // do something after p2 is settled
    await p1;
    // do something after p1 is settled
  }
  finally {
    await p1.catch(e => console.warn(`caught on p1: ${e.message}`));
    await p2.catch(e => console.warn(`caught on p2: ${e.message}`));
  }
}

main().catch(e => console.warn(`caught on main: ${e.message}`));

from Unexpected unhandledRejection event for promise which rejection does get handled