Improve the error thrown when a bundle fails to load

Summary: Changelog: [General][Breaking] When a bundle was failing to load, throw errors of special type.

Differential Revision: D73925027

Author: vzaidman

packages/react-native/Libraries/Core/Devtools/__tests__/loadBundleFromServer-test.js

@@ -62,7 +62,7 @@ jest.mock('../../../Network/RCTNetworking', () => ({
       if (name === 'didReceiveNetworkData') {
         setImmediate(() => fn([1, mockDataResponse]));
       } else if (name === 'didCompleteNetworkResponse') {
-        setImmediate(() => fn([1, null]));
+        setImmediate(() => fn([1, mockRequestError]));
       } else if (name === 'didReceiveNetworkResponse') {
         setImmediate(() => fn([1, null, mockHeaders]));
       }
@@ -72,9 +72,14 @@ jest.mock('../../../Network/RCTNetworking', () => ({
 }));
 
 let loadBundleFromServer: (bundlePathAndQuery: string) => Promise<void>;
+const {
+  LoadBundleFromServerError,
+  LoadBundleFromServerRequestError,
+} = require('../loadBundleFromServer');
 
 let mockHeaders: {'Content-Type': string};
 let mockDataResponse;
+let mockRequestError = null;
 
 beforeEach(() => {
   jest.resetModules();
@@ -85,15 +90,33 @@ beforeEach(() => {
 test('loadBundleFromServer will throw for JSON responses', async () => {
   mockHeaders = {'Content-Type': 'application/json'};
   mockDataResponse = JSON.stringify({message: 'Error thrown from Metro'});
+  mockRequestError = null;
+
+  try {
+    await loadBundleFromServer('/Fail.bundle?platform=ios');
+  } catch (e) {
+    expect(e).toBeInstanceOf(LoadBundleFromServerError);
+    expect(e.message).toBe('Error thrown from Metro');
+  }
+});
 
-  await expect(
-    loadBundleFromServer('/Fail.bundle?platform=ios'),
-  ).rejects.toThrow('Error thrown from Metro');
+test('loadBundleFromServer will throw LoadBundleFromServerError for request errors', async () => {
+  mockHeaders = {'Content-Type': 'application/json'};
+  mockDataResponse = '';
+  mockRequestError = 'Some error';
+
+  try {
+    await loadBundleFromServer('/Fail.bundle?platform=ios');
+  } catch (e) {
+    expect(e).toBeInstanceOf(LoadBundleFromServerRequestError);
+    expect(e.message).toBe('Some error');
+  }
 });
 
 test('loadBundleFromServer will request a bundle if import bundles are available', async () => {
   mockDataResponse = '"code";';
   mockHeaders = {'Content-Type': 'application/javascript'};
+  mockRequestError = null;
 
   await loadBundleFromServer(
     '/Banana.bundle?platform=ios&dev=true&minify=false&unusedExtraParam=42&modulesOnly=true&runModule=false',
@@ -138,6 +161,7 @@ test('loadBundleFromServer will request a bundle if import bundles are available
 test('shows and hides the loading view around a request', async () => {
   mockDataResponse = '"code";';
   mockHeaders = {'Content-Type': 'application/javascript'};
+  mockRequestError = null;
 
   const promise = loadBundleFromServer(
     '/Banana.bundle?platform=ios&dev=true&minify=false&unusedExtraParam=42&modulesOnly=true&runModule=false',
@@ -157,6 +181,7 @@ test('shows and hides the loading view around a request', async () => {
 test('shows and hides the loading view around concurrent requests', async () => {
   mockDataResponse = '"code";';
   mockHeaders = {'Content-Type': 'application/javascript'};
+  mockRequestError = null;
 
   const promise1 = loadBundleFromServer(
     '/Banana.bundle?platform=ios&dev=true&minify=false&unusedExtraParam=42&modulesOnly=true&runModule=false',
@@ -178,13 +203,15 @@ test('shows and hides the loading view around concurrent requests', async () =>
 test('loadBundleFromServer does not cache errors', async () => {
   mockHeaders = {'Content-Type': 'application/json'};
   mockDataResponse = JSON.stringify({message: 'Error thrown from Metro'});
+  mockRequestError = null;
 
   await expect(
     loadBundleFromServer('/Fail.bundle?platform=ios'),
   ).rejects.toThrow();
 
   mockDataResponse = '"code";';
   mockHeaders = {'Content-Type': 'application/javascript'};
+  mockRequestError = null;
 
   await expect(
     loadBundleFromServer('/Fail.bundle?platform=ios'),
@@ -194,6 +221,7 @@ test('loadBundleFromServer does not cache errors', async () => {
 test('loadBundleFromServer caches successful fetches', async () => {
   mockDataResponse = '"code";';
   mockHeaders = {'Content-Type': 'application/javascript'};
+  mockRequestError = null;
 
   const promise1 = loadBundleFromServer(
     '/Banana.bundle?platform=ios&dev=true&minify=false&unusedExtraParam=42&modulesOnly=true&runModule=false',

packages/react-native/Libraries/Core/Devtools/loadBundleFromServer.js

@@ -20,6 +20,22 @@ let pendingRequests = 0;
 
 const cachedPromisesByUrl = new Map<string, Promise<void>>();
 
+export class LoadBundleFromServerError extends Error {
+  url: string;
+  constructor(message: string, url: string): void {
+    super(message);
+    this.url = url;
+    this.name = 'LoadBundleFromServerError';
+  }
+}
+
+export class LoadBundleFromServerRequestError extends LoadBundleFromServerError {
+  constructor(message: string, url: string): void {
+    super(message, url);
+    this.name = 'LoadBundleFromServerRequestError';
+  }
+}
+
 function asyncRequest(
   url: string,
 ): Promise<{body: string, headers: {[string]: string}}> {
@@ -62,10 +78,10 @@ function asyncRequest(
       );
       completeListener = Networking.addListener(
         'didCompleteNetworkResponse',
-        ([requestId, error]) => {
+        ([requestId, errorMessage]) => {
           if (requestId === id) {
-            if (error) {
-              reject(error);
+            if (errorMessage) {
+              reject(new LoadBundleFromServerRequestError(errorMessage, url));
             } else {
               //$FlowFixMe[incompatible-call]
               resolve({body: responseText, headers});
@@ -122,9 +138,10 @@ export default function loadBundleFromServer(
         headers['Content-Type'].indexOf('application/json') >= 0
       ) {
         // Errors are returned as JSON.
-        throw new Error(
+        throw new LoadBundleFromServerError(
           JSON.parse(body).message ||
             `Unknown error fetching '${bundlePathAndQuery}'`,
+          requestUrl,
         );
       }
 

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -3843,7 +3843,16 @@ declare export default function getDevServer(): DevServerInfo;
 `;
 
 exports[`public API should not change unintentionally Libraries/Core/Devtools/loadBundleFromServer.js 1`] = `
-"declare export default function loadBundleFromServer(
+"declare export class LoadBundleFromServerError extends Error {
+  url: string;
+  constructor(message: string, url: string): void;
+}
+declare export class LoadBundleFromServerRequestError
+  extends LoadBundleFromServerError
+{
+  constructor(message: string, url: string): void;
+}
+declare export default function loadBundleFromServer(
   bundlePathAndQuery: string
 ): Promise<void>;
 "