show errors in event tab

Kong · Aug 19, 2022 · 70a9f0c · 70a9f0c
1 parent 64d2a07
commit 70a9f0c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/packages/insomnia/src/main/network/websocket.ts b/packages/insomnia/src/main/network/websocket.ts
@@ -74,14 +74,12 @@ async function createWebSocketConnection(
     console.warn('Connection still open to ' + existingConnection.url);
     return;
   }
-
+  const request = await websocketRequest.getById(options.requestId);
+  const responseId = generateId('res');
+  if (!request) {
+    return;
+  }
   try {
-    const request = await websocketRequest.getById(options.requestId);
-    const responseId = generateId('res');
-    if (!request?.url) {
-      throw new Error('No URL specified');
-    }
-
     const eventChannel = `webSocketRequest.connection.${responseId}.event`;
     const readyStateChannel = `webSocketRequest.connection.${request._id}.readyState`;
 
@@ -203,8 +201,20 @@ async function createWebSocketConnection(
       event.sender.send(readyStateChannel, ws.readyState);
     });
   } catch (e) {
-    console.error(e);
-    throw e;
+    console.error('message', e);
+    const responsePatch = {
+      _id: generateId('res'),
+      parentId: request._id,
+      statusMessage: 'Error',
+      error: e.message || 'Something went wrong',
+      elapsedTime: 0,
+      httpVersion:'',
+      statusCode: 0,
+      headers: [],
+    };
+    const settings = await models.settings.getOrCreate();
+    models.response.create(responsePatch, settings.maxHistoryResponses);
+    models.requestMeta.updateOrCreateByParentId(request._id, { activeResponseId: null });
   }
 }
 

diff --git a/packages/insomnia/src/ui/components/websockets/action-bar.tsx b/packages/insomnia/src/ui/components/websockets/action-bar.tsx
@@ -88,7 +88,6 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ requestId, defaultValue
         <Input
           name="websocketUrlInput"
           disabled={readyState === ReadyState.OPEN}
-          required
           placeholder="wss://example.com/chat"
           defaultValue={defaultValue}
           onChange={onChange}

diff --git a/packages/insomnia/src/ui/components/websockets/websocket-response-pane.tsx b/packages/insomnia/src/ui/components/websockets/websocket-response-pane.tsx
@@ -12,6 +12,7 @@ import { Pane, PaneHeader as OriginalPaneHeader } from '../panes/pane';
 import { SizeTag } from '../tags/size-tag';
 import { StatusTag } from '../tags/status-tag';
 import { TimeTag } from '../tags/time-tag';
+import { ResponseErrorViewer } from '../viewers/response-error-viewer';
 import { ResponseTimelineViewer } from '../viewers/response-timeline-viewer';
 import { EventLogTable } from './event-log-table';
 import { EventLogView } from './event-log-view';
@@ -88,20 +89,23 @@ export const WebSocketResponsePane: FC<{ requestId: string; response: Response;
         </TabList>
         <TabPanel className="react-tabs__tab-panel">
           <PaneBodyContent>
-            {Boolean(events?.length) && (
-              <EventLogTableWrapper>
-                <EventLogTable
-                  events={events}
-                  onSelect={handleSelection}
-                  selectionId={selectedEvent?._id}
-                />
-              </EventLogTableWrapper>
-            )}
-            {selectedEvent && (
-              <EventLogViewWrapper>
-                <EventLogView event={selectedEvent} />
-              </EventLogViewWrapper>
-            )}
+            {response.error ? <ResponseErrorViewer url={response.url} error={response.error} />
+              : <>
+                {Boolean(events?.length) && (
+                  <EventLogTableWrapper>
+                    <EventLogTable
+                      events={events}
+                      onSelect={handleSelection}
+                      selectionId={selectedEvent?._id}
+                    />
+                  </EventLogTableWrapper>
+                )}
+                {selectedEvent && (
+                  <EventLogViewWrapper>
+                    <EventLogView event={selectedEvent} />
+                  </EventLogViewWrapper>
+                )}
+              </>}
           </PaneBodyContent>
         </TabPanel>
         <TabPanel className="react-tabs__tab-panel">