From c8a8f2f386d3e75b39d204533e51e7e9dbe1bc80 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 4 Oct 2024 11:47:52 -0600
Subject: [PATCH] Be more tolerant of errors triggered by store reset (#1538)

---
 .changeset/bright-impalas-teach.md                 | 5 +++++
 .changeset/three-toes-teach.md                     | 5 +++++
 src/application/components/Cache/Cache.tsx         | 3 ++-
 src/application/components/Mutations/Mutations.tsx | 3 ++-
 src/application/components/Queries/Queries.tsx     | 3 ++-
 src/application/index.tsx                          | 4 ++++
 src/application/utilities/ignoredErrors.ts         | 5 +++++
 src/extension/tab/helpers.ts                       | 4 ++--
 8 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/bright-impalas-teach.md
 create mode 100644 .changeset/three-toes-teach.md
 create mode 100644 src/application/utilities/ignoredErrors.ts

diff --git a/.changeset/bright-impalas-teach.md b/.changeset/bright-impalas-teach.md
new file mode 100644
index 000000000..9d7f2e92d
--- /dev/null
+++ b/.changeset/bright-impalas-teach.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix issue when serializing an `ApolloError` where clientErrors or protocolErrors is undefined.
diff --git a/.changeset/three-toes-teach.md b/.changeset/three-toes-teach.md
new file mode 100644
index 000000000..05b1926f2
--- /dev/null
+++ b/.changeset/three-toes-teach.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix issue where a page refresh would sometimes cause an error to be displayed in the devtools related to store resets.
diff --git a/src/application/components/Cache/Cache.tsx b/src/application/components/Cache/Cache.tsx
index c74f8eb05..e25293f79 100644
--- a/src/application/components/Cache/Cache.tsx
+++ b/src/application/components/Cache/Cache.tsx
@@ -24,6 +24,7 @@ import { getRootCacheIds } from "./common/utils";
 import HighlightMatch from "../HighlightMatch";
 import { useActorEvent } from "../../hooks/useActorEvent";
 import { PageSpinner } from "../PageSpinner";
+import { isIgnoredError } from "../../utilities/ignoredErrors";
 
 const { Sidebar, Main } = SidebarLayout;
 
@@ -72,7 +73,7 @@ export function Cache({ clientId }: CacheProps) {
     }
   );
 
-  if (error) {
+  if (error && !isIgnoredError(error)) {
     throw error;
   }
 
diff --git a/src/application/components/Mutations/Mutations.tsx b/src/application/components/Mutations/Mutations.tsx
index 87050ab33..bfe59bcdf 100644
--- a/src/application/components/Mutations/Mutations.tsx
+++ b/src/application/components/Mutations/Mutations.tsx
@@ -23,6 +23,7 @@ import { useActorEvent } from "../../hooks/useActorEvent";
 import { SearchField } from "../SearchField";
 import HighlightMatch from "../HighlightMatch";
 import { PageSpinner } from "../PageSpinner";
+import { isIgnoredError } from "../../utilities/ignoredErrors";
 
 const GET_MUTATIONS: TypedDocumentNode<GetMutations, GetMutationsVariables> =
   gql`
@@ -76,7 +77,7 @@ export const Mutations = ({ clientId, explorerIFrame }: MutationsProps) => {
     }
   );
 
-  if (error) {
+  if (error && !isIgnoredError(error)) {
     throw error;
   }
 
diff --git a/src/application/components/Queries/Queries.tsx b/src/application/components/Queries/Queries.tsx
index 36699b252..6585c322a 100644
--- a/src/application/components/Queries/Queries.tsx
+++ b/src/application/components/Queries/Queries.tsx
@@ -25,6 +25,7 @@ import { useActorEvent } from "../../hooks/useActorEvent";
 import { SearchField } from "../SearchField";
 import HighlightMatch from "../HighlightMatch";
 import { PageSpinner } from "../PageSpinner";
+import { isIgnoredError } from "../../utilities/ignoredErrors";
 
 enum QueryTabs {
   Variables = "Variables",
@@ -80,7 +81,7 @@ export const Queries = ({ clientId, explorerIFrame }: QueriesProps) => {
     }
   );
 
-  if (error) {
+  if (error && !isIgnoredError(error)) {
     throw error;
   }
 
diff --git a/src/application/index.tsx b/src/application/index.tsx
index 16df196ec..5e253075a 100755
--- a/src/application/index.tsx
+++ b/src/application/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import type { Reference } from "@apollo/client";
+import { loadDevMessages, loadErrorMessages } from "@apollo/client/dev";
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { SchemaLink } from "@apollo/client/link/schema";
 
@@ -12,6 +13,9 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import { getRpcClient } from "../extension/devtools/panelRpcClient";
 import { createSchemaWithRpcClient } from "./schema";
 
+loadDevMessages();
+loadErrorMessages();
+
 const rpcClient = getRpcClient();
 const schema = createSchemaWithRpcClient(rpcClient);
 const link = new SchemaLink({ schema });
diff --git a/src/application/utilities/ignoredErrors.ts b/src/application/utilities/ignoredErrors.ts
new file mode 100644
index 000000000..df25d144e
--- /dev/null
+++ b/src/application/utilities/ignoredErrors.ts
@@ -0,0 +1,5 @@
+const IGNORED_ERRORS = [/^Store reset/];
+
+export function isIgnoredError(error: Error) {
+  return IGNORED_ERRORS.some((regex) => regex.test(error.message));
+}
diff --git a/src/extension/tab/helpers.ts b/src/extension/tab/helpers.ts
index 347a60e32..856322a72 100644
--- a/src/extension/tab/helpers.ts
+++ b/src/extension/tab/helpers.ts
@@ -97,14 +97,14 @@ export function getQueries(
 
 function serializeApolloError(error: ApolloError): SerializedApolloError {
   return {
-    clientErrors: error.clientErrors.map((e) => e.message),
+    clientErrors: error.clientErrors?.map((e) => e.message) ?? [],
     name: "ApolloError",
     networkError: error.networkError
       ? serializeError(error.networkError)
       : undefined,
     message: error.message,
     graphQLErrors: error.graphQLErrors,
-    protocolErrors: error.protocolErrors.map((e) => e.message),
+    protocolErrors: error.protocolErrors?.map((e) => e.message) ?? [],
   };
 }