Amphtml: [amp-story] No ampdoc found for [object HTMLElement]

[cramforce]

The render-fail also happens on the rolled-back version but more rare and with a different stack trace.

I can only repro this with a local web server (For the doc not AMP) and caching disabled.

log.js:710 Uncaught Error: No ampdoc found for [object HTMLElement]
    at cb (log.js:710)
    at Za.f.createError (log.js:359)
    at xm.f.getAmpDoc (ampdoc-impl.js:247)
    at u (service.js:357)
    at Sa (service.js:251)
    at lc (services.js:748)
    at new Ck (amp-story.js:331)
    at HTMLElement.Fi.b.createdCallback (custom-element.js:231)
    at b [as constructor] (custom-element.js:109)
    at new b (custom-element.js:86)

[gmajoulet]

Let's make sure this does not happen with the newer version we will rollforward. If it does we'll need a second cherry-pick, but we should batch them.

cc @Enriqe

[Enriqe]

I'm not able to repro

[gmajoulet]

Testing on 100+ Player integrations on publisher websites, I have only been able to repro once. Interestingly on the first document I opened. So I tried to open it again in private navigation or a different browser but it only repro'd that one time.

The code path hints at a Story, and not Player bug. I re-reviewed all the code we checked in in the past 2 weeks and did not find anything that could lead to this. I think it's an old bug that we never caught before. Let's keep this ticket open, but it's not release blocking.

[bjalford]

I've got an example on a dev site that I can replicate this issue 100% of the time here - SSR optimised version, and the amp version here

First time loads and then refresh the page and you'll see the empty page with the console error

[Enriqe]

This looks like a runtime / amp-story bug. @processprocess as STAMP on duty, would you mind taking a look? @ampproject/wg-stories

[gmajoulet]

@bjalford thanks for sending some examples! Can you check the links you sent? I can't open any of them here, and both look identical?
We'd like to fix this one asap, any help is really appreciated! Thank you.

[bjalford]

@gmajoulet I've updated the links - work now?

[gmajoulet]

They do, thank you! I found an issue and a tentative fix, we will need to run a lot more tests but we'll send a fix asap.

[gmajoulet]

The issue only repro's in compiled mode (run gulp with the --compiled flag, might have to rebuild after each code modification as the watch didn't work for me (cache?)), with transformed AMP. I double checked with Malte and he was using transformed documents too.

The code tries to access the ampdoc before it's available and everything fails. This is caused by the service getters in amp-story.constructor() that use this.element as a parameter. The ones using this.win are fine.
These service getters need to be moved to amp-story.buildCallback().

https://github.com/ampproject/amphtml/blob/509bf0d51aab1cff6ed91f23c8bb179bcec11119/extensions/amp-story/1.0/amp-story.js#L331

https://github.com/ampproject/amphtml/blob/509bf0d51aab1cff6ed91f23c8bb179bcec11119/extensions/amp-story/1.0/amp-story.js#L358

We also need to start testing transformed documents, I filed this ticket https://github.com/ampproject/amphtml/issues/30983

[gmajoulet]

@processprocess is taking over :))
FYI @ampproject/wg-stories

[processprocess]

Noting that in addition to @gmajoulet steps, throttling the network to Fast 3G will expose the bug.

[Proximity111]

@gmajoulet @processprocess @Enriqe I was looking for a solution to a problem that I am facing while working on AMP story, and found this issue where @gmajoulet comment is the same thing that I noticed while debugging. His comment stating The code tries to access the ampdoc before it's available and everything fails on this line:
this.viewer_ = Services.viewerForDoc(this.element);

I see this issue closed but still facing issue which is I think similar to the one addressed here. The page is giving random behavior, loads couple of times then throws error. Sometimes calls const ampdoc = this.getAmpDocIfAvailable(node); before the creation of ampdoc and sometimes triggers after it. Can I please get any support on this.

Attaching a screenshot for a reference to the issue.
https://www.screencast.com/t/hW7m64el

[gmajoulet]

The fix will make it to production next Tuesday. In the meantime you can join the experimental channel here: https://cdn.ampproject.org/experiments.html