How can I change default timeout for ACK_TIMEOUT?

[andychongyz]

I got this error on production environment, but not locally.
Uncaught Error: No ack for postMessage xcomponent_init in 1000ms

I'm here to ask how can I provide the timeout. Thank you.

[andychongyz]

We use it on a Shopify plugin, and the XComponentInit send a request to shopify side.
But It took more than 1 sec.
So I need a way to implicitly set the timeout.

[bluepnume]

You could try xcomponent.postRobot.CONFIG.ACK_TIMEOUT = 2000; -- but I suspect there's a deeper problem here. Post messages are asynchronous, but they should be almost instantaneous, so if a message is timing out after 1000ms it's likely it's failing for some other reason.

Is your code hosted somewhere I can read/try?

Also -- messages in xcomponent are restricted by domain. If this a problem with one env and not another, my suspicion would be that there's some mismatched domain. What settings are you using in the component definition?

[bluepnume]

I'm guessing this is the module: https://github.com/PostCo/postco-shopify/commits/master

Noticed you reverted xcomponent back to an old version. Were you seeing this issue only with the latest?

[andychongyz]

@bluepnume Yes, it only happens on the newer versions, on local development it is fine, maybe it is fast enough, but on production, it sends the request to Shopify. The plugin is mounted on the client Shopify shop's cart page. I can only confirm this problem happens on v1.0.70, v1.0.80, and v1.0.100. Not sure for the other versions. And it works fine on v1.0.63.

[bluepnume]

Oh right, so https://postco-plugin-production.herokuapp.com/delivery does a redirect to shopify?

xcomponent uses the specified url to decide which domain to listen to messages from. Can you try setting domain to shopify's domain (or the final domain that the iframe lands on) and seeing if it works?

Are you expecting shopify to send callbacks up to you, through xcomponent?

[bluepnume]

Will close this issue soon, let me know if there are any more updates on your side.

[andychongyz]

I don't expect Shopify to send callback through xcomponent, but I mount them to different Shopify shops, so I assume I am expecting it.
Basically, the flow is there is a script tag on each Shopify shop's cart page that loads the script to mount the xcomponent on, and then target another app, which is https://postco-plugin-production.herokuapp.com/delivery to load in the iframe.
By the way, how can I set the domain?

[bluepnume]

Hi Andy. Sorry, didn't get a notification for this thread back when you replied. Did you have any luck getting your use-case to work?

If not, please share some example code so I can try to help.

[harouny]

@bluepnume I have this error only in IE 11 "Error: No ack for postMessage xcomponent_init in 1000ms"
Same component is working fine in Chrome and Firefox.
I'm not specifying any domains settings
My config is something like this

Connector = xcomponent.create({
    tag: 'connector',
    url: "[url to my html page]",
    dimensions: {
        width: '800px',
        height: '400px'
    },
    contexts: {
        popup: true
    },
    defaultLogLevel: 'warn',
    props: {
        getAccessTokenAsync: {
            type: 'function',
            required: true
        },
        selectedAppId: {
            type: 'string',
            required: false
        },
        selectedConnectionId: {
            type: 'string',
            required: false
        },
        onSuccess: {
            type: 'function',
            required: true
        },
        onFailure: {
            type: 'function',
            required: true
        }
    }
});

"\xcomponent\demo\basic\popup\index.htm" seems to be working fine in IE 11 so I'm going to have to investigate further

[bluepnume]

@harouny are you using xcomponent.js or xcomponent.frame.js?

For popup messaging to work in IE11, you need to set up a bridge for post-messages to go through. It's annoying but there's no other good way :(

1. Follow steps a) and b) here: https://github.com/krakenjs/post-robot/blob/master/README.md#parent-to-popup-messaging

   (note -- you don't need step c), xcomponent will open the bridge for you)

2. Add a bridgeUrl option in your xcomponent which points to the bridge you set up:

   xcomponent.create({
       bridgeUrl: 'http://yy.com/bridge.html'
   });

3. When you render the component, xcomponent will use post-robot to open the bridge and then it will use the bridge to send and receive messages.

I'll add some fuller docs for this soon...

[harouny]

@bluepnume
I'm using xcomponent.js. I wasn't aware of tge IE 11 bridge thingy. Thanks for the hint!

[bluepnume]

Let me know if you run into any problems. Also added #86 to make this a more obvious failure.

[harouny]

@bluepnume
Since I'm not using post-robot directly am I still need to do a) somehow?
a. Use the special ie build of post-robot: dist/post-robot.ie.js.

[harouny]

Sorry It will be in the bridge only....thanks :)

[bluepnume]

@harouny -- only when you load post-robot in the bridge.html url.

In fact -- you can avoid dealing with post-robot directly just by loading xcomponent or your component in the frame. So in step b) you could load <script src="http://yy.com/js/my-component.js"></script> or <script src="http://yy.com/js/xcomponent.js"></script> which will implicitly pull in post-robot

[harouny]

I think a) and b) need to be swiched for clarity

[bluepnume]

I agree in the context of xcomponent. When I add bridge docs over here, there's probably no need to mention post-robot at all.

(In fact if you feel like contributing any docs here, please feel free!)

[harouny]

Sure mate, I will. Thanks

[harouny]

@bluepnume
I have added "bridgeUrl" to xcomponent.create but still doesn't work. In my page I don't see the Iframe and I don't see my bridge html page being loaded in network tap.
I found this code in openBridge method:

if (!this.driver.needsBridge) {
            return;
}

But I haven't seen in code anywhere we set driver.needsBridge

Any ideas?

[bluepnume]

So, just to be sure -- you're running this in IE, and you're trying to load a component on a different domain, right? It'll only try to load the bridge if it detects IE.

this.driver.needsBridge is set to true for popup mode -- are you seeing this condition being hit?

[harouny]

Yes, IE and loading a component on a different domain via a popup
Where in code we set this.driver.needsBridge to true?

[bluepnume]

I was gonna point to the code location, then I realized it's not actually there. I think this got missed out in some refactoring. Lemme quickly double check this.

[harouny]

OK, cool, somehow good news :)

[bluepnume]

OK try the latest code :) removed that check, it's redundant. As usual, great catch.

[harouny]

Bridge is working now, thanks for the quick fix!

[bluepnume]

Cool! Going to close this now.

[AlbinoDrought]

Hey,

Encountered the same issue with my project. Attempted to follow the above steps to no avail. Here's what I did exactly:

• Create a bridge page, including only xcomponent.js. Do I need postrobot ie, or my component as well? How can I change default timeout for ACK_TIMEOUT? #49 (comment)
• Specify bridgeUrl on component create, linking to the above page.
• Use this component as a normal popup, in a way that works (and continues to work) in other browsers, cross-domain.

With the above, the error No ack for postMessage xcomponent_init in 1000ms is still thrown in IE.

Anyone able to see where I've gone wrong?

Thanks,
Sean

[ghost]

Hi @AlbinoDrought,

• You need to include post-robot.ie.js in your bridge page. Sample of bridge.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script src="/js/post-robot.ie.js"></script>
</body>
</html>

• Specify bridgeUrl on component create as below:

window.MyXcomponent = xcomponent.create({
      url: "https://mydomain.com/popup",

      bridgeUrl: "https://mydomain.com/bridge.html",

      contexts: {
          popup: true
      },

      dimensions: {
        width: '770px',
        height: '45%'
      },
    .....
})

It works well at my end (post-robot v8.0.14 and xcomponent v6.0.37).

HTH,
Ky