[Bug]: incorrect page url is used for deep linking

[p-mazhnik]

ReplayWeb.page Version

v2.3.15

What did you expect to happen? What happened instead?

ReplayWeb.page sets incomplete url for pages retrieved via POST requests, which breaks deep linking.

I archived a website with a form that sends post request on submission. Request returns a new page that contain entered data.

screenshot

When form is submitted in the archive, I expect the second page item in the archive to open with the url
http://localhost:3003/page2?__wb_method=POST&arg1=Hello&arg2=World.

screenshot (expected)

Actual result is that correct UI is opened but POST properties are missing from the url shown in the ui: http://localhost:3003/page2.

screenshot (actual)

You can see ReplayWeb.page also doesn't recognize opened page as the one located on the left sidebar (second page item should be highlighted).

Step-by-step reproduction instructions

video

post-url-demo.mp4

archive.wacz

Additional details

Root cause of the issue: wombat sends wombat.$wbwindow.WB_wombat_location.href as a url field to ReplayWeb.page codebase, which doesn't include method and properties information: here and here. ReplayWeb then uses this url for deep linking purposes: code.
Instead (or in addition?), wombat needs to send full archive url that can be retrieved from wb_info.url, and ReplayWeb should use it.

Locally, I fixed it by using wb_info.url as a replayUrl in replaywebpage, but I am not sure this supports all the cases (it is possible location.href is used for a reason). Here are the patches:

wombat.js

diff --git a/src/wombat.js b/src/wombat.js
index fe96eb5..4286760 100755
--- a/src/wombat.js
+++ b/src/wombat.js
@@ -1263,6 +1263,7 @@ Wombat.prototype.sendHistoryUpdate = function(url, title, win) {
   this.sendTopMessage(
     {
       url: url,
+      wb_url: this.wb_info.url,
       ts: this.wb_info.timestamp,
       request_ts: this.wb_info.request_ts,
       is_live: this.wb_info.is_live,
@@ -6644,6 +6645,7 @@ Wombat.prototype.initTopFrameNotify = function(wbinfo) {
     var message = {
       icons: icons,
       url: wombat.$wbwindow.WB_wombat_location.href,
+      wb_url: wombat.wb_info.url,
       ts: wombat.wb_info.timestamp,
       request_ts: wombat.wb_info.request_ts,
       is_live: wombat.wb_info.is_live,

replaywebpage

diff --git a/src/replay.ts b/src/replay.ts
index c1edeb2..2a7d58c 100644
--- a/src/replay.ts
+++ b/src/replay.ts
@@ -200,7 +200,7 @@ class Replay extends LitElement {
       ) {
         this.replayTS = event.data.is_live ? "" : event.data.ts;
         this.actualTS = event.data.ts;
-        this.replayUrl = event.data.url;
+        this.replayUrl = event.data.wb_url;
         this.title = event.data.title || this.title;
         this.replayNotFoundError = event.data.wb_type === "archive-not-found";
         this.clearLoading(iframe.contentWindow);