Change the response type of GET_JS_SOURCE and print the error to the user properly

This commit changes the response type to a object, so it will be easier
to expand later for the sourcemap support.

Author: canova

locales/en-US/app.ftl

@@ -1248,8 +1248,9 @@ SourceView--archive-parsing-error-when-obtaining-source =
 # Variables:
 #   $url (String) - The URL of the JS source file.
 #   $sourceUuid (number) - The UUID of the JS source file.
+#   $errorMessage (String) - The raw internal error message, not localized
 SourceView--not-in-browser-error-when-obtaining-js-source =
-    The browser was unable to obtain the source file for { $url } with sourceUuid { $sourceUuid }.
+    The browser was unable to obtain the source file for { $url } with sourceUuid { $sourceUuid }: { $errorMessage }.
 
 ## Toggle buttons in the top right corner of the bottom box
 

src/app-logic/browser-connection.ts

@@ -85,7 +85,7 @@ export interface BrowserConnection {
     column: number | null
   ): Promise<void>;
 
-  getJSSource(sourceUuid: string): Promise<string | null>;
+  getJSSource(sourceUuid: string): Promise<string>;
 }
 
 /**
@@ -236,7 +236,7 @@ class BrowserConnectionImpl implements BrowserConnection {
    * Fetches JavaScript source code from the browser using the source UUID.
    * This method requires WebChannel version 6 or higher (Firefox 145+).
    */
-  async getJSSource(sourceUuid: string): Promise<string | null> {
+  async getJSSource(sourceUuid: string): Promise<string> {
     if (!this._webChannelSupportsGetJSSource) {
       throw new Error(
         "Can't use getJSSource in Firefox versions with the old WebChannel."
@@ -247,9 +247,14 @@ class BrowserConnectionImpl implements BrowserConnection {
     // fetching multiple sources, we only fetch one at a time currently.
     // TODO: Change this to fetch multiple JS sources at the load time or while
     // we share the profile.
-    return getJSSourcesViaWebChannel([sourceUuid]).then(
-      (sources) => sources[0]
-    );
+    return getJSSourcesViaWebChannel([sourceUuid]).then((sources) => {
+      const source = sources[0];
+      if ('error' in source) {
+        throw new Error(source.error);
+      }
+
+      return source.sourceText;
+    });
   }
 }
 

src/app-logic/web-channel.ts

@@ -147,7 +147,8 @@ type GetSymbolTableResponse = SymbolTableAsTuple;
 type QuerySymbolicationApiResponse = string;
 type GetPageFaviconsResponse = Array<FaviconData | null>;
 type OpenScriptInTabDebuggerResponse = void;
-type GetJSSourcesResponse = Array<string | null>;
+type GetJSSourceReponseItem = { sourceText: string } | { error: string };
+type GetJSSourcesResponse = Array<GetJSSourceReponseItem>;
 
 // TypeScript function overloads for request/response pairs.
 function _sendMessageWithResponse(
@@ -387,7 +388,7 @@ export async function showFunctionInDevtoolsViaWebChannel(
 
 export async function getJSSourcesViaWebChannel(
   sourceUuids: Array<string>
-): Promise<Array<string | null>> {
+): Promise<Array<GetJSSourceReponseItem>> {
   return _sendMessageWithResponse({
     type: 'GET_JS_SOURCES',
     sourceUuids,

src/components/app/CodeErrorOverlay.tsx

@@ -113,13 +113,13 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             );
           }
           case 'NOT_PRESENT_IN_BROWSER': {
-            const { sourceUuid, url } = error;
+            const { sourceUuid, url, errorMessage } = error;
             return (
               <Localized
                 id="SourceView--not-in-browser-error-when-obtaining-js-source"
-                vars={{ url, sourceUuid }}
+                vars={{ url, sourceUuid, errorMessage }}
               >
-                <li>{`The browser was unable to obtain the source file for ${url} with sourceUuid ${sourceUuid}`}</li>
+                <li>{`The browser was unable to obtain the source file for ${url} with sourceUuid ${sourceUuid}: ${errorMessage}`}</li>
               </Localized>
             );
           }

src/test/unit/fetch-source.test.ts

@@ -618,8 +618,10 @@ describe('fetchSource', function () {
       type: 'ERROR',
       errors: [
         {
-          type: 'BROWSER_API_ERROR',
-          apiErrorMessage: `Source not found for source with ID: ${TEST_SOURCE_UUID}`,
+          type: 'NOT_PRESENT_IN_BROWSER',
+          sourceUuid: 'ff6d24c3-b8f5-45cd-a7d3-b643b3292e41',
+          url: '/path/to/script.js',
+          errorMessage: `Error: Source not found for source with ID: ${TEST_SOURCE_UUID}`,
         },
         {
           type: 'NO_KNOWN_CORS_URL',

src/types/state.ts

@@ -335,6 +335,7 @@ export type SourceCodeLoadingError =
       type: 'NOT_PRESENT_IN_BROWSER';
       sourceUuid: string;
       url: string;
+      errorMessage: string;
     };
 
 export type ProfileSpecificUrlState = {

src/utils/fetch-source.ts

@@ -99,16 +99,12 @@ export async function fetchSource(
           source: response,
         };
       }
-
+    } catch (e) {
       errors.push({
         type: 'NOT_PRESENT_IN_BROWSER',
         sourceUuid,
         url: file,
-      });
-    } catch (e) {
-      errors.push({
-        type: 'BROWSER_API_ERROR',
-        apiErrorMessage: e.message,
+        errorMessage: e.toString(),
       });
     }
   }

src/utils/query-api.ts

@@ -24,7 +24,7 @@ export interface ExternalCommunicationDelegate {
     requestJson: string
   ): Promise<string>;
 
-  fetchJSSourceFromBrowser(source: string): Promise<string | null>;
+  fetchJSSourceFromBrowser(source: string): Promise<string>;
 }
 
 export type ApiQueryResult<T> =
@@ -163,7 +163,7 @@ export class RegularExternalCommunicationDelegate
     return browserConnection.querySymbolicationApi(path, requestJson);
   }
 
-  fetchJSSourceFromBrowser(source: string): Promise<string | null> {
+  fetchJSSourceFromBrowser(source: string): Promise<string> {
     const browserConnection = this._browserConnection;
     if (browserConnection === null) {
       throw new Error('No connection to the browser.');