Fix error serialization for rpc calls (#1278)

.changeset/hip-dots-worry.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix issue with error serialization when sending an error back through the message passing system. Unfortunately the raw error instance was lost in this process. This fix retains the error message when sending error messages in rpc calls.

src/extension/__tests__/rpc.test.ts

@@ -1,4 +1,5 @@
 import type { DistributiveOmit } from "../../types";
+import { RPC_MESSAGE_TIMEOUT } from "../errorMessages";
 import type { MessageAdapter } from "../messageAdapters";
 import type { RPCMessage, RPCRequestMessage } from "../messages";
 import { MessageType } from "../messages";
@@ -170,6 +171,29 @@ test("rejects when async handler rejects", async () => {
   );
 });
 
+test("maintains error name", async () => {
+  type Message = {
+    add(x: number, y: number): number;
+  };
+
+  const handlerAdapter = createTestAdapter();
+  const clientAdapter = createTestAdapter();
+  createBridge(clientAdapter, handlerAdapter);
+
+  const client = createRpcClient<Message>(clientAdapter);
+  const handle = createRpcHandler<Message>(handlerAdapter);
+
+  handle("add", () => Promise.reject(new SyntaxError()));
+
+  try {
+    await client.request("add", 1, 2);
+    throw new Error("Should not reach");
+  } catch (e) {
+    expect(e).toBeInstanceOf(SyntaxError);
+    expect((e as Error).name).toBe("SyntaxError");
+  }
+});
+
 test("can handle multiple rpc messages", async () => {
   type Message = {
     add(x: number, y: number): number;
@@ -403,9 +427,7 @@ test("times out if no message received within default timeout", async () => {
 
   jest.advanceTimersByTime(30_000);
 
-  await expect(promise).rejects.toEqual(
-    new Error("Timeout waiting for message")
-  );
+  await expect(promise).rejects.toEqual(new Error(RPC_MESSAGE_TIMEOUT));
 
   jest.useRealTimers();
 });
@@ -423,9 +445,7 @@ test("times out if no message received within configured timeout", async () => {
 
   jest.advanceTimersByTime(1000);
 
-  await expect(promise).rejects.toEqual(
-    new Error("Timeout waiting for message")
-  );
+  await expect(promise).rejects.toEqual(new Error(RPC_MESSAGE_TIMEOUT));
 
   jest.useRealTimers();
 });
@@ -469,17 +489,13 @@ test("resets timeout to default timeout after sending request", async () => {
   expect(finished).toContain(promise1);
   expect(finished).not.toContain(promise2);
 
-  await expect(promise1).rejects.toEqual(
-    new Error("Timeout waiting for message")
-  );
+  await expect(promise1).rejects.toEqual(new Error(RPC_MESSAGE_TIMEOUT));
 
   jest.advanceTimersByTime(1000);
   // wait for a tick, just to be sure the `finally` block has time to run
   await Promise.resolve();
   expect(finished).toContain(promise2);
-  await expect(promise2).rejects.toEqual(
-    new Error("Timeout waiting for message")
-  );
+  await expect(promise2).rejects.toEqual(new Error(RPC_MESSAGE_TIMEOUT));
 
   const promise3 = client.request("add", 1, 2);
   promise3
@@ -499,9 +515,7 @@ test("resets timeout to default timeout after sending request", async () => {
   // wait for a tick, just to be sure the `finally` block has time to run
   await Promise.resolve();
   expect(finished).toContain(promise3);
-  await expect(promise3).rejects.toEqual(
-    new Error("Timeout waiting for message")
-  );
+  await expect(promise3).rejects.toEqual(new Error(RPC_MESSAGE_TIMEOUT));
 
   jest.useRealTimers();
 });

src/extension/errorMessages.ts

@@ -0,0 +1 @@
+export const RPC_MESSAGE_TIMEOUT = "RPC_MESSAGE_TIMEOUT";

src/extension/errorSerialization.ts

@@ -0,0 +1,40 @@
+const errorConstructors = [
+  EvalError,
+  RangeError,
+  ReferenceError,
+  SyntaxError,
+  TypeError,
+  URIError,
+].reduce(
+  (memo, constructor) => memo.set(constructor.name, constructor),
+  new Map<string, ErrorConstructor>()
+);
+
+export function serializeError(error: unknown) {
+  return error instanceof Error
+    ? { name: error.name, message: error.message, stack: error.stack }
+    : { message: String(error) };
+}
+
+export function deserializeError({
+  name,
+  message,
+  stack,
+}: {
+  name?: string;
+  message: string;
+  stack?: string;
+}) {
+  const ErrorClass = name ? errorConstructors.get(name) ?? Error : Error;
+  const error = new ErrorClass(message);
+
+  if (name && error.name !== name) {
+    error.name = name;
+  }
+
+  if (stack) {
+    error.stack = stack;
+  }
+
+  return error;
+}

src/extension/messages.ts

@@ -26,7 +26,7 @@ export type RPCErrorResponseMessage = {
   type: MessageType.RPCResponse;
   id: string;
   sourceId: string;
-  error: unknown;
+  error: { name?: string; message: string; stack?: string };
 };
 
 export type RPCSuccessResponseMessage<Result = unknown> = {

src/extension/rpc.ts

@@ -1,4 +1,6 @@
 import type { NoInfer, SafeAny } from "../types";
+import { RPC_MESSAGE_TIMEOUT } from "./errorMessages";
+import { deserializeError, serializeError } from "./errorSerialization";
 import type { MessageAdapter } from "./messageAdapters";
 import type {
   RPCMessage,
@@ -39,7 +41,7 @@ export function createRpcClient<Messages extends MessageCollection>(
 
         const timeout = setTimeout(() => {
           removeListener();
-          reject(new Error("Timeout waiting for message"));
+          reject(new Error(RPC_MESSAGE_TIMEOUT));
         }, this.timeout);
 
         const removeListener = adapter.addListener((message) => {
@@ -48,7 +50,7 @@ export function createRpcClient<Messages extends MessageCollection>(
           }
 
           if ("error" in message) {
-            reject(message.error);
+            reject(deserializeError(message.error));
           } else {
             resolve(message.result);
           }
@@ -119,13 +121,13 @@ export function createRpcHandler<Messages extends MessageCollection>(
           sourceId: id,
           result,
         });
-      } catch (error) {
+      } catch (e) {
         adapter.postMessage({
           source: "apollo-client-devtools",
           type: MessageType.RPCResponse,
           id: createId(),
           sourceId: id,
-          error,
+          error: serializeError(e),
         });
       }
     });

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "allowJs": true,
     "sourceMap": true,
     "noImplicitAny": true,
     "strictNullChecks": true,