react-native-webview: Invalid URI prop doesn't trigger onError or renderError callbacks

Bug description: Providing an invalid source.uri prop does not result in renderError or onError being executed. Instead the WebView remains in the loading state and a console.warn for an unhandled promise rejection is displayed.

To Reproduce: Use test as your uri prop.

<WebView
    source={{ uri: 'test' }}
    onError={syntheticEvent => {
        const { nativeEvent } = syntheticEvent;
        console.warn('WebView error: ', nativeEvent);
    }}
    renderError={errorName => <Error name={errorName} />}
/>

Expected behavior: Either onError or renderError should be executed.

Screenshots/Videos: Screen Shot 2019-04-26 at 11 43 56 AM

Environment:

OS: macOS Mojave
OS version: 10.14.4
react-native version: 0.57.8
react-native-webview version: 5.6.0

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 21 (1 by maintainers)

Most upvoted comments

The unable to open url error message comes directly from react-native linking, for iOS at least.

As @mikehardy pointed out It looks like RN Webview tries to open urls that don’t match the originWhiteList in an external browser. Currently the createOnShouldStartLoadWithRequest function doesn’t have any error handler callback passed to it. Seems simple enough to add a handleInvalidUrl callback. May need to submit a PR to fix… unless someone beats me to it 😁

UPDATE - looked into trying to patch this, but the onError callback prop expects a SyntheticEvent. Not sure how to pull that off without diving more into native code. Not worth the effort at this point as the console.warn is already providing visibility to the error msg.

As a workaround I just added a 10s timeout that will manually trigger the error screen. UX is okay but not optimal.

townofdon on Oct 25, 2021

Any solution for this ?

rechard25846 on Nov 30, 2020

This shouldn’t be closed, it’s still an issue. If you try to load some invalid URL there appears to be no way to avoid the promise rejection warning ?

My test case is to attempt to open a deep-link on a device that can’t handle it. Popular style to try, facebook: url could be ‘fb://page/225517294919485’ and if you don’t have facebook app installed you’ll get

Error: Could not open URL 'fb://page/225517294919485': No Activity found to handle Intent { act=android.intent.action.VIEW dat=fb://page/225517294919485 flg=0x10000000 }
promiseMethodWrapper@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:3126:45
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:203466:37

etc etc

Duplicate #1209 (also closed stale, no resolution though)

mikehardy on May 26, 2020

I ran into the same issue with WebView lately. Indeed, onError and renderError are not fired, but onHttpError does fire, you can use it to display your error messages.

jaynguyen89 on Apr 28, 2022

i still have this error…error handlling in react native webview

rajan-keypress on Mar 17, 2021

betopompolo on Jan 6, 2021