Fix schema fetching error handling

Author: timsuchanek

packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts

@@ -176,7 +176,7 @@ function* runQuerySaga(action) {
   try {
     while (true) {
       const { value, error } = yield take(channel)
-      if (value.extensions) {
+      if (value && value.extensions) {
         const extensions = value.extensions
         yield put(setResponseExtensions(extensions))
         delete value.extensiosn
@@ -195,17 +195,23 @@ function* runQuerySaga(action) {
   }
 }
 
-function formatError(error) {
+export function formatError(error, fetchingSchema: boolean = false) {
+  const message = extractMessage(error)
+  if (message === 'Failed to fetch') {
+    const schemaMessage = fetchingSchema ? ' schema' : ''
+    return { error: `${message}${schemaMessage}. Please check your connection` }
+  }
+
+  return { error: message }
+}
+
+function extractMessage(error) {
   if (error instanceof Error) {
-    return {
-      error: error.message,
-    }
+    return error.message
   }
 
   if (typeof error === 'string') {
-    return {
-      error,
-    }
+    return error
   }
 
   return error

packages/graphql-playground-react/src/state/sessions/reducers.ts

@@ -25,6 +25,7 @@ import {
 import { getSelectedSessionId } from './selectors'
 import { getDefaultSession, defaultQuery } from '../../constants'
 import * as cuid from 'cuid'
+import { formatError } from './fetchingSagas'
 
 export interface SessionStateProps {
   sessions: OrderedMap<string, Session>
@@ -308,7 +309,11 @@ const reducer = handleActions(
               responses: List([
                 new ResponseRecord({
                   resultID: cuid(),
-                  date: payload.error,
+                  date: JSON.stringify(
+                    formatError(payload.error, true),
+                    null,
+                    2,
+                  ),
                   time: new Date(),
                 }),
               ]),