Improve breadcrumbs

Author: CompuIves

packages/app/src/app/overmind/effects/live/clients.ts

@@ -57,7 +57,7 @@ export class CodeSandboxOTClient extends OTClient {
     return this.onSendOperation(revision, operation)
       .then(() => {
         logBreadcrumb({
-          type: 'ot',
+          category: 'ot',
           message: `Acknowledging ${JSON.stringify({
             moduleShortid: this.moduleShortid,
             revision,
@@ -111,6 +111,16 @@ export class CodeSandboxOTClient extends OTClient {
   }
 
   applyClient(operation: TextOperation) {
+    logBreadcrumb({
+      category: 'ot',
+      message: `Apply Client ${JSON.stringify({
+        moduleShortid: this.moduleShortid,
+        currentRevision: this.revision,
+        currentState: this.state.name,
+        operation,
+      })}`,
+    });
+
     super.applyClient(operation);
   }
 

packages/app/src/app/overmind/effects/live/index.ts

@@ -123,28 +123,28 @@ class Live {
     revision: number,
     operation: TextOperation
   ) => {
+    // If we are to await a send, we do it. It will be resolved
+    // related to number of connections changing
+    if (this.isLiveBlockerExperiement() && this.awaitSend) {
+      await this.awaitSend.promise;
+    }
+
     logBreadcrumb({
-      type: 'ot',
+      category: 'ot',
       message: `Sending ${JSON.stringify({
         moduleShortid,
         revision,
         operation,
       })}`,
     });
 
-    // If we are to await a send, we do it. It will be resolved
-    // related to number of connections changing
-    if (this.isLiveBlockerExperiement() && this.awaitSend) {
-      await this.awaitSend.promise;
-    }
-
     return this.send('operation', {
       moduleShortid,
       operation: this.operationToElixir(operation.toJSON()),
       revision,
     }).catch(error => {
       logBreadcrumb({
-        type: 'ot',
+        category: 'ot',
         message: `ERROR ${JSON.stringify({
           moduleShortid,
           revision,

packages/app/src/app/overmind/effects/live/ot/client.ts

@@ -4,6 +4,7 @@
 import { TextOperation } from 'ot';
 
 interface IState {
+  name: string;
   applyClient(client: OTClient, operation: TextOperation): IState;
   applyServer(client: OTClient, operation: TextOperation): IState;
   serverAck(client: OTClient): IState;
@@ -14,6 +15,8 @@ interface IState {
 // In the 'Synchronized' state, there is no pending operation that the client
 // has sent to the server.
 class Synchronized implements IState {
+  name = 'Synchronized';
+
   applyClient(client: OTClient, operation: TextOperation) {
     // When the user makes an edit, send the operation to the server and
     // switch to the 'AwaitingConfirm' state
@@ -45,6 +48,7 @@ export const synchronized_ = new Synchronized();
 // to the server and is still waiting for an acknowledgement.
 class AwaitingConfirm implements IState {
   outstanding: TextOperation;
+  name = 'AwaitingConfirm';
 
   constructor(outstanding: TextOperation) {
     // Save the pending operation
@@ -96,6 +100,8 @@ class AwaitingWithBuffer implements IState {
   outstanding: TextOperation;
   buffer: TextOperation;
 
+  name = 'AwaitingWithBuffer';
+
   constructor(outstanding: TextOperation, buffer: TextOperation) {
     // Save the pending operation and the user's edits since then
     this.outstanding = outstanding;