Surface get/post errors (#7721)

If the GET/POST calls fail, say in case of CORS header missing cases, we
do not post the exact error seen in the JS to the application. This PR
updates the same and also changes the error type to NetworkError.

Author: sameerag

change/@azure-msal-browser-85e33d4b-7ed2-45b9-9d72-4c20f2b8a437.json

@@ -0,0 +1,7 @@
+{
+    "type": "patch",
+    "comment": "Add error messaging and change type for get/post failures #7721",
+    "packageName": "@azure/msal-browser",
+    "email": "[email protected]",
+    "dependentChangeType": "patch"
+}

change/@azure-msal-common-11e9cc69-4ab2-4979-ba45-b63f40e4a81b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add optional parameter to NetworkError for error specifics #7721",
+  "packageName": "@azure/msal-common",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

lib/msal-browser/src/network/FetchClient.ts

@@ -39,10 +39,15 @@ export class FetchClient implements INetworkModule {
                 headers: reqHeaders,
             });
         } catch (e) {
-            throw createBrowserAuthError(
-                window.navigator.onLine
-                    ? BrowserAuthErrorCodes.getRequestFailed
-                    : BrowserAuthErrorCodes.noNetworkConnectivity
+            throw createNetworkError(
+                createBrowserAuthError(
+                    window.navigator.onLine
+                        ? BrowserAuthErrorCodes.getRequestFailed
+                        : BrowserAuthErrorCodes.noNetworkConnectivity
+                ),
+                undefined,
+                undefined,
+                e as Error
             );
         }
 
@@ -60,7 +65,8 @@ export class FetchClient implements INetworkModule {
                     BrowserAuthErrorCodes.failedToParseResponse
                 ),
                 responseStatus,
-                responseHeaders
+                responseHeaders,
+                e as Error
             );
         }
     }
@@ -88,10 +94,15 @@ export class FetchClient implements INetworkModule {
                 body: reqBody,
             });
         } catch (e) {
-            throw createBrowserAuthError(
-                window.navigator.onLine
-                    ? BrowserAuthErrorCodes.postRequestFailed
-                    : BrowserAuthErrorCodes.noNetworkConnectivity
+            throw createNetworkError(
+                createBrowserAuthError(
+                    window.navigator.onLine
+                        ? BrowserAuthErrorCodes.postRequestFailed
+                        : BrowserAuthErrorCodes.noNetworkConnectivity
+                ),
+                undefined,
+                undefined,
+                e as Error
             );
         }
 
@@ -109,7 +120,8 @@ export class FetchClient implements INetworkModule {
                     BrowserAuthErrorCodes.failedToParseResponse
                 ),
                 responseStatus,
-                responseHeaders
+                responseHeaders,
+                e as Error
             );
         }
     }
@@ -131,8 +143,11 @@ function getFetchHeaders(options?: NetworkRequestOptions): Headers {
         });
         return headers;
     } catch (e) {
-        throw createBrowserAuthError(
-            BrowserAuthErrorCodes.failedToBuildHeaders
+        throw createNetworkError(
+            createBrowserAuthError(BrowserAuthErrorCodes.failedToBuildHeaders),
+            undefined,
+            undefined,
+            e as Error
         );
     }
 }

lib/msal-browser/test/network/FetchClient.spec.ts

@@ -5,10 +5,7 @@ import {
     NetworkError,
     NetworkRequestOptions,
 } from "@azure/msal-common";
-import {
-    BrowserAuthErrorMessage,
-    BrowserAuthError,
-} from "../../src/error/BrowserAuthError";
+import { BrowserAuthErrorMessage } from "../../src/error/BrowserAuthError";
 
 const mockResponse: Response = {
     headers: new Headers(),
@@ -140,10 +137,11 @@ describe("FetchClient.ts Unit Tests", () => {
             fetchClient
                 .sendPostRequestAsync<any>(targetUri, requestOptions)
                 .catch((e) => {
-                    expect(e).toBeInstanceOf(BrowserAuthError);
-                    expect(e.errorCode).toBe(
+                    expect(e).toBeInstanceOf(NetworkError);
+                    expect(e.errorCode).toContain(
                         BrowserAuthErrorMessage.postRequestFailed.code
                     );
+                    expect(e.errorMessage).toContain(`additionalErrorInfo:`);
                     done();
                 });
         });
@@ -161,10 +159,11 @@ describe("FetchClient.ts Unit Tests", () => {
                 );
 
             fetchClient.sendGetRequestAsync<any>(targetUri).catch((e) => {
-                expect(e).toBeInstanceOf(BrowserAuthError);
+                expect(e).toBeInstanceOf(NetworkError);
                 expect(e.errorCode).toBe(
                     BrowserAuthErrorMessage.getRequestFailed.code
                 );
+                expect(e.errorMessage).toContain(`additionalErrorInfo:`);
                 done();
             });
         });
@@ -195,11 +194,11 @@ describe("FetchClient.ts Unit Tests", () => {
                 .sendPostRequestAsync<any>(targetUri, requestOptions)
                 .catch((e) => {
                     expect(e).toBeInstanceOf(NetworkError);
-                    expect(e.error).toBeInstanceOf(BrowserAuthError);
-                    expect(e.errorCode).toBe(
+                    expect(e.errorCode).toContain(
                         BrowserAuthErrorMessage.failedToParseNetworkResponse
                             .code
                     );
+                    expect(e.errorMessage).toContain(`additionalErrorInfo:`);
                     done();
                 });
         });
@@ -235,10 +234,11 @@ describe("FetchClient.ts Unit Tests", () => {
             fetchClient
                 .sendPostRequestAsync<any>(targetUri, requestOptions)
                 .catch((e) => {
-                    expect(e).toBeInstanceOf(BrowserAuthError);
+                    expect(e).toBeInstanceOf(NetworkError);
                     expect(e.errorCode).toBe(
                         BrowserAuthErrorMessage.noNetworkConnectivity.code
                     );
+                    expect(e.errorMessage).toContain(`additionalErrorInfo:`);
                     done();
                 });
         });

lib/msal-common/apiReview/msal-common.api.md

@@ -2017,7 +2017,7 @@ export function createInteractionRequiredAuthError(errorCode: string): Interacti
 // Warning: (ae-missing-release-tag) "createNetworkError" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export function createNetworkError(error: AuthError, httpStatus?: number, responseHeaders?: Record<string, string>): NetworkError;
+export function createNetworkError(error: AuthError, httpStatus?: number, responseHeaders?: Record<string, string>, additionalError?: Error): NetworkError;
 
 // Warning: (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen
 // Warning: (tsdoc-param-tag-missing-hyphen) The @param block should be followed by a parameter name and then a hyphen

lib/msal-common/src/error/NetworkError.ts

@@ -38,7 +38,9 @@ export class NetworkError extends AuthError {
 export function createNetworkError(
     error: AuthError,
     httpStatus?: number,
-    responseHeaders?: Record<string, string>
+    responseHeaders?: Record<string, string>,
+    additionalError?: Error
 ): NetworkError {
+    error.errorMessage = `${error.errorMessage}, additionalErrorInfo: error.name:${additionalError?.name}, error.message:${additionalError?.message}`;
     return new NetworkError(error, httpStatus, responseHeaders);
 }