Swallow exceptions on draw, forward to onError (#46964)

Summary:
Pull Request resolved: #46964

Graceful degradation is better than outright crashing. When rendering images that exceed Android's memory limits, React Native applications will fatally crash. This change intervenes by swallowing the exception that Android raises and forwards it to the `onError` handler. As a result, no image will be rendered instead of fatally crashing.

Fresco already intervenes by default. It will raise a `PoolSizeViolationException` if the bitmap size exceeds memory limits set by the OS and applies a 2048 pixel maximum dimension to JPEG images, but it's still possible for these configuration limits to be removed and for images to fall just short of Fresco's memory limit. The exception is raised when we attempt to draw the bitmap, not when the bitmap is allocated in memory, so we must handle the exception here and not in Fresco.

## Changelog

[Android][Fixed] - Apps will no longer fatally crash when trying to draw large images

Reviewed By: tdn120

Differential Revision: D64144596

fbshipit-source-id: 32b69ad4ecef0564c2cad7a287a31b56688f38b8

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt

@@ -338,7 +338,16 @@ public class ReactImageView(
 
   public override fun onDraw(canvas: Canvas) {
     BackgroundStyleApplicator.clipToPaddingBox(this, canvas)
-    super.onDraw(canvas)
+    try {
+      super.onDraw(canvas)
+    } catch (e: RuntimeException) {
+      // Only provide updates if downloadListener is set (shouldNotify is true)
+      if (downloadListener != null) {
+        val eventDispatcher =
+            UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id)
+        eventDispatcher?.dispatchEvent(createErrorEvent(UIManagerHelper.getSurfaceId(this), id, e))
+      }
+    }
   }
 
   public fun maybeUpdateView() {

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import type {ImageProps} from 'react-native/Libraries/Image/ImageProps';
 import type {LayoutEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
 import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
@@ -228,12 +229,8 @@ type NetworkImageExampleState = {|
   progress: $ReadOnlyArray<number>,
 |};
 
-type NetworkImageExampleProps = $ReadOnly<{|
-  source: ImageSource,
-|}>;
-
 class NetworkImageExample extends React.Component<
-  NetworkImageExampleProps,
+  ImageProps,
   NetworkImageExampleState,
 > {
   state: NetworkImageExampleState = {
@@ -248,7 +245,7 @@ class NetworkImageExample extends React.Component<
     ) : (
       <>
         <Image
-          source={this.props.source}
+          {...this.props}
           style={[styles.base, styles.visibleOverflow]}
           onLoadStart={e => this.setState({loading: true})}
           onError={e =>
@@ -970,6 +967,18 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Error Handler for Large Images',
+    render: function (): React.Node {
+      return (
+        <NetworkImageExample
+          resizeMethod="none"
+          // 6000x5340 ~ 128 MB
+          source={require('../../assets/very-large-image.png')}
+        />
+      );
+    },
+  },
   {
     title: 'Image Download Progress',
     render: function (): React.Node {