pqina / filepond

🌊 A flexible and fun JavaScript file upload library
https://pqina.nl/filepond
MIT License
15.2k stars 830 forks source link

Uncaught exception (in promise) after HTTP 500 (Internal Server Error) #525

Open bagnus opened 4 years ago

bagnus commented 4 years ago

Hi, trying to test for server errors during file store at end of upload. I use PHP Filepond Uploader server with my own file save PHP procedure. Any exception thrown into one of PHP methods is converted (by handle_server_exceptions()) into http 500 error (this is expected).

Everything works (ex: the graphic file thumbnail get red color and the user is allowed to try again), but I obtain also a Javascript Uncaught exception (in promise) error that stops JS.

Error happens only with http 500 (or 400) error from server. If there is no error, everything is OK.

Don't really know if it's a bug, it could be my code fault...

Logs

Log is from Chrome console.

filepond.js:3143 POST http://192.168.1.215/system/filepond_uploader/api/ 500 (Internal Server Error) sendRequest @ filepond.js:3143 (anonymous) @ filepond.js:5399 process @ filepond.js:5641 success @ filepond.js:6114 (anonymous) @ filepond.js:7388 Promise.then (async) (anonymous) @ filepond.js:7385 process @ filepond.js:6121 (anonymous) @ filepond.js:7361 (anonymous) @ filepond.js:6512 dispatch @ filepond.js:76 (anonymous) @ filepond.js:62 processDispatchQueue @ filepond.js:59 _write @ filepond.js:11585 (anonymous) @ filepond.js:12563 (anonymous) @ filepond.js:12562 (anonymous) @ filepond.js:1460 tick @ filepond.js:1459 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick **test_error.php:1 Uncaught (in promise)** {error: {…}, file: {…}} error: body: "Internal Server Error" code: 500 headers: "access-control-allow-headers: content-type, upload-length, upload-offset, upload-name ↵access-control-allow-methods: OPTIONS, GET, DELETE, POST, HEAD, PATCH ↵access-control-allow-origin: * ↵access-control-expose-headers: upload-offset ↵cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 ↵connection: close ↵content-encoding: gzip ↵content-length: 20 ↵content-type: text/html; charset=utf-8 ↵date: Sun, 21 Jun 2020 09:17:39 GMT ↵expires: Thu, 19 Nov 1981 08:52:00 GMT ↵pragma: no-cache ↵server: Apache ↵vary: Accept-Encoding ↵x-powered-by: PHP/5.2.10-2ubuntu6.5 ↵" type: "error" __proto__: Object file: abortLoad: ƒ abortLoad() abortProcessing: ƒ abortProcessing() getMetadata: ƒ getMetadata(key) setMetadata: ƒ setMetadata(key, value, silent) file: (...) fileExtension: (...) fileSize: (...) fileType: (...) filename: (...) filenameWithoutExtension: (...) id: (...) origin: (...) relativePath: (...) serverId: (...) source: (...) status: (...) transferId: (...) get file: ƒ getFile() get fileExtension: ƒ getFileExtension() get fileSize: ƒ getFileSize() get fileType: ƒ getFileType() get filename: ƒ () get filenameWithoutExtension: ƒ () get id: ƒ () get origin: ƒ () get relativePath: ƒ () get serverId: ƒ () get source: ƒ () get status: ƒ () get transferId: ƒ () __proto__: Object __proto__: Object setTimeout (async) fire @ filepond.js:1958 (anonymous) @ filepond.js:1991 fire @ filepond.js:1990 fire @ filepond.js:5887 (anonymous) @ filepond.js:6085 (anonymous) @ filepond.js:1992 setTimeout (async) fire @ filepond.js:1958 (anonymous) @ filepond.js:1991 fire @ filepond.js:1990 (anonymous) @ filepond.js:5686 request.onerror @ filepond.js:5416 xhr.onload @ filepond.js:3098 load (async) sendRequest @ filepond.js:3093 (anonymous) @ filepond.js:5399 process @ filepond.js:5641 success @ filepond.js:6114 (anonymous) @ filepond.js:7388 Promise.then (async) (anonymous) @ filepond.js:7385 process @ filepond.js:6121 (anonymous) @ filepond.js:7361 (anonymous) @ filepond.js:6512 dispatch @ filepond.js:76 (anonymous) @ filepond.js:62 processDispatchQueue @ filepond.js:59 _write @ filepond.js:11585 (anonymous) @ filepond.js:12563 (anonymous) @ filepond.js:12562 (anonymous) @ filepond.js:1460 tick @ filepond.js:1459 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick @ filepond.js:1438 requestAnimationFrame (async) requestTick @ filepond.js:1422 tick

To Reproduce

My setup:

// filepond setup FilePond.registerPlugin( FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform, FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginFileMetadata ); FilePond.setOptions({ dropOnPage: true, dropOnElement: true, onaddfile:addSpecialFields, // add special fields in metadata allowFileTypeValidation: true, allowFileSizeValidation: true }); var fields = [].slice.call(document.querySelectorAll('input[type="file"]')); var ponds = fields.map(function(field, index) { return FilePond.create(field, { server: dm_form.upload_server, /* labelFileProcessingError: function(error) { console.log('error',error); return; }, process:{onerror:function(response) { console.log('error2',response); } } */ }); });

To get the error, throw any exception in PHP saveFile methods

Expected behavior In browser graphic user interface there are no problems, but JS is stopped after unchaught error.

Information about your project: Problem tested on Mac OSX 10.14 and Windows 7 and both browsers Firefox 77.01 and Chrome 83.0.

Tested with filepond.js 4.17.1

Additional context

ludoklein commented 3 years ago

Hello bagnus,

Don't know if you're still facing this issue. I had a similar problem with filepond (uncaught exception (in promise) that stops my JavaScript) when I tried to upload a file larger than the server limit. In my case it was a 503 error.

After hours of debugging, I found that the culprit was a missing "catch" on the following promise function in filepond.js :

var processFile = function processFile(query) { return new Promise(function(resolve, reject) { store.dispatch('REQUEST_ITEM_PROCESSING', { query: query, success: function success(item) { resolve(item); }, failure: function failure(error) { reject(error); } }); }); };

Maybe it's not the most efficient solution but, again in my case, adding a "catch" resolves my problem :

var processFile = function processFile(query) { return new Promise(function(resolve, reject) { store.dispatch('REQUEST_ITEM_PROCESSING', { query: query, success: function success(item) { resolve(item); }, failure: function failure(error) { reject(error); } }); }).catch(function(e) { console.log('file error', e); console.log('file name', e.file.filename); console.log('file id', e.file.id); }); };

Hope this will help...

bagnus commented 3 years ago

Hi, thanks for your update. In the next weeks I’ll try your solution. Greetings Andrea

Il giorno 22 gen 2021, alle ore 12:20, ludoklein notifications@github.com ha scritto:

Hello bagnus,

Don't know if you're still facing this issue. I had a similar problem with filepond (uncaught exception (in promise) that stops my JavaScript) when I tried to upload a file larger than the server limit. In my case it was a 503 error.

After hours of debugging, I found that the culprit was a missing "catch" on the following promise function in filepond.js :

var processFile = function processFile(query) { return new Promise(function(resolve, reject) { store.dispatch('REQUEST_ITEM_PROCESSING', { query: query, success: function success(item) { resolve(item); }, failure: function failure(error) { reject(error); } }); }); };

Maybe it's not the most efficient solution but, again in my case, adding a "catch" resolves my problem :

var processFile = function processFile(query) { return new Promise(function(resolve, reject) { store.dispatch('REQUEST_ITEM_PROCESSING', { query: query, success: function success(item) { resolve(item); }, failure: function failure(error) { reject(error); } }); }).catch(function(e) { console.log('file error', e); console.log('file name', e.file.filename); console.log('file id', e.file.id); }); };

Hope this will help...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/pqina/filepond/issues/525#issuecomment-765333588, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEJWBTIS5CEOTBVHGBPHXTTS3FNPXANCNFSM4OD55Q3Q.

bagnus commented 3 years ago

@ludoklein: Just tested and it worked well. No more Javascript error that stopped the client execution. By the way, when server returns http 400 or 500 codes there is no way to pass back a string error so I used a dedicated cookie to setup error string in server before return. The client, reading the same cookie, is able to display the error if present. Greetings Andrea

bagnus commented 3 years ago

@ludoklein: if you agree, you can incorporate the catch(function(e)... in function processFile() Greetings Andrea