Make protocol errors available in the error link

.changeset/giant-peas-lie.md

@@ -0,0 +1,13 @@
+---
+"@apollo/client": patch
+---
+
+Make `protocolErrors` from multipart subscriptions available to the error link with the `protocolErrors` property.
+
+```js
+const errorLink = onError(({ protocolErrors }) => {
+  if (protocolErrors) {
+    console.log(protocolErrors);
+  }
+});
+```

docs/source/api/link/apollo-link-error.md

@@ -11,13 +11,22 @@ Use the `onError` link to perform custom logic when a [GraphQL or network error]
 import { onError } from "@apollo/client/link/error";
 
 // Log any GraphQL errors or network error that occurred
-const errorLink = onError(({ graphQLErrors, networkError }) => {
+const errorLink = onError(({ graphQLErrors, networkError, protocolErrors }) => {
   if (graphQLErrors)
     graphQLErrors.forEach(({ message, locations, path }) =>
       console.log(
         `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
       )
     );
+
+  if (protocolErrors) {
+    protocolErrors.forEach(({ message, extensions }) => {
+      console.log(
+        `[Protocol error]: Message: ${message}, Extensions: ${JSON.stringify(extensions)}`
+      );
+    });
+  }
+
   if (networkError) console.log(`[Network error]: ${networkError}`);
 });
 ```

src/link/error/__tests__/index.ts

@@ -6,6 +6,7 @@ import { ServerError, throwServerError } from "../../utils/throwServerError";
 import { Observable } from "../../../utilities/observables/Observable";
 import { onError, ErrorLink } from "../";
 import { ObservableStream } from "../../../testing/internal";
+import { PROTOCOL_ERRORS_SYMBOL } from "../../../errors";
 
 describe("error handling", () => {
   it("has an easy way to handle GraphQL errors", async () => {
@@ -71,6 +72,66 @@ describe("error handling", () => {
     expect(called).toBe(true);
   });
 
+  it("handles protocol errors", async () => {
+    expect.assertions(3);
+    const query = gql`
+      query Foo {
+        foo {
+          bar
+        }
+      }
+    `;
+
+    const errorLink = onError(({ operation, protocolErrors }) => {
+      expect(operation.operationName).toBe("Foo");
+      expect(protocolErrors).toEqual([
+        {
+          message: "cannot read message from websocket",
+          extensions: [{ code: "WEBSOCKET_MESSAGE_ERROR" }],
+        },
+      ]);
+    });
+
+    const mockLink = new ApolloLink((_operation) => {
+      return new Observable((observer) => {
+        observer.next({
+          data: null,
+          extensions: {
+            [PROTOCOL_ERRORS_SYMBOL]: [
+              {
+                message: "cannot read message from websocket",
+                extensions: [
+                  {
+                    code: "WEBSOCKET_MESSAGE_ERROR",
+                  },
+                ],
+              },
+            ],
+          },
+        });
+      });
+    });
+
+    const link = errorLink.concat(mockLink);
+    const stream = new ObservableStream(execute(link, { query }));
+
+    await expect(stream).toEmitValue({
+      data: null,
+      extensions: {
+        [PROTOCOL_ERRORS_SYMBOL]: [
+          {
+            message: "cannot read message from websocket",
+            extensions: [
+              {
+                code: "WEBSOCKET_MESSAGE_ERROR",
+              },
+            ],
+          },
+        ],
+      },
+    });
+  });
+
   it("captures errors within links", async () => {
     const query = gql`
       query Foo {
@@ -356,6 +417,66 @@ describe("error handling with class", () => {
     expect(called).toBe(true);
   });
 
+  it("handles protocol errors", async () => {
+    expect.assertions(3);
+    const query = gql`
+      query Foo {
+        foo {
+          bar
+        }
+      }
+    `;
+
+    const errorLink = new ErrorLink(({ operation, protocolErrors }) => {
+      expect(operation.operationName).toBe("Foo");
+      expect(protocolErrors).toEqual([
+        {
+          message: "cannot read message from websocket",
+          extensions: [{ code: "WEBSOCKET_MESSAGE_ERROR" }],
+        },
+      ]);
+    });
+
+    const mockLink = new ApolloLink((_operation) => {
+      return new Observable((observer) => {
+        observer.next({
+          data: null,
+          extensions: {
+            [PROTOCOL_ERRORS_SYMBOL]: [
+              {
+                message: "cannot read message from websocket",
+                extensions: [
+                  {
+                    code: "WEBSOCKET_MESSAGE_ERROR",
+                  },
+                ],
+              },
+            ],
+          },
+        });
+      });
+    });
+
+    const link = errorLink.concat(mockLink);
+    const stream = new ObservableStream(execute(link, { query }));
+
+    await expect(stream).toEmitValue({
+      data: null,
+      extensions: {
+        [PROTOCOL_ERRORS_SYMBOL]: [
+          {
+            message: "cannot read message from websocket",
+            extensions: [
+              {
+                code: "WEBSOCKET_MESSAGE_ERROR",
+              },
+            ],
+          },
+        ],
+      },
+    });
+  });
+
   it("captures errors within links", async () => {
     const query = gql`
       {
@@ -465,6 +586,18 @@ describe("support for request retrying", () => {
     message: "some other error",
   };
 
+  const PROTOCOL_ERROR = {
+    data: null,
+    extensions: {
+      [PROTOCOL_ERRORS_SYMBOL]: [
+        {
+          message: "cannot read message from websocket",
+          extensions: [{ code: "WEBSOCKET_MESSAGE_ERROR" }],
+        },
+      ],
+    },
+  };
+
   it("returns the retried request when forward(operation) is called", async () => {
     let errorHandlerCalled = false;
 
@@ -550,6 +683,45 @@ describe("support for request retrying", () => {
     await expect(stream).toComplete();
   });
 
+  it("supports retrying when the initial request had protocol errors", async () => {
+    let errorHandlerCalled = false;
+
+    let timesCalled = 0;
+    const mockHttpLink = new ApolloLink((operation) => {
+      return new Observable((observer) => {
+        // simulate the first request being an error
+        if (timesCalled === 0) {
+          timesCalled++;
+          observer.next(PROTOCOL_ERROR);
+          observer.complete();
+        } else {
+          observer.next(GOOD_RESPONSE);
+          observer.complete();
+        }
+      });
+    });
+
+    const errorLink = new ErrorLink(
+      ({ protocolErrors, operation, forward }) => {
+        if (protocolErrors) {
+          errorHandlerCalled = true;
+          expect(protocolErrors).toEqual(
+            PROTOCOL_ERROR.extensions[PROTOCOL_ERRORS_SYMBOL]
+          );
+          return forward(operation);
+        }
+      }
+    );
+
+    const link = errorLink.concat(mockHttpLink);
+
+    const stream = new ObservableStream(execute(link, { query: QUERY }));
+
+    await expect(stream).toEmitValue(GOOD_RESPONSE);
+    expect(errorHandlerCalled).toBe(true);
+    await expect(stream).toComplete();
+  });
+
   it("returns errors from retried requests", async () => {
     let errorHandlerCalled = false;
 

src/link/error/index.ts

@@ -1,5 +1,13 @@
-import type { FormattedExecutionResult, GraphQLFormattedError } from "graphql";
+import type {
+  FormattedExecutionResult,
+  GraphQLErrorExtensions,
+  GraphQLFormattedError,
+} from "graphql";
 
+import {
+  graphQLResultHasProtocolErrors,
+  PROTOCOL_ERRORS_SYMBOL,
+} from "../../errors/index.js";
 import type { NetworkError } from "../../errors/index.js";
 import { Observable } from "../../utilities/index.js";
 import type { Operation, FetchResult, NextLink } from "../core/index.js";
@@ -8,6 +16,10 @@ import { ApolloLink } from "../core/index.js";
 export interface ErrorResponse {
   graphQLErrors?: ReadonlyArray<GraphQLFormattedError>;
   networkError?: NetworkError;
+  protocolErrors?: ReadonlyArray<{
+    message: string;
+    extensions?: GraphQLErrorExtensions[];
+  }>;
   response?: FormattedExecutionResult;
   operation: Operation;
   forward: NextLink;
@@ -42,16 +54,24 @@ export function onError(errorHandler: ErrorHandler): ApolloLink {
                 operation,
                 forward,
               });
+            } else if (graphQLResultHasProtocolErrors(result)) {
+              retriedResult = errorHandler({
+                protocolErrors: result.extensions[PROTOCOL_ERRORS_SYMBOL],
+                response: result,
+                operation,
+                forward,
+              });
+            }
 
-              if (retriedResult) {
-                retriedSub = retriedResult.subscribe({
-                  next: observer.next.bind(observer),
-                  error: observer.error.bind(observer),
-                  complete: observer.complete.bind(observer),
-                });
-                return;
-              }
+            if (retriedResult) {
+              retriedSub = retriedResult.subscribe({
+                next: observer.next.bind(observer),
+                error: observer.error.bind(observer),
+                complete: observer.complete.bind(observer),
+              });
+              return;
             }
+
             observer.next(result);
           },
           error: (networkError) => {