Track performance of message sends

ts/components/CompositionInput.tsx

@@ -74,7 +74,11 @@ export type Props = {
   ): unknown;
   onTextTooLong(): unknown;
   onPickEmoji(o: EmojiPickDataType): unknown;
-  onSubmit(message: string, mentions: Array<BodyRangeType>): unknown;
+  onSubmit(
+    message: string,
+    mentions: Array<BodyRangeType>,
+    timestamp: number
+  ): unknown;
   getQuotedMessage(): unknown;
   clearQuotedMessage(): unknown;
 };
@@ -218,6 +222,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
   };
 
   const submit = () => {
+    const timestamp = Date.now();
     const quill = quillRef.current;
 
     if (quill === undefined) {
@@ -226,8 +231,10 @@ export const CompositionInput: React.ComponentType<Props> = props => {
 
     const [text, mentions] = getTextAndMentions();
 
-    window.log.info(`Submitting a message with ${mentions.length} mentions`);
-    onSubmit(text, mentions);
+    window.log.info(
+      `CompositionInput: Submitting message ${timestamp} with ${mentions.length} mentions`
+    );
+    onSubmit(text, mentions, timestamp);
   };
 
   if (inputApi) {

ts/components/conversation/Message.tsx

@@ -454,7 +454,7 @@ export class Message extends React.Component<Props, State> {
   }
 
   public componentDidUpdate(prevProps: Props): void {
-    const { canDeleteForEveryone, isSelected } = this.props;
+    const { canDeleteForEveryone, isSelected, status, timestamp } = this.props;
 
     this.startSelectedTimer();
 
@@ -468,6 +468,19 @@ export class Message extends React.Component<Props, State> {
     if (canDeleteForEveryone !== prevProps.canDeleteForEveryone) {
       this.startDeleteForEveryoneTimer();
     }
+
+    if (
+      prevProps.status === 'sending' &&
+      (status === 'sent' ||
+        status === 'delivered' ||
+        status === 'read' ||
+        status === 'viewed')
+    ) {
+      const delta = Date.now() - timestamp;
+      window.log.info(
+        `Message.tsx: Rendered 'send complete' for message ${timestamp}; took ${delta}ms`
+      );
+    }
   }
 
   public checkForHeightChange(prevProps: Props): void {

ts/models/conversations.ts

@@ -3559,6 +3559,9 @@ export class ConversationModel extends window.Backbone
     const destination = this.getSendTarget()!;
     const recipients = this.getRecipients();
 
+    if (timestamp) {
+      window.log.info(`sendMessage: Queueing send with timestamp ${timestamp}`);
+    }
     this.queueJob('sendMessage', async () => {
       const now = timestamp || Date.now();
 

ts/views/conversation_view.ts

@@ -670,8 +670,9 @@ Whisper.ConversationView = Whisper.View.extend({
         this.sendStickerMessage({ packId, stickerId }),
       onSubmit: (
         message: string,
-        mentions: typeof window.Whisper.BodyRangesType
-      ) => this.sendMessage(message, mentions),
+        mentions: typeof window.Whisper.BodyRangesType,
+        timestamp: number
+      ) => this.sendMessage(message, mentions, { timestamp }),
       onEditorStateChange: (
         msg: string,
         bodyRanges: Array<typeof window.Whisper.BodyRangeType>,
@@ -3640,7 +3641,7 @@ Whisper.ConversationView = Whisper.View.extend({
     }
   },
 
-  async getUntrustedContacts(options: any = {}) {
+  async getUntrustedContacts(options: { force?: boolean } = {}) {
     const { model }: { model: ConversationModel } = this;
 
     // This will go to the trust store for the latest identity key information,
@@ -3781,8 +3782,13 @@ Whisper.ConversationView = Whisper.View.extend({
     return false;
   },
 
-  async sendMessage(message = '', mentions = [], options = {}) {
+  async sendMessage(
+    message = '',
+    mentions = [],
+    options: { timestamp?: number; force?: boolean } = {}
+  ) {
     const { model }: { model: ConversationModel } = this;
+    const timestamp = options.timestamp || Date.now();
 
     this.sendStart = Date.now();
 
@@ -3793,7 +3799,7 @@ Whisper.ConversationView = Whisper.View.extend({
       if (contacts && contacts.length) {
         const sendAnyway = await this.showSendAnywayDialog(contacts);
         if (sendAnyway) {
-          this.sendMessage(message, mentions, { force: true });
+          this.sendMessage(message, mentions, { force: true, timestamp });
           return;
         }
 
@@ -3822,7 +3828,11 @@ Whisper.ConversationView = Whisper.View.extend({
       }
 
       const attachments = await this.getFiles();
+      const sendHQImages =
+        window.reduxStore &&
+        window.reduxStore.getState().composer.shouldSendHighQualityAttachments;
       const sendDelta = Date.now() - this.sendStart;
+
       window.log.info('Send pre-checks took', sendDelta, 'milliseconds');
 
       model.sendMessage(
@@ -3833,10 +3843,8 @@ Whisper.ConversationView = Whisper.View.extend({
         undefined, // sticker
         mentions,
         {
-          sendHQImages:
-            window.reduxStore &&
-            window.reduxStore.getState().composer
-              .shouldSendHighQualityAttachments,
+          sendHQImages,
+          timestamp,
         }
       );