SSE bug fixes & improvements (codesandbox#1218)

* SSE bug fixes & improvements.

* Notifications: increased show time and doubled it for errors.

* SSE: handle initial socket connection timeout.

Author: lbogdan

packages/app/src/app/components/Preview/elements.js

@@ -30,15 +30,15 @@ export const Loading = styled.div`
   bottom: 0;
   right: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
   background-color: rgba(0, 0, 0, 0.75);
   padding: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
 
   font-size: 2rem;
-  font-weight: 800;
+  font-weight: 300;
   color: white;
+  line-height: 1.3;
+  text-align: center;
 `;

packages/app/src/app/components/Preview/index.js

@@ -48,6 +48,8 @@ type State = {
   urlInAddressBar: string,
   url: ?string,
   overlayMessage: ?string,
+  hibernated: boolean,
+  sseError: boolean,
 };
 
 const getSSEUrl = (id?: string) =>
@@ -131,6 +133,13 @@ async function retrieveSSEToken() {
   return null;
 }
 
+function sseTerminalMessage(msg) {
+  dispatch({
+    type: 'terminal:message',
+    data: `> Sandbox Container: ${msg}\n\r`,
+  });
+}
+
 class BasePreview extends React.Component<Props, State> {
   serverPreview: boolean;
   lastSent: {
@@ -157,6 +166,8 @@ class BasePreview extends React.Component<Props, State> {
         : frameUrl(props.sandbox.id, props.initialPath || ''),
       url: null,
       overlayMessage: null,
+      hibernated: false,
+      sseError: false,
     };
 
     // we need a value that doesn't change when receiving `initialPath`
@@ -192,6 +203,14 @@ class BasePreview extends React.Component<Props, State> {
 
   setupSSESockets = async () => {
     const hasInitialized = !!this.$socket;
+    let connectTimeout = null;
+
+    function onTimeout(setServerStatus) {
+      connectTimeout = null;
+      if (setServerStatus) {
+        setServerStatus('disconnected');
+      }
+    }
 
     if (hasInitialized) {
       this.setState({
@@ -201,6 +220,10 @@ class BasePreview extends React.Component<Props, State> {
         this.$socket.close();
         setTimeout(() => {
           if (this.$socket) {
+            connectTimeout = setTimeout(
+              () => onTimeout(this.props.setServerStatus),
+              3000
+            );
             this.$socket.open();
           }
         }, 0);
@@ -216,12 +239,23 @@ class BasePreview extends React.Component<Props, State> {
 
       socket.on('disconnect', () => {
         if (this.props.setServerStatus) {
-          this.props.setServerStatus('disconnected');
+          let status = 'disconnected';
+          if (this.state.hibernated) {
+            status = 'hibernated';
+          } else if (this.state.sseError) {
+            status = 'error';
+          }
+          this.props.setServerStatus(status);
           dispatch({ type: 'codesandbox:sse:disconnect' });
         }
       });
 
       socket.on('connect', async () => {
+        if (connectTimeout) {
+          clearTimeout(connectTimeout);
+          connectTimeout = null;
+        }
+
         if (this.props.setServerStatus) {
           this.props.setServerStatus('connected');
         }
@@ -231,10 +265,7 @@ class BasePreview extends React.Component<Props, State> {
 
         socket.emit('sandbox', { id, token });
 
-        dispatch({
-          type: 'terminal:message',
-          data: `> CodeSandbox SSE: connected! Starting sandbox ${id}...\n\r`,
-        });
+        sseTerminalMessage(`connected, starting sandbox ${id}...`);
 
         socket.emit('sandbox:start');
       });
@@ -257,12 +288,7 @@ class BasePreview extends React.Component<Props, State> {
       });
 
       socket.on('sandbox:start', () => {
-        const { id } = this.props.sandbox;
-
-        dispatch({
-          type: 'terminal:message',
-          data: `> CodeSandbox SSE: sandbox ${id} started\n\r`,
-        });
+        sseTerminalMessage(`sandbox ${this.props.sandbox.id} started.`);
 
         if (!this.state.frameInitialized && this.props.onInitialized) {
           this.disposeInitializer = this.props.onInitialized(this);
@@ -275,30 +301,60 @@ class BasePreview extends React.Component<Props, State> {
       });
 
       socket.on('sandbox:hibernate', () => {
-        this.setState({
-          frameInitialized: false,
-          overlayMessage:
-            'The sandbox is hibernating, refresh to start the sandbox',
-        });
-
-        this.$socket.close();
+        sseTerminalMessage(`sandbox ${this.props.sandbox.id} hibernated.`);
+
+        this.setState(
+          {
+            frameInitialized: false,
+            overlayMessage:
+              'The sandbox was hibernated because of inactivity. Refresh the page to restart it.',
+            hibernated: true,
+          },
+          () => this.$socket.close()
+        );
       });
 
       socket.on('sandbox:stop', () => {
+        sseTerminalMessage(`sandbox ${this.props.sandbox.id} restarting...`);
+
         this.setState({
           frameInitialized: false,
           overlayMessage: 'Restarting the sandbox...',
         });
       });
 
-      socket.on('sandbox:log', ({ chan, data }) => {
+      socket.on('sandbox:log', ({ data }) => {
         dispatch({
           type: 'terminal:message',
-          chan,
           data,
         });
       });
 
+      socket.on('sandbox:error', ({ message, unrecoverable }) => {
+        sseTerminalMessage(
+          `sandbox ${this.props.sandbox.id} ${
+            unrecoverable ? 'unrecoverable ' : ''
+          }error "${message}"`
+        );
+        if (unrecoverable) {
+          this.setState(
+            {
+              frameInitialized: false,
+              overlayMessage:
+                'An unrecoverable sandbox error occurred. :-( Try refreshing the page.',
+              sseError: true,
+            },
+            () => this.$socket.close()
+          );
+        } else {
+          window.showNotification(`Sandbox Container: ${message}`, 'error');
+        }
+      });
+
+      connectTimeout = setTimeout(
+        () => onTimeout(this.props.setServerStatus),
+        3000
+      );
       socket.open();
     }
   };

packages/app/src/app/pages/Sandbox/Editor/Workspace/SSEDownNotice/index.js

@@ -10,10 +10,7 @@ const ConnectionNotice = ({ store }) => {
     return null;
   }
 
-  if (
-    store.server.status === 'connected' ||
-    store.server.status === 'initializing'
-  ) {
+  if (store.server.status !== 'disconnected') {
     return null;
   }
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.js

@@ -3,7 +3,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 type Props = {
-  status: 'connected' | 'disconnected',
+  status:
+    | 'connected'
+    | 'disconnected'
+    | 'initializing'
+    | 'hibernated'
+    | 'error',
 };
 
 const StatusCircle = styled.div`
@@ -24,15 +29,19 @@ const Container = styled.div`
 `;
 
 const STATUS_MESSAGES = {
-  disconnected: 'Reconnecting to the server...',
-  connected: 'Connected to the server!',
-  initializing: 'Initializing connection to the server...',
+  disconnected: 'Reconnecting to sandbox...',
+  connected: 'Connected to sandbox',
+  initializing: 'Initializing connection to sandbox...',
+  hibernated: 'Sandbox hibernated',
+  error: 'Unrecoverable sandbox error',
 };
 
 const STATUS_COLOR = {
-  disconnected: '#fd2439fa',
+  disconnected: '#FD2439',
   connected: '#4CFF00',
   initializing: '#FFD399',
+  hibernated: '#FF662E',
+  error: '#FD2439',
 };
 
 export default ({ status }: Props) => (

packages/app/src/app/store/factories.js

@@ -77,19 +77,22 @@ export function setCurrentModule(id) {
 export function addNotification(
   title,
   notificationType,
-  timeAlive = 2,
+  timeAlive,
   buttons = []
 ) {
-  // eslint-disable-next-line
+  // eslint-disable-next-line no-shadow
   return function addNotification({ state, resolve }) {
     const now = Date.now();
+    const notificationTypeValue = resolve.value(notificationType);
+    const timeAliveDefault = notificationTypeValue === 'error' ? 6 : 3;
 
     state.push('notifications', {
       id: now,
       title: resolve.value(title),
-      notificationType: resolve.value(notificationType),
+      notificationType: notificationTypeValue,
       buttons: resolve.value(buttons),
-      endTime: now + resolve.value(timeAlive) * 1000,
+      endTime:
+        now + (timeAlive ? resolve.value(timeAlive) : timeAliveDefault) * 1000,
     });
   };
 }

packages/app/src/app/store/modules/server/model.js

@@ -5,5 +5,7 @@ export default {
     'connected',
     'disconnected',
     'initializing',
+    'hibernated',
+    'error',
   ]),
 };