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

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

[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.

[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.