react native Webview Process Terminated

user_523507 0
Viewed 2986

Im using react native to show a local HTML on a web view, I have noticed that some times randomly, the webView crashes, and I get the message on console:

Webview Process Terminated

I have searched about it, but cannot find any answers? what is that? why is happening? how to avoid it or reload web view after that error?

 <WebView
      style={styles.webContainer}
      originWhitelist={['*']}
      source={isAndroid ? {uri:'file:///android_asset/binaura.html'} : HTML_FILE}

      javaScriptEnabled={true}
          domStorageEnabled={true}

    />
react-native webview
2 Answers

If by "WebView" you mean react-native-webview:

This happens on iOS if the WebView is using too many resources, and results in either the WebView crashing (showing a blank white page) or the app freezing.

There is a callback property, onContentProcessDidTerminate (introduced in this PR), that you can use to listen for termination and force a reload of the WebView by updating its key. It's a bit of a hack, but it works.

Usage example:

class MyComponent extends Component {
  state = {
    webviewKey: 0,
  }

  reload() {
    this.setState({
      webviewKey: this.state.webviewKey + 1,
    })
  }

  render() {
    return (
      <WebView
        key={this.state.webviewKey}
        onContentProcessDidTerminate={this.reload}
      />
    )
  }
}
user_12110800

@pjivers answer put us on the right track but the current react-native-webview already has a reload() method you can use. You only need a bit of ref setup to call it:

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.webViewRef = React.createRef();
  }

  render() {
    return (
      <WebView
        ref={this.webViewRef}
        onContentProcessDidTerminate={this.webViewRef.current?.reload}
      />
    )
  }
}
user_16823140
Related