chore: show android system webview update prompt if app fails to load (#2318)

packages/mobile/html/Web.bundle/src/index.html

@@ -16,7 +16,14 @@
         window.plansUrl = "https://standardnotes.com/plans";
         window.dashboardUrl = "https://standardnotes.com/dashboard";
     </script>
-
+    <script>
+        window.onerror = function (message, source, lineno, colno, error) {
+            if (document.readyState === "complete") {
+                return
+            }
+            window.ReactNativeWebView.postMessage("appLoadError");
+        };
+    </script>
     <script src="web-src/app.js"></script>
 </head>
 

packages/mobile/src/MobileWebAppContainer.tsx

@@ -1,6 +1,6 @@
 import { ReactNativeToWebEvent } from '@standardnotes/snjs'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Keyboard, Platform } from 'react-native'
+import { Button, Keyboard, Platform, Text, View } from 'react-native'
 import VersionInfo from 'react-native-version-info'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { OnShouldStartLoadWithRequest } from 'react-native-webview/lib/WebViewTypes'
@@ -34,6 +34,8 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     [androidBackHandlerService, colorSchemeService, stateService],
   )
 
+  const [showAndroidWebviewUpdatePrompt, setShowAndroidWebviewUpdatePrompt] = useState(false)
+
   useEffect(() => {
     const removeStateServiceListener = stateService.addEventObserver((event: ReactNativeToWebEvent) => {
       webViewRef.current?.postMessage(JSON.stringify({ reactNativeEvent: event, messageType: 'event' }))
@@ -228,6 +230,10 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
   const onMessage = (event: WebViewMessageEvent) => {
     const message = event.nativeEvent.data
+    if (message === 'appLoadError' && Platform.OS === 'android') {
+      setShowAndroidWebviewUpdatePrompt(true)
+      return
+    }
     try {
       const functionData = JSON.parse(message)
       void onFunctionMessage(functionData.functionName, functionData.messageId, functionData.args)
@@ -277,6 +283,47 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
   const requireInlineMediaPlaybackForMomentsFeature = true
   const requireMediaUserInteractionForMomentsFeature = false
 
+  if (showAndroidWebviewUpdatePrompt) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'black',
+        }}
+      >
+        <Text
+          style={{
+            color: 'white',
+            fontSize: 20,
+            fontWeight: 'bold',
+            marginBottom: 20,
+          }}
+        >
+          Could not load app
+        </Text>
+        <Text
+          style={{
+            color: 'white',
+            fontSize: 16,
+            marginBottom: 20,
+            textAlign: 'center',
+          }}
+        >
+          Please make sure your Android System Webview is updated to the latest version
+        </Text>
+        <Button
+          title={'Update'}
+          onPress={() => {
+            setShowAndroidWebviewUpdatePrompt(false)
+            device.openUrl('https://play.google.com/store/apps/details?id=com.google.android.webview')
+          }}
+        />
+      </View>
+    )
+  }
+
   return (
     <WebView
       ref={webViewRef}