Using react native, getting a Possible Unhandled Promise Rejection error when using a firebase.Promise (https://firebase.google.com/docs/reference/js/firebase.Promise) in a redux action thunk (https://redux.js.org/advanced/asyncactions#actions-js-asynchronous), eg.
....
console.log(`Reuthenticating for user ${user.displayName}, ${user.email}`)
credentials = 'intentionally bad credential type'
user.reauthenticateAndRetrieveDataWithCredential(credentials)
.then(
(res) => {console.log(`Reauth complete: ${res}`)},
(error) => {console.log(`Something bad happend ${error}`)})
....
(authenticating as recommended here (https://firebase.google.com/docs/auth/web/manage-users#re-authenticate_a_user) via reauthenticateAndRetrieveDataWithCredential (https://firebase.google.com/docs/reference/js/firebase.User#reauthenticateAndRetrieveDataWithCredential)) produces the message
[18:45:12] Reuthenticating for user me, me#gmail.com
[18:45:14] Possible Unhandled Promise Rejection (id: 0):
[18:45:14] [Error: reauthenticateAndRetrieveDataWithCredential failed: First argument "credential" must be a valid credential.]
without printing the console.log() message (which indicates to me that this is not just a warning, but an actual error). Even though I am providing an onReject callback to .then() (https://firebase.google.com/docs/reference/js/firebase.Promise#then).
Some other SO posts suggest appending a .catch() to the promise (rather then providing an on onReject fallback callback in the promise's .then() like I do), but since am using a thunk action here, this is not recommended (see https://github.com/facebook/react/issues/6895#issuecomment-281405036). Anyone know what could be happening here or some steps to debug further?
Related
I started working with Vuex 2 weeks ago and I realized that Vuex is very good to handle the state of the app. But, it is difficult to handle the error of API calls. When I get data from the server, I dispatch an action. When data is successfully returned, of course, everything is fine. But when an error happens, I change state, I don't know how to detect it through the state from Vuejs components to notify to the user. Could anyone give me some advice?
I typically have the following parts:
A component for displaying the notification, typically an alert or a snackbar or similar, e.g. error-notification. I use this component on a high level, directly below the root app component. This depends on your layout.
A property in vuex indicating the error state, typically an error object w/ error code & message, e.g. error
One mutation in the store for raising an error setting the error property, e.g. raiseError
One mutation in the store for dismissing an error clearing the error property, e.g. dismissError
Using these, you need to:
Display error-notification based on the error in the store: <error-notification v-if="$store.state.error :error="$store.state.error"/>
When an error occurs, call raiseError mutation (in your API callback): vm.$store.commit('raiseError', { code: 'ERR_FOO', msg: 'A foo error ocurred'})
In error-notification, call the dismissError mutation when the notification is closed.
You can also return a promise in your action so that if you call it from component you can catch the error there and display a notification as needed:
in your store:
//action
const fetch = (context) => {
return api.fetchTodos() //api here returns a promise. You can also do new Promise(...)
.then((response) => {
context.commit('SET_TODOS', response);
})
};
in vue component:
this.$store.dispatch('todos/fetch', modifiedTodo)
.catch(error => {
//show notification
})
I am trying to send the verification code received by the user to confirm the signIn, I have the SMS_MFA enabled. However, I keep getting this error Unknown error, the response body from fetch is: undefined and thats all I get, there is nothing else to help me understand what the error is about. And everything else is working fine, I call signIn, signUp, confirmSignUp and resendSignUp, they all work fine. The problem is only with confirmSignIn and I have no idea what it could be, I already researched online, but had no success. Another strange thing that happens, when I enter the wrong code, it shows me the 'CodeMismatchException', but it fails with 'Unknown error' when code is the right one. PS: I already have cognito configured to work with SMS MFA
I'am having this problem in android and iOS. React native version 0.55.4 and aws-amplify version ^1.0.11
I have a file where a call all the Auth functions and export them
export const confirmSignIn = (cognitoUser, code) => Auth.confirmSignIn(cognitoUser, code, 'SMS_MFA');
Then I call that confirmSignIn function from a different file
confirmSignIn(cognitoUser, code).then((userSession) => {
console.log(userSession);
}).catch((error) => {
switch (error.name) {
case 'CodeMismatchException':
this.codeInput.clear();
break;
default:
console.log(error);
break;
}
});
I already tried upgrading aws-amplify version, but it didn't work, tried to do it with cognitoUser.sendMFACode() but didn't work either. I just keep getting Unknown error, the response body from fetch is: undefined
I also opened an issue in the aws-amplify repo.
I have not been able to get the url during the test runs intermittently.
Let me give you the background: On clicking of a button on a page it navigates to the next page. Upon navigation first thing I would like to validate the url during my test.
Below is the snippet of code I have been using to fetch the url from the current page.
1. Native implementation of nightwatch for the url assertion
assertUrlContains(text) {
this.assert.urlContains(text);
return this;
}
2. Also, tried to fetch the url using the api.url with promise pattern.
getCurrentUrl() {
return new Promise((resolve) => {
this.api.url((result) => {
resolve(result.value);
});
});
}
Both of the approach have same issues and below is the stacktrace of the error:
SEARCH RESULTS URL: null
(node:12375) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Cannot read property 'indexOf' of null
(node:12375) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✖ TypeError: Cannot read property 'indexOf' of null
Something strange I've noticed that the browser navigate to the target page but the nightwatch unable to get the url even though the page load event completes.
You may add an explicit wait condition after you click the button to ensure that the required page has successfully loaded. You may then use one of the following approaches to validate the URL:
Use the urlEquals API for nightwatch documented here: http://nightwatchjs.org/api#assert-urlEquals
You could execute a javascript command through your test script: window.location.href to retrieve the url of the window and save it as a string. You may then perform the assertion on this string
I am running Vue.js and have a component running on my page. The component works just fine in Chrome, Firefox etc, but in IE11 it is throwing the following error
Unhandled promise rejection SyntaxError: Invalid character
"Unhandled promise rejection"
{
[functions]: ,
__proto__: { },
description: "Invalid character",
message: "Invalid character",
name: "SyntaxError",
number: -2146827274,
stack: "SyntaxError: Invalid character
at Anonymous function (http://mydomain/js/app.js:6:21534)
at a (http://mydomain/js/app.js:7:5220)
at Anonymous function (http://mydomain/js/app.js:7:5344)
at c (http://mydomain/js/app.js:1:22805)"
}
This isn't telling me much and searching google has not helped. Does anyone know what the problem might be?
Thanks
I think your issue is that IE doesn't support promises. Any JS code that relies on using them, like
axios.get('some/url/')
.then(response => (this.dataThing = response.data));
... is going to fail. You can use polyfills to translate this into something that IE11 understands, but I am unclear on how to implement them.
I am running redux on node. To handle asynchronous actions, like reading a file or listing of a directory, I am using redux-thunk in combination with Promises. So a typical action can look like that:
const
fs = require('fs'),
{ promisify } = require('util'),
readdir = promisify(fs.readdir);
const listFiles = dir => dispatch =>
readdir(dir)
.then(files => dispatch({
type: '…',
payload: { files }
}));
So:
try {
store.dispatch(listFiles('/some/path'));
catch (error) {
//some rescue plan here,
//won't work if directory not exists
}
wont work here, because the action is asynchronous and right now, the only way I see to handle all errors is to add a .catch() to all promises in all actions and dispatch an error action there.
That has two downsides:
a lot of code repetition and
i need to know all possible errors in ahead.
So my question is: Is there any way to create a global error handler, which will also be called if an asynchronous action fails, such that I can add some error indicating information to the state, which can be displayed?
Could that be possible with a »storeEnhancer« or some »middleware«?
UPDATE
I could find something that is really helpful:
process.on('unhandledRejection', (reason, promise) => {
console.log(reason.message);
});
That callback is triggered whenever a Promise is rejected and no catch block is added. Right now that seams to do the trick, but anyway, I would prefer a solution that basically does the exact same thing, but only for rejected Promises which are triggered within store.dispatch(), so only when an error within the processing of actions/middleware/reducers within redux comes to happen.
If you're looking for a redux middleware solution, take a look at redux-catch.