leewinder / ng2-file-drop

An Angular module for simple desktop file drag and drop with automatic file validation and dynamic style adjustment.
MIT License
28 stars 26 forks source link

Is there a way to know why onErrorItem was called? #58

Open Carl-Meyer opened 3 years ago

Carl-Meyer commented 3 years ago

Hi There

We are using ng2 file drop for our angular application.

When a file is dropped we get a presigned url to post the file to s3 and then upload the file.

In most cases it works correctly, but a few times now users have experienced an error when uploading their file.

The onErrorItem method is called when this happens. Here is an example of our error in sentry: File Item:

 {
_file: {}, 
_xhr: {
__sentry_xhr__: [Object], 
__zone_symbol__abortfalse: [Array], 
__zone_symbol__errorfalse: [Array], 
__zone_symbol__loadfalse: [Array], 
__zone_symbol__ON_PROPERTYabort: [Function: <anonymous>], 
__zone_symbol__ON_PROPERTYerror: [Function: <anonymous>], 
__zone_symbol__ON_PROPERTYload: [Function: <anonymous>], 
__zone_symbol__ON_PROPERTYreadystatechange: [Function: <anonymous>], 
__zone_symbol__readystatechangefalse: [Array], 
__zone_symbol__xhrErrorBeforeScheduled: False, 
__zone_symbol__xhrListener: [Function: <anonymous>], 
__zone_symbol__xhrScheduled: True, 
__zone_symbol__xhrSync: False, 
__zone_symbol__xhrTask: [Object], 
__zone_symbol__xhrURL: https://risepeople-platform-files-production.s3.ca-central-1.amazonaws.com/recruitment/eb969982c2a9400ea6e6970ed9333f9f?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAXYU3UVV22B3EAIUH%2F20201018%2Fca-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201018T182601Z&X-Amz-Expires=300&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDGNhLWNlbnRyYWwtMSJHMEUCIAeyQ1LkeuBH9yZBouyUHPMKC6PYAjN8t172Vv44j%2FzFAiEAsX6Wt5qOv6Q0uvuAKz00RSCsq1PN8SahsqXAqb6sFcgqyAMILxACGgw1MzM5NzYxMDAyMTMiDOfqsUDTIPFIUbXjPSqlA1cWvLpL2%2B0wm2Fj7fSQhMUCYA0DQF2ZhSv9PqM6GWNPJLWKQ1Z43ugNTS4drSiYUwo2AEWPh3Br87wSqkbOxI0KFgNJUzKil5Hl8XoO3jTW1NQSKp%2ByWBLi5O51aNZSGcj4x%2BXjrx%2FWBTh%2B9EEltP2HYO4VvnknPulQG7MDXUeMrGx7MrpA78%2FFUYG8H9xKNXoH2Xdm0C3AM0tUthP4NyFT7o6O6ypdMXqBpirQG2fw0quNj9HXJ3vxzdP14x%2BmOUmK1rhYXk1tGQnBdcUYI5papwp%2BmWRDwSyLYI%2FQxOpsD9L4aOcC%2FByNZc72hk55r%2BiBlS8vDX1%2FNTFXcLs4yknmuGpXEIY7Io5Hy1f1%2BDxxMQHG2WjWpJ%2FtoRykH2dQzzikM%2B1iJiO4h7uqZec7QTtZ8BsPjPBTZiZhRG6yWTyppd03YL2rKDXLo%2FxYvajFh48KKHStKPVQkdCiMc23dQ1wvwpU0BB%2BHbz%2BPCpe%2F7WU4jNx9IhZ%2B6y8nnuPRkRl2w88pk9lqNL703A1Rn0ViG3C3mUddofZtfVJD23ofSoS1EffqAswooex%2FAU67AFofUfjZ3J8XF7QBPMsIc2is6ZEk31h9X6NvoEnqqoNrp%2FL9r5X0642q7zJgyF1RaBJ%2FKkdg0wg%2B2LGqo8yvJIEU1wwtENZnduNRRxLB8NmQPHGFdPKVuIT2RulsuebBNo8p%2Bvzm2cBT4PLfbcsUUDUP37foh8zC9iEn0sghNGLJFZ1TBDw%2BS6dlPLg7unMNx8J9cfLszd3tZaJg1xyDCaOMo%2F4Y8nvocN6D5rXd6V%2BqeYqlzSHeb6AAzuYp%2BZ44nyugRU63%2BRep0xxQMcDwSSwCBoNoqwnHr9MBJ3cyhXa1TjJZPKln6JPV7oR%2FQ%3D%3D&X-Amz-Signature=37a4a454651fd29a07f290d039fa78b34dcccb522dfbaad7d3a1a77168650a91&X-Amz-SignedHeaders=host
}, 
alias: file, 
file: {
name: 180713 Resume_Ashlie Salsman.pdf, 
rawFile: [object File], 
size: 362387, 
type: application/pdf
}, 
formData: [], 
headers: [
[Object], 
[Object]
], 
index: [undefined], 
isCancel: False, 
isError: True, 
isReady: False, 
isSuccess: False, 
isUploaded: True, 
isUploading: False, 
method: PUT, 
options: {
allowedMimeType: [Array], 
autoUpload: False, 
disableMultipart: True, 
filters: [Array], 
formatDataFunction: [Function: formatDataFunction], 
formatDataFunctionIsAsync: False, 
isHTML5: True, 
maxFileSize: 25000000, 
method: PUT, 
queueLimit: 1, 
removeAfterUpload: False, 
url: https://risepeople-platform-files-production.s3.ca-central-1.amazonaws.com/recruitment/eb969982c2a9400ea6e6970ed9333f9f?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAXYU3UVV22B3EAIUH%2F20201018%2Fca-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201018T182601Z&X-Amz-Expires=300&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDGNhLWNlbnRyYWwtMSJHMEUCIAeyQ1LkeuBH9yZBouyUHPMKC6PYAjN8t172Vv44j%2FzFAiEAsX6Wt5qOv6Q0uvuAKz00RSCsq1PN8SahsqXAqb6sFcgqyAMILxACGgw1MzM5NzYxMDAyMTMiDOfqsUDTIPFIUbXjPSqlA1cWvLpL2%2B0wm2Fj7fSQhMUCYA0DQF2ZhSv9PqM6GWNPJLWKQ1Z43ugNTS4drSiYUwo2AEWPh3Br87wSqkbOxI0KFgNJUzKil5Hl8XoO3jTW1NQSKp%2ByWBLi5O51aNZSGcj4x%2BXjrx%2FWBTh%2B9EEltP2HYO4VvnknPulQG7MDXUeMrGx7MrpA78%2FFUYG8H9xKNXoH2Xdm0C3AM0tUthP4NyFT7o6O6ypdMXqBpirQG2fw0quNj9HXJ3vxzdP14x%2BmOUmK1rhYXk1tGQnBdcUYI5papwp%2BmWRDwSyLYI%2FQxOpsD9L4aOcC%2FByNZc72hk55r%2BiBlS8vDX1%2FNTFXcLs4yknmuGpXEIY7Io5Hy1f1%2BDxxMQHG2WjWpJ%2FtoRykH2dQzzikM%2B1iJiO4h7uqZec7QTtZ8BsPjPBTZiZhRG6yWTyppd03YL2rKDXLo%2FxYvajFh48KKHStKPVQkdCiMc23dQ1wvwpU0BB%2BHbz%2BPCpe%2F7WU4jNx9IhZ%2B6y8nnuPRkRl2w88pk9lqNL703A1Rn0ViG3C3mUddofZtfVJD23ofSoS1EffqAswooex%2FAU67AFofUfjZ3J8XF7QBPMsIc2is6ZEk31h9X6NvoEnqqoNrp%2FL9r5X0642q7zJgyF1RaBJ%2FKkdg0wg%2B2LGqo8yvJIEU1wwtENZnduNRRxLB8NmQPHGFdPKVuIT2RulsuebBNo8p%2Bvzm2cBT4PLfbcsUUDUP37foh8zC9iEn0sghNGLJFZ1TBDw%2BS6dlPLg7unMNx8J9cfLszd3tZaJg1xyDCaOMo%2F4Y8nvocN6D5rXd6V%2BqeYqlzSHeb6AAzuYp%2BZ44nyugRU63%2BRep0xxQMcDwSSwCBoNoqwnHr9MBJ3cyhXa1TjJZPKln6JPV7oR%2FQ%3D%3D&X-Amz-Signature=37a4a454651fd29a07f290d039fa78b34dcccb522dfbaad7d3a1a77168650a91&X-Amz-SignedHeaders=host
}, 
progress: 0, 
some: {}, 
uploader: {
_failFilterIndex: 2, 
_nextIndex: 1, 
authToken: [Filtered], 
authTokenHeader: [Filtered], 
autoUpload: False, 
isUploading: True, 
onAfterAddingFile: [Function: <anonymous>], 
onCancelItem: [Function: <anonymous>], 
onErrorItem: [Function: <anonymous>], 
onProgressItem: [Function: <anonymous>], 
onSuccessItem: [Function: <anonymous>], 
onWhenAddingFileFailed: [Function: <anonymous>], 
options: [Object], 
progress: 0, 
queue: [Array], 
response: [Object]
}, 
url: https://risepeople-platform-files-production.s3.ca-central-1.amazonaws.com/recruitment/eb969982c2a9400ea6e6970ed9333f9f?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAXYU3UVV22B3EAIUH%2F20201018%2Fca-central-1%2Fs3%2Faws4_request&X-Amz-Date=20201018T182601Z&X-Amz-Expires=300&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEOX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDGNhLWNlbnRyYWwtMSJHMEUCIAeyQ1LkeuBH9yZBouyUHPMKC6PYAjN8t172Vv44j%2FzFAiEAsX6Wt5qOv6Q0uvuAKz00RSCsq1PN8SahsqXAqb6sFcgqyAMILxACGgw1MzM5NzYxMDAyMTMiDOfqsUDTIPFIUbXjPSqlA1cWvLpL2%2B0wm2Fj7fSQhMUCYA0DQF2ZhSv9PqM6GWNPJLWKQ1Z43ugNTS4drSiYUwo2AEWPh3Br87wSqkbOxI0KFgNJUzKil5Hl8XoO3jTW1NQSKp%2ByWBLi5O51aNZSGcj4x%2BXjrx%2FWBTh%2B9EEltP2HYO4VvnknPulQG7MDXUeMrGx7MrpA78%2FFUYG8H9xKNXoH2Xdm0C3AM0tUthP4NyFT7o6O6ypdMXqBpirQG2fw0quNj9HXJ3vxzdP14x%2BmOUmK1rhYXk1tGQnBdcUYI5papwp%2BmWRDwSyLYI%2FQxOpsD9L4aOcC%2FByNZc72hk55r%2BiBlS8vDX1%2FNTFXcLs4yknmuGpXEIY7Io5Hy1f1%2BDxxMQHG2WjWpJ%2FtoRykH2dQzzikM%2B1iJiO4h7uqZec7QTtZ8BsPjPBTZiZhRG6yWTyppd03YL2rKDXLo%2FxYvajFh48KKHStKPVQkdCiMc23dQ1wvwpU0BB%2BHbz%2BPCpe%2F7WU4jNx9IhZ%2B6y8nnuPRkRl2w88pk9lqNL703A1Rn0ViG3C3mUddofZtfVJD23ofSoS1EffqAswooex%2FAU67AFofUfjZ3J8XF7QBPMsIc2is6ZEk31h9X6NvoEnqqoNrp%2FL9r5X0642q7zJgyF1RaBJ%2FKkdg0wg%2B2LGqo8yvJIEU1wwtENZnduNRRxLB8NmQPHGFdPKVuIT2RulsuebBNo8p%2Bvzm2cBT4PLfbcsUUDUP37foh8zC9iEn0sghNGLJFZ1TBDw%2BS6dlPLg7unMNx8J9cfLszd3tZaJg1xyDCaOMo%2F4Y8nvocN6D5rXd6V%2BqeYqlzSHeb6AAzuYp%2BZ44nyugRU63%2BRep0xxQMcDwSSwCBoNoqwnHr9MBJ3cyhXa1TjJZPKln6JPV7oR%2FQ%3D%3D&X-Amz-Signature=37a4a454651fd29a07f290d039fa78b34dcccb522dfbaad7d3a1a77168650a91&X-Amz-SignedHeaders=host, 
withCredentials: False
}

response: <invalid>

status: 0

this is sent form the following code in our application:

this.uploader.onErrorItem = (item, response, status, headers) => {
      this.isLoading.next(false);
      this.loading.emit(this.isLoading.value);
      this.log.error('Error when trying to upload a file onErrorItem()', response, { item, response, status, headers });
    };

I don't know why onErrorItem is being called, is there an exception or something I can look into to see why onErrorItem has happened?