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.
64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import ProgressBar from './progress-bar';
|
||
import errorFromDirectUploadMessage from './errors';
|
||
import { fire } from '@utils';
|
||
|
||
const INITIALIZE_EVENT = 'direct-upload:initialize';
|
||
const START_EVENT = 'direct-upload:start';
|
||
const PROGRESS_EVENT = 'direct-upload:progress';
|
||
const ERROR_EVENT = 'direct-upload:error';
|
||
const END_EVENT = 'direct-upload:end';
|
||
|
||
function addUploadEventListener(type, handler) {
|
||
addEventListener(type, event => {
|
||
// Internet Explorer and Edge will sometime replay Javascript events
|
||
// that were dispatched just before a page navigation (!), but without
|
||
// the event payload.
|
||
//
|
||
// Ignore these replayed events.
|
||
const isEventValid = event && event.detail && event.detail.id != undefined;
|
||
if (!isEventValid) return;
|
||
|
||
handler(event);
|
||
});
|
||
}
|
||
|
||
addUploadEventListener(INITIALIZE_EVENT, ({ target, detail: { id, file } }) => {
|
||
ProgressBar.init(target, id, file);
|
||
});
|
||
|
||
addUploadEventListener(START_EVENT, ({ target, detail: { id } }) => {
|
||
ProgressBar.start(id);
|
||
// At the end of the upload, the form will be submitted again.
|
||
// Avoid the confirm dialog to be presented again then.
|
||
const button = target.form.querySelector('button.primary');
|
||
if (button) {
|
||
button.removeAttribute('data-confirm');
|
||
}
|
||
});
|
||
|
||
addUploadEventListener(PROGRESS_EVENT, ({ detail: { id, progress } }) => {
|
||
ProgressBar.progress(id, progress);
|
||
});
|
||
|
||
addUploadEventListener(ERROR_EVENT, event => {
|
||
let id = event.detail.id;
|
||
let errorMsg = event.detail.error;
|
||
|
||
// Display an error message
|
||
alert(
|
||
`Nous sommes désolés, une erreur s’est produite lors de l’envoi du fichier.
|
||
|
||
(${errorMsg})`
|
||
);
|
||
// Prevent ActiveStorage from displaying its own error message
|
||
event.preventDefault();
|
||
|
||
ProgressBar.error(id, errorMsg);
|
||
|
||
let error = errorFromDirectUploadMessage(errorMsg);
|
||
fire(document, 'sentry:capture-exception', error);
|
||
});
|
||
|
||
addUploadEventListener(END_EVENT, ({ detail: { id } }) => {
|
||
ProgressBar.end(id);
|
||
});
|