Wordpress-ios: Editor: cannot preview drafts on a WordPress.com site with a custom domain

[designsimply]

We received the following report:

I am currently unable to use the View and Preview functions on my Wordpress App on iPad. I receive a 404 page not found error each time. The issue arises when I attempt to preview or view my drafts. Any of the drafts on my site will show the effect.

• Type of site: WordPress.com Premium with a custom domain
• WPiOS 14.8.2
• iPad Pro 9.7-inch (WiFi/Cellular) (iPad6,4)
• iOS 13.4.1

Note: the app logs provided by the user showing an editor session with a preview doesn't seem to indicate a problem (is it possible we aren't logging failed previews in this flow and so app logs won't be helpful in this type of case?):

2020-05-25 09:58:46:344 🔵 Tracked: editor_session_start <blog_type: wpcom, content_type: gutenberg, editor: gutenberg, has_unsupported_blocks: 0, post_type: post, session_id: 218FF820-7CD8-4A57-AB4E-1D4949111147, startup_time_ms: 1723, unsupported_blocks: (
)>
2020-05-25 09:58:58:388 🔵 Tracked: web_preview_opened <blog_type: wpcom, post_type: post>
2020-05-25 09:59:00:339 TracksService sendQueuedEvents completed. Sent 2 events.
2020-05-25 09:59:03:718 🔵 Tracked: editor_session_end <blog_type: wpcom, content_type: gutenberg, editor: gutenberg, has_unsupported_blocks: 0, outcome: cancel, post_type: post, session_id: 218FF820-7CD8-4A57-AB4E-1D4949111147>
2020-05-25 09:59:03:728 🔵 Tracked: editor_discarded_changes <blog_id: 151743515, editor_source: gutenberg, has_gutenberg_blocks: 1, post_id: 647>
2020-05-25 09:59:03:780 🔵 Tracked: editor_closed <blog_id: 151743515, editor_source: gutenberg, has_gutenberg_blocks: 1, post_id: 647>

^{(internal reference: p4a5px-2zK-p2, 2987505-zen)}

[designsimply]

I tested this today on three different types of sites (WordPress.com, Jetpack, Self-hosted) and found that previews did show a brief 404 error when first loading on a WordPress.com site but then eventually loaded in my tests. Based on the user report, it seems some sites aren't able to eventually resolve the preview link but I am not sure why.

Video: 8m57s

^{Tested with WPiOS 15.0.0.5 TestFlight beta on iPhone 11 iOS 13.4.1. Sites tested: WordPress.com Premium made4tesing0318.blog, Jetpack 8.6.1 WP 5.4.2 frightened-hazel.jurassic.ninja, Self-hosted WP 5.4.2 innovative-grasshopper.jurassic.ninja}

TC001 - preview a new draft.

1. Create a new post.
2. Add a title and some content.
3. Make any change to the post.
4. Go to the more menu (three dots) and tap Preview.

Result: previewing new drafts on a WP.com simple site with a custom domain resulted in a brief 404 message but the preview eventually loaded. Notice how the domain under the "Page not found" message says r-login.wordpress.com:

TC002 - preview a change to a previously saved draft.

1. Open a previously saved draft.
2. Make any change to the post.
3. Go to the more menu (three dots) and tap Preview.

Result: previewing changes to a previously saved draft worked well for me on all three types of sites.

TC003 - preview a change to a previously published post.

1. Open a previously published post.
2. Make any change to the post.
3. Go to the more menu (three dots) and tap Preview.

Result: changes to published posts did not show up in the previews at all on a Jetpack site. Tracking in https://github.com/wordpress-mobile/WordPress-iOS/issues/11684.

Result: trying to preview changes to published posts on a self-hosted site resulted in a "Preview Unavailable" message. Tracking in #13477.

[guarani]

is it possible we aren't logging failed previews in this flow and so app logs won't be helpful in this type of case?

@designsimply while this issue hasn't been fixed yet, as a first iteration towards addressing this, I've added error logging for WP.com simple sites.

[guarani]

I'm leaving a brief summary here of my findings:

Comparing how previews work across WPiOS, WPAndroid and Calypso revealed important differences in the requests made. While I couldn't reproduce this issue (except once), I noticed that WPAndroid does not show the "Page not found" error at all (unlike WPiOS which shows it consistently, albeit briefly).

While WPAndroid performs only two requests to fetch the preview, I counted seven on WPiOS (including redirects). The most important differences include:

• WPAndroid and Calypso use a URL similar to https://pschrottkyicloud.wordpress.com/?p=36&preview=true to fetch the preview as HTML, while WPiOS uses a similar URL minus the preview=true query parameter
• WPiOS makes various calls to an r-login URL that WPAndroid does not use

It was decided (offline) that the next step here is to unify the WPiOS implementation to use the same requests that WPAndroid uses.

(internal reference: pbArwn-SC-p2)