Is there any way to prevent alerts where the onError callback is fired?
I only need to capture the error and display it in a different way
Yes, simply override the showMessage option.
For example:
var uploader = new qq.FineUploader({
request: {
endpoint: 'my/endpoint'
},
callbacks: {
onError: function(fileId, filename, reason, maybeXhr) {
//do something with the error
}
},
showMessage: function(message) {
//either include an empty body, or some other code to display (error) messages
}
});
Related
I'm currently trying out react-query in my project.
I'm having trouble with handling errors within my mutation.
In my networks tab, I can confirm that the server is responding with code 400 or 500, which I assumed makes axios throw an error, thus firing the defined onError function.
However, the onSuccess function is always called no matter how the API call goes.
What am I missing here? Thanks in advance.
const { mutate } = useMutation(
['mutation'],
() => axios.patch(API_URL, params),
{
onSuccess: () => {
//this is always fired, even when response code is 400, 500, etc.
void queryClient.invalidateQueries('query');
},
onError: () => {
//should do something but never fired
},
}
);
A simple approach would be to manage the status code in the onSuccess callback.
It's a bug in the useMutation which I am also facing so I manage the status code in conditionals. But it should work not work in case of 500. There is a
flaw in your implementation then.
Make sure to return the result of your mutation function (i.e. the axios.patch call needs to be returned)
const { mutate } = useMutation(['mutation'], () => return axios.patch(API_URL, params),
{
onSuccess: () => {
//this is always fired, even when response code is 400, 500, etc.
void queryClient.invalidateQueries('query');
},
onError: () => {
//should do something but never fired
},
})
It might be because you're passing arguments in worng order.
In docs it says you should call it as follows:
useMutation(mutationFn, {
mutationKey,
onError,
onMutate,
onSettled,
onSuccess,
retry,
retryDelay,
useErrorBoundary,
meta,
});
Which makes your code as follows:
useMutation(
() => axios.patch(API_URL, params),
{
mutationKey: 'mutation',
onSuccess: () => {
//this is always fired, even when response code is 400, 500, etc.
void queryClient.invalidateQueries('query');
},
onError: () => {
//should do something but never fired
},
}
I want to be able to catch any error thrown on my screen. So far my code is this:
Ext.application({
errorHandler:function(err){
alert(err.msg);
return true;
},
requires: [
'Ext.ux.ajax.JsonSimlet',
'Ext.ux.ajax.SimManager'
],
views: [
'Admin.view.something',
'Admin.view.somethingController'
],
name: 'Admin',
launch : function() {Ext.create('Admin.view.something');
Ext.Error.notify = false;
Ext.Error.handle = this.errorHandler;
}
});
The problem is, I have some objects that may be undefined. If I do something like undefined.properties, the error handling doesn't catch it.
I know about functions like "Ext.isDefined()", but for this case I really need to handle all generic errors in the same way.
Ext.Error.handle only handles errors raised by Ext.raise according to the documentation.
A solution to handle plain javascript errors is the error event on the browsers window.
You can attach an handler with window.addEventListener('error', function(event) { ... }) to it.
The following code should catch all errors in your project.
launch : function() {
Ext.Error.notify = false;
Ext.Error.handle = this.errorHandler;
window.addEventListener('error', this.errorJsHandler);
Ext.create('Admin.view.something');
},
errorJsHandler: function(err) { // err = ErrorEvent Object https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent
alert(err.message);
return true; // prevent the firing of the default event handler
},
I´m using gridfs to store images in a mongoDB. I have an issue when I update images in the background and want to update them on the screen when finished uploading. I fire an event when I have an image document stored in my mongoDB and then I update the screen. It looks like the document is created while uploading the image because if I do it this way, my image is broken with a 503 error (service not available). When I refresh the page the image appears on the screen.
I believe the problem is that I try to get the image when it is still uploading. I would like to do a $.get(imagesURL) and catch the 503 error but I don't know how to do this. If I could catch the error I could do a loop and wait until its uploaded.
Maybe you guys also have better solutions or know how to catch a 503 error using jquery?
I use a normal file input field for the image
(part of my Template Event in meteorjs)
'change #avatarForm': function (event) {
FS.Utility.eachFile(event, function (file) {
Images.insert(file, function (err, fileObj) {
if (err) {
// handle error
} else {
// handle success depending what you need to do
var userId = Meteor.userId();
var imagesURL = {
"profile.image": "/cfs/files/images/" + fileObj._id
};
Meteor.users.update(userId, {$set: imagesURL});
function checkAvatar() {
$.get(imagesURL)
.complete(function () {
Session.set("registerAvatar", "/cfs/files/images/" + fileObj._id);
}).onerror(function () {
console.log("but still uploading");
checkAvatar();
});
console.log("image saved!");
}
checkAvatar();
}
});
});
},
my code should only fire the new image on the screen (url is set as SessionVar) when the image is completed but its not working.
this is my exact error
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Something like this should work. The pattern is to set a template helper with a reactive data source - in this case, Meteor.user(). When Meteor.user() changes, the template helper will render out the new data without you having to fetch any data manually:
<template name="test">
<div>Profile Image:</div>
{{#if profileImage}}
<div><img src="{{profileImage}}"></div>
{{/if}}
</template>
Template.test.events({
'change #avatarForm': function(event) {
FS.Utility.eachFile(event, function(file) {
Images.insert(file, function(err, fileObj) {
if (err) {
// handle error
} else {
// handle success depending what you need to do
var userId = Meteor.userId();
var profileImage = {
"profile.image.url": fileObj.url(),
"profile.image.id": fileObj._id
};
Meteor.users.update(userId, {
$set: profileImage
});
}
});
});
},
});
Template.test.helpers({
profileImage: function () {
return Meteor.user().profile.image.url;
}
});
This one is wired.
This fires from a grid toolbar button click:
// fires when the client hits the add attachment button.
onAddAttachmentClick: function () {
var uploadAttachmentsWindow = new Nipendo.ProformaInvoice.Attachment.UploadWindow({
invoice: this.invoice,
maxFileSizeInMB: this.maxFileSizeInMB
});
uploadAttachmentsWindow.on('uploadcomplete', function (win, message) {
if (message.msg !== 'success') {
return;
}
win.close();
var store = this.getStore();
store.setBaseParam('useCache', false);
store.load();
this.fireEvent(
'attachmentuploaded',
this.invoice.ProformaInvoiceNumber,
this.invoice.VendorSiteID,
this.invoice.CustomerSiteID);
}, this);
uploadAttachmentsWindow.show();
} // eo onAddAttachmentClick
This is what happens on the uploadcomplete event:
this.uploadBtn.on('click', function () {
var form = this.uploadForm.getForm();
if (!form.isValid()) {
return;
}
form.submit({
url: 'XXX.ashx',
waitMsg: Nipendo.Localization.UploadingAttachment,
scope: this,
success: function (form, action) {
this.fireEvent('uploadcomplete', this, {
msg: 'success',
response: action.response
});
},
failure: function (form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
this.fireEvent('uploadcomplete', this, {
msg: 'Form fields may not be submitted with invalid values'
});
break;
case Ext.form.Action.CONNECT_FAILURE:
this.fireEvent('uploadcomplete', this, {
msg: 'Ajax communication failed'
});
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert(action.result.title, action.result.message);
this.fireEvent('uploadcomplete', this, {
msg: action.result.message
});
break;
}
}
});
}, this);
On IE 8 I am getting this error in the debugger:
I have no idea what object is missing... from my check they are all defined.
Any idea anyone?
Notice that I have an event firing from a listener (I am suspecting it to be the root of the problem).
It is hard to see but the error occuers in ext-all.js in the fire method.
I have found the answer in : https://stackoverflow.com/a/3584887/395890
Problem was I was listing to events is 2 different windows, that is not possible in Ext.
What I have done to solv it was to call the opner window from the pop up window to notify about changes.
This is a piece of an existing dojo based project
nps.makeRequest = function(args) {
//add some default params
return dojo.xhr("POST", args, true); // dojo/_base/Deferred
};
The issue is if the respose has an error message(text message) it is displayed properly.
if the response is say 404 and if there is a custom error page served , it will display the HTML source code of 404 page instead of interpreting it.
how to handle the error here?
You can either do
args = {
url: 'http://...',
error: function() { /* this handles error*/ }
};
nps.makeRequest(args);
Or you can use the deferred:
nps.makeRequest({url: 'foo'}).then(function() { /* this handles happy flow*/ }, function() { /* this handles error*/ });