c633cd0888
DirectUpload returns errors as strings, including an HTTP status and a file name (and without a stack trace). But Sentry groups issues according to the stack trace, and maybe the error message in last resort. So we have an issue: as all DirectUpload errors logged by Sentry are generated on the same line, with random-looking messages, Sentry groups them either too or too little aggressively. Instead of creating all the errors on the same line: - add some `if`s statements to create them on different lines (and so with different stack traces), - strip the file name from the error message. This allows Sentry to group the errors properly, with meaningful error messages.
45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import { DirectUpload } from '@rails/activestorage';
|
|
import ProgressBar from './progress-bar';
|
|
import errorFromDirectUploadMessage from './errors';
|
|
|
|
/**
|
|
Uploader class is a delegate for DirectUpload instance
|
|
used to track lifecycle and progress of an upload.
|
|
*/
|
|
export default class Uploader {
|
|
constructor(input, file, directUploadUrl) {
|
|
this.directUpload = new DirectUpload(file, directUploadUrl, this);
|
|
this.progressBar = new ProgressBar(input, this.directUpload.id, file);
|
|
}
|
|
|
|
start() {
|
|
this.progressBar.start();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
this.directUpload.create((errorMsg, attributes) => {
|
|
if (errorMsg) {
|
|
this.progressBar.error(errorMsg);
|
|
let error = errorFromDirectUploadMessage(errorMsg);
|
|
reject(error);
|
|
} else {
|
|
resolve(attributes.signed_id);
|
|
}
|
|
this.progressBar.end();
|
|
this.progressBar.destroy();
|
|
});
|
|
});
|
|
}
|
|
|
|
uploadRequestDidProgress(event) {
|
|
const progress = (event.loaded / event.total) * 100;
|
|
if (progress) {
|
|
this.progressBar.progress(progress);
|
|
}
|
|
}
|
|
|
|
directUploadWillStoreFileWithXHR(xhr) {
|
|
xhr.upload.addEventListener('progress', event =>
|
|
this.uploadRequestDidProgress(event)
|
|
);
|
|
}
|
|
}
|