Vue.js error in IE11 - vue.js

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.

Related

Unit Test with Jest gives TypeError: File.test.js: Cannot read property 'toString' of undefined

I have been working in React Native using Expo CLI and recently started to face issue with my Unit tests that got failed because of one common reason. Stack trace is below
Cannot read property 'toString' of undefined
at Converter.toBase64 (node_modules/convert-source-map/index.js:61:46)
at Converter.toComment (node_modules/convert-source-map/index.js:65:21)
at generateCode (node_modules/#babel/core/lib/transformation/file/generate.js:78:76)
at run (node_modules/#babel/core/lib/transformation/index.js:55:33)
at run.next (<anonymous>)
at transform (node_modules/#babel/core/lib/transform.js:27:41)
at transform.next (<anonymous>)
at evaluateSync (node_modules/gensync/index.js:244:28)
at sync (node_modules/gensync/index.js:84:14)
My node version is node:12.18.4.I wonder what caused these errors since everything was working perfectly. On my local system they are working fine, occasionally but CI process tends to fail them randomly which hinders the overall code coverage figures.
Unit test I am trying to run is very simple as written below
it('Renders Strings as expected', () => {
expect(received).toStrictEqual(expected)
})
For those of you who are still wandering around to find answer to above question.
Issue was in the library itself convert-source-map which needed to handle this exception.
I forked the actual repository and handled that exception in line 64 toBase64 method. Now the method looks like something
Converter.prototype.toBase64 = function () {
var json = this.toJSON();
return (SafeBuffer.Buffer.from(json, 'utf8') || "").toString('base64');
};
Now everything is working fine.
Original method was something like this
Converter.prototype.toBase64 = function () {
var json = this.toJSON();
return SafeBuffer.Buffer.from(json, 'utf8').toString('base64');
};

"Unknown error, the response body from fetch is: undefined" at Auth.confirmSignIn

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.

Unable to access the url of a page in NightwatchJS

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

React native thunk "Possible unhandled promise" error despite providing onReject callback?

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?

VueJS 2 does not report any errors (Sentry.io)

I have a Laravel (5.4) application with VueJs2 (2.1.10). I am using Sentry.io as error reporting for our Backend which works fine. When an error occurred from VueJs I am unable to catch it nor send it to Sentry.
Here is the documentation which I used to install Sentry through NPM according to the Raven settings: https://docs.sentry.io/clients/javascript/integrations/vue/
My config in app.js is the following:
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven
.config('https://[filtered]#sentry.io/[filtered]')
.addPlugin(RavenVue, Vue)
.install();
Building the code works fine through webpack. The question I would like to get some help with is why Vuejs is not reporting any errors to Sentry?
I have tried to force a couple of errors including non existing template variables, http error responses, incorrect component declaration, syntax errors. All those errors do result in console errors but non are send to Sentry.
Any suggestions on where to start or what to do to get error reporting to work with Sentry and Vuejs2? Thanks in advance!
I just started with Sentry as well and have the same problem.
The only workaround I found so far is to include Raven in every single component and to call Raven explicitely when an error occurs (plus your code for app/main.js):
MyComponent.vue
<template>
Click me
</template>
<script>
import Raven from 'raven-js'
export default {
name: 'MyComponent',
data () {
return {
loggedIn: false
}
}
methods: {
createError () {
try {
if (!this.loggedIn) throw new Error('User not logged in')
console.log('User is logged in')
} catch (error) {
Raven.captureException(error)
}
}
}
}
</script>
<style scoped>
</style>
This may be caused by your javascript file is not the same origin with your html file. In this condition, all the javascript errors are caught as 'Script Error', 'Script Error' is sometimes also called a cross-origin error. And sentry discard javascript error /^Script error\.?$/ and /^Javascript error: Script error\.? on line 0$/.
Below is the sentry relative code
// "Script error." is hard coded into browsers for errors that it can't read.
// this is the result of a script being pulled in from an external domain and CORS.
globalOptions.ignoreErrors.push(/^Script error\.?$/);
globalOptions.ignoreErrors.push(/^Javascript error: Script error\.? on line 0$/);
Another Conditon:
you may use vue-cli-service, which default use webpack devtool:eval configuration, this cause chrome bugs: https://bugs.chromium.org/p/chromium/issues/detail?id=765909
Try this
main.js
Import VueRaven, { Raven } from 'vue-raven'
Vue.use(VueRaven, {
dsn:'yourdsn'
}