I am trying to decide what to do to handle errors in my chat application using Socket.io and react. I can successfully get a 'connect_error' error so I can do something inside the socket.on('connect_error', ()=> //Do something) but I am having trouble getting any other type of error. I can't think of a scenario where I can modify the app or do something specific to trigger the socket.on('error', ()=> //Do something). Does anybody have an idea?
The 'error' event is not a specific one. It's by design, so ANY error event will trigger it. What you can do is console.log it.
So now, anytime you'll be able trigger any error (Which is what you want) you'll see its description, then you can google it and then write a more specific code to handle it.
If you can't trigger any errors no matter what you do, it's not a bad thing since it means things works correctly.
socket.on('error', (error) => {
console.log(error);
});
Related
sometimes this error gets thrown and it blocks the gestures :
315[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
The docs mention this: https://use-gesture.netlify.app/docs/faq/#why-am-i-getting-warnings-from-preventdefault-after-i-pass-passivefalse
The lib does internal checks whether events are cancelable, but there’s no way it could prevent the user from
performing its own logic.
verify if you are using something to prevent some action to happen like:
event.preventDefault();
and make some verification first
if (event.cancelable) event.preventDefault();
My Twilio React-Video Application works fine for both Local and Remote Participants over Web(and Mobile Browser)
When I try to connect to the same "Room" and all the necessary details from Twilio Android-SDK-Flutter plugin,I get this Error
track.attach() is not a function
componentDidMount() {
const { track } = this.props;
track.attach(this.media.current);
}
// Error : track.attach() is not a function
I am able to console.log( ) the Remote Participant who joins the room but I am unable to view the Remote Participant.
In Mobile Application,it is working fine and "both" the participants are visible.
Twilio developer evangelist here.
The normal cause for something like this is that you are using participant.tracks to get the tracks. However, participant.tracks is actually a Map of <Track.SID, TrackPublication> and a TrackPublication does not have an attach method.
Instead, you should check if the TrackPublication#isSubscribed. If it is, you can then use trackPublication.track.attach. If the track is not yet subscribed you should listen for the "subscribed" event which tells you that the track is now available.
You likely don't want to render the component that is trying to attach the track until the track is subscribed.
Let me know if that helps at all.
I would like to have a two part submit strategy for my redux-form. First, the user called submit on the form which calls a validation method. The response might have some warnings. I want the user to see the warnings, if any, and optionally continue with another submit that will be a real POST to the server rest api.
If there are no warnings, I would like the component to submit automatically. I am trying to kick this off from the componentWillReceiveProps method.
The problem is that nextProps.handleSubmit(this.doSubmit2of2); does not call this.doSubmit2of2. Execution just steps over that call.
componentWillReceiveProps(nextProps) {
//boolean that indicates validation just occured against the server
if (nextProps.storeWithValidation) {
//the user hit submit, first it was validated, if no issues, go ahead and try to create
if (nextProps.storeValidationOk) {
//fire off create store
nextProps.handleSubmit(this.doSubmit2of2);
}
else {
//there are validation issues of some kind, let the user see them
//do nothing here and let the render method do its thing with the props
}
}
}
I have found the discussion here: https://github.com/erikras/redux-form/issues/67, but in my case the submit is happening as result of a particular server response. Also, I realize that there are validation features of redux-form. Am I designing too far outside of the intended framework convention?
Also, I have thought of redesigning my server api, but I would like to know how far I can go with this current approach of automatically resubmitting after a response from the server.
From what I understand you want to submit the form remotely after a response from the server. You can create a remote submit following this example from the docs. Then you can dispatch(submit('yourFormName')) whenever you want to as many times as you want to.
I'm trying to figure out the best way to hide/show the loading indicator when I'm doing a request.
I have a:
LoadingAction to emmit an event to show/hide the loading indicator.
LoadingStore to hold the loading information (show/hide).
loading.jsx: the loading indicator component.
I tried different things to do that in the "flux way":
good: call a LoadingAction.showLoading() before the request and LoadingAction.hideLoading() when the response arrives.
bad: call a LoadingAction.showLoading() in each view that call an action (that made a request) and LoadingAction.hideLoading() when my callback is called from the Store.
ugly: I tried to change the LoadingStore directly with a setter method (what is not the right solution...) when I made the request and receive the response.
But, except for the last try (the "ugly"), I always receive the error dispatch in the middle of a dispatch.
I'm aware that what this means but I can't think in another strategy.
I don't want to use setTimeout function to resolve this problem. This is not the right solution.
Thanks!
After some time, we end up with the solution described here. The approach was very different than my original idea: each component take cares about the loading, like this:
render: function(){
// while loading
if (!this.state.data){
return <Loader/>
}
// loaded, you can use this.state.data here
return <div>...</div>
}
But, we have problems when an API return an error. How the component can remove the <Loader /> in this case?
Well, each component with need to register and listen (we use Flux) the dispatch from our promise based HTTP client (Axios). Like this:
componentDidMount: function(){
LoaderStore.addChangeListenerEsconderLoading(this.stopLoading);
},
componentWillUnmount:function(){
LoaderStore.removeChangeListenerEsconderLoading(this.stopLoading);
},
And this (using Axios):
request(options)
.then(function(response){
success && success(response.data);
})
.catch(function (error) {
LoaderAction.hideLoading();
}
I use react + react-router + redux. I would like to create a global thing for handling all the errors thrown in the app. Is it possible to catch also API call errors and 401 statuses?
I thoung about something like this in Root.jsx:
window.addEventListener("error", (e) => {});
It works for critical errors which I can log. But what if I want to serve some API errors?
For example: I want to save some grid data, but server thrown an error that 3 of 10 given rows weren't saved (I know it's a common problem and it should be resolved using transactions, but I use Mongo here :P). Now I want to show a simple dialog for a user which displays error message and 3 rows that weren't saved. What if I don't have permissions and the server throws 401 status code? Probably I would like to redirect user to index or login page.
This is some hipothetical example, because I want to simplify the thing I'm currently implementing.
I'm new in React, so I don't know the solutions for now, but if I programmed same thing in Angular, I would use Angular's HTTP Interceptors to solve my problem. I guess I need something similar here (or maybe it's some common solution for this?).
[EDIT]
Hmm. It seems I have found something that solves my problem: fetch-intercept
Anyway, do you know other solutions?
I'm assuming you're using ajax calls to access your API;
I would create a simple ajax wrapper that looks something like this;
AjaxWrapper = function(options){
return $.ajax($.extend({}, options, {
error: function (jqXHR, textStatus, errorThrown){
if(jqXHR.status === 401){
browserHistory.push('/unauthorized_route_handler');
}
options.error(jqXHR, textStatus, errorThrown);
}
}))
}
Then you can simply use this wrapper to call your api, passing in an options object as you normally would to $.ajax. Update the section within the jqXHR === 401 as needed, or add handlers for 403 & 500 as well.