feat: handle errors happening in webview

Author: vasiliy-pdk

src/__tests__/ClaimsList/index.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react-native';
-import { ClaimsList } from '../../trustBadge/ClaimsList';
+import { ClaimsList } from '@src/trustBadge/ClaimsList';
 import React from 'react';
 
 const validImageUrl = (number: number) => `https://cdn.io/img${number}`;

src/bundle/index.tsx

@@ -3,13 +3,9 @@ import * as React from 'react';
 import { View, StyleSheet, Linking } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { bundleUrl } from '../api';
-import type {
-  WebViewErrorEvent,
-  WebViewMessageEvent,
-  WebViewRenderProcessGoneEvent,
-} from 'react-native-webview/lib/WebViewTypes';
+import type { WebViewMessageEvent } from 'react-native-webview/lib/WebViewTypes';
 import ErrorBoundary from '../ErrorBoundary';
-import * as Errors from '../services/Errors';
+import { webviewErrorHandler } from './webviewErrorHandler';
 
 const handleShouldStartLoadWithRequest = (request: any) => {
   // Intercept URL loading
@@ -57,20 +53,20 @@ function BundleComponent({
     <View style={styles.webViewContainer}>
       <WebView
         ref={(r: any) => (webview.current = r)}
-        source={{ uri: bundleUrl(bundleId, sku) }}
+        source={{
+          uri: bundleUrl(bundleId, sku),
+          // There's no way to unit test Webview. So uncomment the following lines to test manually
+          // uri: 'https://wrongdomainlol.io',
+          // uri: 'https://staging.provenance.org/webviews/123/123',
+        }}
         style={{ flex: 1 }}
         startInLoadingState={true}
         nestedScrollEnabled={true}
-        onError={(syntheticEvent: WebViewErrorEvent) => {
-          const { nativeEvent } = syntheticEvent;
-          Errors.handle(`WebView error: ${nativeEvent}`);
-        }}
-        onRenderProcessGone={(
-          syntheticEvent: WebViewRenderProcessGoneEvent
-        ) => {
-          const { nativeEvent } = syntheticEvent;
-          Errors.handle(`WebView crashed: ${nativeEvent.didCrash}`);
-        }}
+        onError={webviewErrorHandler('WebViewErrorEvent')}
+        onHttpError={webviewErrorHandler('WebViewHttpErrorEvent')}
+        onRenderProcessGone={webviewErrorHandler(
+          'WebViewRenderProcessGoneEvent'
+        )}
         injectedJavaScript={`
           window.ReactNativeWebView.postMessage("JS injected");
 

src/bundle/webviewErrorHandler.tsx

@@ -0,0 +1,22 @@
+import { type NativeSyntheticEvent } from 'react-native';
+import * as Errors from '../services/Errors';
+
+class ProvenanceWebviewError extends Error {
+  constructor(message: string, event: any) {
+    let eventDetails: string = '';
+    try {
+      eventDetails = JSON.stringify(event);
+    } catch (e) {
+      eventDetails =
+        'Could not stringify event, please inspect cause on the error';
+    }
+    super([message, eventDetails].join(': '), { cause: event });
+  }
+}
+
+export function webviewErrorHandler(errorEventName: string) {
+  return (syntheticEvent: NativeSyntheticEvent<any>) => {
+    const { nativeEvent } = syntheticEvent;
+    Errors.handle(new ProvenanceWebviewError(errorEventName, nativeEvent));
+  };
+}