Be more tolerant of errors triggered by store reset (#1538)

.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.

.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.

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;
   }
 

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;
   }
 

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;
   }
 

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 });

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));
+}

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) ?? [],
   };
 }