Ionic-framework: bug: Unhandled Promise Rejection: Haptics does not have web implementation.

[aub]

Bug Report

Ionic version:


[x] 5.0.7

Current behavior:

In mobile browsers, if I use the refresher I get an error about Haptics not having a web implementation. This doesn't seem to affect the functionality, but the errors are piling up in our error handler.

Expected behavior:

The refresher should work without error.

Steps to reproduce:

Have a page that uses an IonRefresher and pull to refresh in mobile browsers.

Related code:
The error report from the browser points to this line. That code is using getEngine to get the haptics engine and then testing for its existence before making the call to impact. getEngine does this to test for the existence of the engine:

(win.TapticEngine) || (win.Capacitor && win.Capacitor.Plugins.Haptics)

That seems to always return a Proxy object, so the test for existence in impact always passes so it tries to execute the haptic impact function, which fails when there isn't an implementation of Haptics. It seems like in addition to getting the engine the getEngine function also needs to check to see if the feature is implemented.

A simple test is to run this in the dev console of the browser:

((window.TapticEngine) || (window.Capacitor && window.Capacitor.Plugins.Haptics)).impact()

this is what the code would try to do when using the refresher, and it should cause the error.

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 5.0.7

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v13.12.0 (/usr/local/Cellar/node/13.12.0/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[liamdebeasi]

Can you provide a reproduction? I am not getting this error.

[aub]

That might be a little tricky because I'd need to create an app and then open it in the mobile browser, hopefully without deploying it somewhere. Do you have tips for doing that?

[liamdebeasi]

We have a guide on how to create a reproduction: https://ionicframework.com/docs/contributing/how-to-contribute#creating-a-good-code-reproduction Easiest way might be to just create a GitHub repo and send me a link.

[aub]

Sure, I know how to create the sample app, but since this is only happening in mobile browsers I don't know how to actually run the sample app so that I can see the problem, or how to tell you how to do so. Do you have advice for that? Have you tried to reproduce it in a mobile browser?

[aub]

Ok, sorry for the interruption... I did get a test for this working and also can't reproduce it. Let me mess with it some more to see if I can narrow it down and will close this ticket if not. Thanks.

[aub]

Here's a repo that reproduces the problem. All I did was take the basic app from ionic create and:

• Added a refresher in the first tab here
• That alone didn't do it because when the getEngine function in HapticEngine got win.Capacitor it would get back undefined. So I added this to actually use Capacitor by hiding the splash screen, and now the bug is reproducible.

I can reproduce it in mobile safari by running npm run start then opening up a browser tab on my phone pointed at port 3000 on my local IP address. Then if I connect safari's dev tools on my desktop to the tab on the phone I will see the error in the console.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21156, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.