Cannot read properties of undefined (reading 'origin')

[rchl]

Our production systems receive a relatively large number (8K a month) of client-side errors due to this code:

adyen-web/packages/lib/src/utils/get-process-message-handler.ts

Line 19 in 2f59a65

const origin = event.origin || event.originalEvent.origin;

The code crashes because event.originalEvent seems to be undefined.

99% of crashes are triggered from Chrome Mobile devices on Android 10.

Suggested fix (adding optional chaining operator):

const origin = event.origin || event.originalEvent?.origin;

[ribeiroguilherme]

Hi @rchl ,

Which version of the adyen-web are you using? Is it happening only on Android 10 or also in another versions? And do you know the which browser by any chance?

[rchl]

Happen to be using 5.43.0 now but upgraded to 5.68.0 earlier today. Will monitor if it makes any difference but looking at the relevant code, it seems like it will still trigger.

Android 10 collects majority of the crashes but it's also occasionally triggered on other versions (note that not all of that can be trusted since UA can be spoofed):

As far as user agent it's typically something like

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Mobile Safari/537.36

[ribeiroguilherme]

It seems to be on Chrome on Android 10. We will run some tests using Browserstack and hopefully we can catch something. I will keep you posted.

[ribeiroguilherme]

@rchl I can see that there are two situations where this code is executed:

• when the library is initially rendered
• when the 3DS flow is triggered

Do you know by any chance in which part of the flow this error happens? And do you have visibility if it is a critical error that crashes the UI/checkout or if it is an uncaught error only?

[rchl]

Sorry, I don't have visibility into those details and not sure if it's a critical error that prevents people from completion the transaction.

[ribeiroguilherme]

Hi @rchl - Did you notice any difference in the reports since you upgraded your version?

I ran some tests on Samsung Galaxy S20 with Android 10 using Chrome and unfortunately I didn't manage to reproduce the problem.

[rchl]

It's still happening (about 150 events a day).

The failing requests are in minority in general so it could have something to do with some special browser versions. It's certainly not a common crash.

[sponglord]

@rchl
It looks to me like something is wrong with the actual event being sent (the event.originalOrigin stuff is just fallback code for jQuery, and I'd be surprised if it's coming into play here - your'e not using jQuery are you?).
It's more like event.origin just isn't being defined, for some reason.
(Although you would always expect a window.postMessage to have an event.origin...)

We can add the optional chaining operator you request but I'm thinking this postMessage handler of ours (get-process-message-handler.ts) is just picking up some stray postMessages, which it doesn't need to handle, and is breaking - probably in a non-fatal way.
Just to clarify - you're not able to confirm that this is a critical error?

[rchl]

No, I'm not able to determine if this affects payment but I would guess that it doesn't or we'd know about it.
We don't include jquery in our pages.

I think that it's just the right thing to null-check the event.originalOrigin since it's not part of the MessageEvent event so it's not guaranteed to exist.

[sponglord]

Fixed in #2894
Change will be added to our next release