kenmonster-safari-error | Stripe Developers | Page 1

real mango Sep 27, 2021, 11:21 PM

#

@dreamy vessel hello! I'm going to need a lot more details than this screenshot to help. What is your code doing, which part of the code is crashing, can you add logs to better track what issues there are? Are there more logs like trouble initializing or loading Stripe?

old trellis Sep 28, 2021, 12:41 AM

#

Hi @real mango , I can add a bit to this:

The code was all working fine in production until the release of Safari 14.1. Now in Safari 14.1 it is failing. It works in all other browsers.
If we change the user agent in Safari (using developer tools) to "Google chrome - Mac OS" in the developer tools it works normally again.

The error is:
"Unhandled promise rejection"

Type Error: null is not a function

https://js.stripe.com/terminal/v1
line 175830

We've tried going through and adding promise rejection handling to anywhere we can think of.

We wouldn't worry about it but because Safari 14.1~ is in production and use in the world we are worried users will run into the same issue.

So it seems to be something Safari Changed - we just can't figure out what or how to resolve

This is all in an Ionic 3 Angular app. ionic-angular 3.9.10

Angular 5:
"dependencies": {
"@angular/animations": "^5",
"@angular/cdk": "^5",
"@angular/common": "^5",
"@angular/compiler": "^5",
"@angular/compiler-cli": "^5",
"@angular/core": "^5",
"@angular/forms": "^5",
"@angular/http": "^5",

real mango Sep 28, 2021, 12:49 AM

#

wait this is a terminal integration? You never mentioned that either

old trellis Sep 28, 2021, 12:49 AM

#

Yes, terminal integration - probably important info 👅

#

We originally thought we weren't handling a promise correctly but we've been through all the stripe calls in the app and made sure there is promise error handling and we're still getting the same error.

#

Our best guess is that safari has introduced an error to the browser (we're seeing some discussion about this online). Wondering if anyone else has encountered this or has suggestions on how to handle/prevent the error.... or if we're just distracted by the safari thing and it's an error in our code. (but then it's weird that it works in chrome)

#

Similarly if we set the user agent in chrome to "safari - mac" we get the error there as well:

📎 salonmonster.com-1632790913901.log.zip

lyric canopy Sep 28, 2021, 1:10 AM

#

Hello @old trellis I will take over from here and catching up

proven gale Sep 28, 2021, 1:19 AM

#

Hi @old trellis , the error in the log is TypeError: null is not a function; can you help to provide more information

Can you share your source code and point to the line that causes the error?
You mention you set the user agent, can you share how you would set the user agent?

lyric canopy Sep 28, 2021, 1:27 AM

#

How/where did you see this line?

https://js.stripe.com/terminal/v1
line 175830

dreamy vessel Sep 28, 2021, 5:09 AM

#

Hi there, here's another example of the error:

Screen_Shot_2021-09-27_at_10.07.31_PM.png

#

To change how safari identifies itself with the user-agent, it's easy to change the second option down from the develop menu:

Screen_Shot_2021-09-27_at_10.11.01_PM.png

proven gale Sep 28, 2021, 5:12 AM

#

@dreamy vessel we will need your help to provide more complete source code to help us to troubleshoot. Any way for you to provide that? and

dreamy vessel Sep 28, 2021, 5:13 AM

#

I'll try to provide the areas where Stripe is included, there's actually not that much code.

proven gale Sep 28, 2021, 5:14 AM

#

that will be great

vast mason Sep 28, 2021, 3:56 PM

#

Hey I am going to archive this thread, if you would like to re-open it please ping #dev-help

real mango Sep 28, 2021, 6:51 PM

#

@dreamy vessel do you have more details?

dreamy vessel Sep 28, 2021, 6:59 PM

#

Thanks, I'm attaching source code with every spot that stripe is referenced. I just wanted to make sure there was no id/key numbers inside first. Zip attached:

📎 stripe-sm-help.zip

#

It's also possible to see the error live on our beta version: https://salonmonster.com/7/salon/
I can PM with a temp account to login

real mango Sep 28, 2021, 7:08 PM

#

yes please PM with a login/password for us to try and look at it

#

will take a while this is a pretty obscure issue so be patient with us

dreamy vessel Sep 28, 2021, 7:13 PM

#

Thanks, PM sent

real mango Sep 28, 2021, 7:21 PM

#

thanks got it, we're looking

real mango Sep 28, 2021, 7:53 PM

#

@dreamy vessel do you know what part of your code triggers the error? Like if you remove all of Stripe and slowly add things back, starting by just including the SDK, then initializing it, etc, what causes the error?

#

Also do you have some custom polyfills in your own app to try and handle older browsers?

#

someone on my team was able to repro on your app and it seems to crash directly in one of your polyfills so it does seem to be something on your end/in your own code

#

@dreamy vessel does that make sense?

#

my colleague thinks it might be the Angular default polyfill in src/polyfills.ts and more info on https://angular.io/guide/browser-support

dreamy vessel Sep 28, 2021, 9:06 PM

#

Will try removing all stripe references and add them back in one by one.

lost quartz Sep 28, 2021, 9:07 PM

#

Hello! I don't think this is a Stripe reference problem. I think you have something in your polyfills configuration that's not compatible with newer versions of Safari.

#

I was able to reproduce in Safari 15 on my Mac, and I'm pretty confident something is in your polyfill configuration that shouldn't be (or should be updated to a newer version). As far as I can tell this is not a Stripe issue; Stripe is failing because of the polyfill, but the polyfill itself is the problem, not Stripe.

real mango Oct 1, 2021, 5:39 PM

#

@old trellis The thread is not archived

old trellis Oct 1, 2021, 5:40 PM

#

Hi, we've continued working on this and gone through and removed (commented out) all our Stripe code so that the app worked again and slowly added it back in until we found the line that broke it.

For simplicity I've recorded a quick 5 min video to demo the issue:

https://capture.dropbox.com/UIsbl83NCsVQhSn0

#

Quick summary:

The line that breaks the app is const StripeTerminal = await loadStripeTerminal();

It causes the following error:
Type Error: null is not a function "Unhandled promise rejection" https://js.stripe.com/terminal/v1 line 175830

It is only when the user agent is safari (either in safari or in Chrome with safari set as the user agent). If we set the user agent to Chrome in safari it works.

We've wrapped the stripe code in a try catch and that doesn't help

#

` try{
const StripeTerminal = await loadStripeTerminal();
console.log('try')

  // this.terminal = StripeTerminal.create({
  //   onFetchConnectionToken:  this.fetchConnectionToken,
  //   onUnexpectedReaderDisconnect:  this.unexpectedDisconnect,

  // })

} catch (error){
  console.log("outer failed it did")

}`

#

loadStripeTerminal() is defined by:

import {loadStripeTerminal} from "@stripe/terminal-js";

So the issue seems to be happening in the Stripe v1 js file

salonmonsterapp/node_modules/@stripe/terminal-js/types/index.d.ts

real mango Oct 1, 2021, 5:49 PM

#

@old trellis but that doesn't mean the issue is not in your code at all

#

that just means that when you load our code, you crash because you have a polyfill script that is broken somewhere and is incompatible with Terminal

old trellis Oct 1, 2021, 5:50 PM

#

Ok, we've gone through all our polyfill settings to try and see if there are any issues and can't see any. Do you know how we would debug that?

Here is our polyfills.ts:

`
// You can add your own extra polyfills to this file.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
`

#

They should be all the standard angular polyfills as far as we are aware

real mango Oct 1, 2021, 5:52 PM

#

yes and we think there's something wrong in the angular default polyfill for that recent Safari release really

#

Unfortunately, debugging polyfills is really hard. One thing you can do is try Terminal without Angular at all, just a vanilla Terminal integration

#

does that work? If so you know it's Angular/your set up

dreamy vessel Oct 1, 2021, 5:55 PM

#

Is there any User-Agent sniffing going on within Stripe? Because using Chrome spoofed as Safari also causes the error, so it seems like it's related to a user-agent specific setting somewhere

real mango Oct 1, 2021, 5:57 PM

#

that's why we keep thinking it's a polyfill

#

can you try a vanilla Terminal app, just basic "load Stripe Terminal" in Safari but without the rest of your app?

old trellis Oct 1, 2021, 5:58 PM

#

Yeah, we're 4 weeks into trying to solve this. We're at the point of just pulling Stripe altogether so we can get to releasing our app again 😟 We can't afford to spend much more time on it.
We'll try a vanilla js terminal integration and see how that goes and see if there is another version of polyfills we can use.

#

Do you have a boilerplate vanilla js example we can work from to get it tested quickly?

real mango Oct 1, 2021, 6:00 PM

#

https://stripe.com/docs/terminal/integration-builder

#

We have had no reports of any issue with Safari, that's why we really think it's on your end or your integration at the moment

old trellis Oct 1, 2021, 6:00 PM

#

Ok, thanks - we'll see what we can do with that

real mango Oct 1, 2021, 6:02 PM

#

keep me posted. Rubeus is out today and is my goto expert. I can look further if needed but I think it'd help to confirm that the app works for you with a vanilla integration

old trellis Oct 1, 2021, 6:03 PM

#

thanks

#kenmonster-safari-error