Handle upload errors in voice messages

Fixes https://github.com/vector-im/element-web/issues/17148

Mostly adding some try/catch blocks, and a generic dialog.

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -68,37 +68,49 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         }
 
         await this.state.recorder.stop();
-        const upload = await this.state.recorder.upload(this.props.room.roomId);
-        MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
-            "body": "Voice message",
-            //"msgtype": "org.matrix.msc2516.voice",
-            "msgtype": MsgType.Audio,
-            "url": upload.mxc,
-            "file": upload.encrypted,
-            "info": {
-                duration: Math.round(this.state.recorder.durationSeconds * 1000),
-                mimetype: this.state.recorder.contentType,
-                size: this.state.recorder.contentLength,
-            },
 
-            // MSC1767 + Ideals of MSC2516 as MSC3245
+        try {
-            // https://github.com/matrix-org/matrix-doc/pull/3245
+            const upload = await this.state.recorder.upload(this.props.room.roomId);
-            "org.matrix.msc1767.text": "Voice message",
-            "org.matrix.msc1767.file": {
-                url: upload.mxc,
-                file: upload.encrypted,
-                name: "Voice message.ogg",
-                mimetype: this.state.recorder.contentType,
-                size: this.state.recorder.contentLength,
-            },
-            "org.matrix.msc1767.audio": {
-                duration: Math.round(this.state.recorder.durationSeconds * 1000),
 
-                // https://github.com/matrix-org/matrix-doc/pull/3246
+            // noinspection ES6MissingAwait - we don't care if it fails, it'll get queued.
-                waveform: this.state.recorder.getPlayback().thumbnailWaveform.map(v => Math.round(v * 1024)),
+            MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
-            },
+                "body": "Voice message",
-            "org.matrix.msc3245.voice": {}, // No content, this is a rendering hint
+                //"msgtype": "org.matrix.msc2516.voice",
-        });
+                "msgtype": MsgType.Audio,
+                "url": upload.mxc,
+                "file": upload.encrypted,
+                "info": {
+                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
+                    mimetype: this.state.recorder.contentType,
+                    size: this.state.recorder.contentLength,
+                },
+
+                // MSC1767 + Ideals of MSC2516 as MSC3245
+                // https://github.com/matrix-org/matrix-doc/pull/3245
+                "org.matrix.msc1767.text": "Voice message",
+                "org.matrix.msc1767.file": {
+                    url: upload.mxc,
+                    file: upload.encrypted,
+                    name: "Voice message.ogg",
+                    mimetype: this.state.recorder.contentType,
+                    size: this.state.recorder.contentLength,
+                },
+                "org.matrix.msc1767.audio": {
+                    duration: Math.round(this.state.recorder.durationSeconds * 1000),
+
+                    // https://github.com/matrix-org/matrix-doc/pull/3246
+                    waveform: this.state.recorder.getPlayback().thumbnailWaveform.map(v => Math.round(v * 1024)),
+                },
+                "org.matrix.msc3245.voice": {}, // No content, this is a rendering hint
+            });
+        } catch (e) {
+            console.error("Error sending/uploading voice message:", e);
+            Modal.createTrackedDialog('Upload failed', '', ErrorDialog, {
+                title: _t('Upload Failed'),
+                description: _t("The voice message failed to upload."),
+            });
+            return; // don't dispose the recording so the user can retry, maybe
+        }
         await this.disposeRecording();
     }
 

src/i18n/strings/en_EN.json

@@ -1678,6 +1678,7 @@
     "Invited by %(sender)s": "Invited by %(sender)s",
     "Jump to first unread message.": "Jump to first unread message.",
     "Mark all as read": "Mark all as read",
+    "The voice message failed to upload.": "The voice message failed to upload.",
     "Unable to access your microphone": "Unable to access your microphone",
     "We were unable to access your microphone. Please check your browser settings and try again.": "We were unable to access your microphone. Please check your browser settings and try again.",
     "No microphone found": "No microphone found",

src/voice/VoiceRecording.ts

@@ -333,12 +333,17 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
 
         if (this.lastUpload) return this.lastUpload;
 
-        this.emit(RecordingState.Uploading);
+        try {
-        const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
+            this.emit(RecordingState.Uploading);
-            type: this.contentType,
+            const { url: mxc, file: encrypted } = await uploadFile(this.client, inRoomId, new Blob([this.audioBuffer], {
-        }));
+                type: this.contentType,
-        this.lastUpload = { mxc, encrypted };
+            }));
-        this.emit(RecordingState.Uploaded);
+            this.lastUpload = { mxc, encrypted };
+            this.emit(RecordingState.Uploaded);
+        } catch (e) {
+            this.emit(RecordingState.Ended);
+            throw e;
+        }
         return this.lastUpload;
     }
 }