I am using Embedly in React.js application to show URL preview in the page that has arrow navigation, and I am getting an error when switching page before embed content loaded.
The error message received is:
Uncaught TypeError: Cannot read property 'cards' of null
at n.done (platform.js:7)
at e.done (platform.js:8)
at e.each (platform.js:8)
at e.<anonymous> (platform.js:8)
at n.<anonymous> (platform.js:7)
at platform.js:7
at Array.forEach (<anonymous>)
at Object.e.each (platform.js:8)
at platform.js:7
at Array.forEach (<anonymous>)
Setting Chrome to pause on exceptions, and using its pretty print to make the code more easily readable, we see that the contentWindow property of parameter b is null, hence the error. However, this error is coming from the third party Platform.js, so I cannot amend that code myself to work around the issue there.
In order to recreate the issue, open this JS Fiddle. In the lower right pane you'll see the running example. Click the Next button several times very quickly, after a few attempts the error will appear in the console / Chrome will pause execution (if set to do so).
Question
Is there anything I can do in my own code to prevent this exception from occurring in platform.js?
Related
this undefined error is thrown by Azure B2C when i try to signup an existing user can i fix this issue somhow?
Workaround
To workaround this issue and display the correct error message, you can do the following:
If you haven't already, follow these steps to add a custom HTML template for the page.
If you haven't already, follow these steps to enable JavaScript in your custom template.
In the B2C authentication screens, open the browser dev tools and reproduce the error that causes "undefined" to be displayed. Then, locate the last network request and inspect the response JSON, noting the errorCode and message properties.
Add the following script to the bottom of your custom HTML template (inside the <body> tag), replacing the error code and message with the one from your devtools. If you like, you can also customise the error message.
<script type="text/javascript">
if (CONTENT) {
CONTENT['UserAccountNotFound'] = CONTENT['UserAccountNotFound'] ?? 'A user with the specified credential could not be found.'
}
</script>
Upload the updated HTML template, and the correct error message should not be displayed.
Explanation
It seems that undefined is being displayed due to Microsoft having a bug in the page's JavaScript. The variable u is initially set to the correct message, while f is set to the string 'undefined' as the errorCode is not found in the page's lookup dictionary. Then the next line contains u = f which results in the string 'undefined' being printed as the error.
To workaround this, we need lookupLanguage to return the correct string. To do this, we need to add items to the page's lookup dictionary, which helpfully is a global variable named CONTENT that can be easily modified in a custom script.
In the future, Microsoft will hopefully fix this bug so that the workaround will no longer be needed.
I have a project made with react and rest api(php+mysql).I have to put it through a codeceptjs test.The app is working properly with countless of manual testing, and as far as I can see, the codeceptjs test is working too, but it gives the following error:
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)I }) => {
I.amOnPage('/');
I.click('ADD');
I.seeElement('#product_form');
I.fillField('#sku', 'SKUTest000');
I.fillField('#name', 'NameTest000');
I.fillField('#price', '25');
I.waitForElement('#productType');
I.selectOption('#productType','DVD');
I.waitForElement('#size');
I.fillField('#size','200');
I.click('Save');
My add element looks like this:
<Link title="ADD" to="/add-product">ADD</Link>
Can someone please help me out why is this error appearing and how can I solve it? Thanks in advance!
Update:
I did a couple more tests, and I noticed that sometimes it gives back less/different errors depending on the test's time. For example:
http://165.227.98.170/open?testName=ed
http://165.227.98.170/open?testName=ah
http://165.227.98.170/open?testName=bc
My guess is that is has to do with how react loads in the html elements and manages the rest api calls. How/what should I change in the app to accomodate the test script?
Seems like the problem was I put the whole home page's load after the rest api call by accident.
I have started a new AngularJS project - and this time something strange is happening. Whenever I get an error in the browser's console, it references to the angular.js file. I don't know what's different with this app from all my others - maybe the AngularJS version (1.6.4). Or the fact that I'm using controllerAs syntax?
For example - if I try the following in my main controller:
vm.notdefined.somevalue = "this should give an error";
I don't get a console error with the line of code in my controller, but with a line in angular.js:
angular.js:14525 TypeError: Cannot set property 'somevalue' of undefined(…) ""
It would be ok for me if I could trace back the error from the stack trace - but also the stack trace does not contain any information on the position of the error in my project.
The error is thrown where it appears. vm.notdefined.somevalue is a part of ngControllerinstance. In the moment your controller get parsed the error is thrown. This happends inside AngularJS kernel logics. You could check the stack trace for debugging. It should lead you to your controller function. You could also use breakpoints on your code e.g. by using chrome debugger. All in all this will lead you to the origin of this error.
For more information about debugging please check this answer: How can I get more stacktrace in AngularJS
The error message is quite clear: vm.notdefined is undefined. Try:
vm = this;
vm.notdefined = {
somevalue: "this should give an error"
}
Shame on me - I missed to click on the three dots to expand the error message:
Not sure why I have to do this sometimes and other times I get the error stack in the immediate stack.
I have an angular app (using AngularAMD/RequireJS) and I'm converting the design to use angular-material. I have a toolbar directive that has md-icon using md-svg-src.
Trouble running the toolbar-directive_test.js file.
At first it kept complaining "Unresolve GET request images/icon.svg". I resolved in the test setup using:
$httpBackend.whenGET(/\.svg$/).respond('');
Now if I run that test file using fdescribe(...) all the tests pass.
But if I run all my app tests (without fdescribe on that toolbar test file), they are somehow failing because of the md-icons. The error I get, which appears on another test file:
TypeError: Cannot read property 'element' of undefined
The stack-trace does not give any guidance on what is causing it. Only mentions angular-mocks.js, and then exits around the any random assertion on this test file where the error is showing. And if I xdescribe this file which is showing the element of undefined error, the next test file is failing with this error instead.
If I use xdescribe on toolbar-directive_test.js file (the one which has the md-icon), all the tests pass.
And if I run all tests including the toolbar-directive_test.js file, but I remove all the md-icon instances from its template, again all the tests are passing.
I have tried including ngMaterial-mocks package in my tests, and that doesn't do anything. But in general, I'm not using that package (but I am using ngMocks).
Any suggestions on how to debug this?
As #Widget suggested, this works:
$httpBackend.whenGET(/\.svg$/).respond('<svg></svg>');
Where this didn't work:
$httpBackend.whenGET(/\.svg$/).respond('');
I have the following problem. I have two exactly the same list views, with directives inside (I use angularJS). One of them runs without any issues, however the other one throws the following error:
TypeError: Cannot read property 'scrollWidth' of null
at Object.ionic.views.Scroll.ionic.views.View.inherit.initialize.options.getContentWidth (ionic.bundle.js:4081)
at ionic.views.Scroll.ionic.views.View.inherit.resize (ionic.bundle.js:4835)
at ionic.views.Scroll.ionic.views.View.inherit.run (ionic.bundle.js:4147)
at ionic.bundle.js:39888
at ionic.bundle.js:21929
at completeOutstandingRequest (ionic.bundle.js:12022)
at ionic.bundle.js:12330ionic.bundle.js:17696 (anonymous function)ionic.bundle.js:14989 $getionic.bundle.js:21932 (anonymous function)ionic.bundle.js:12022 completeOutstandingRequestionic.bundle.js:12330 (anonymous function)
My code is pretty long, so I am not posting it yet - if there is need to do so, I will :)
HINT: I've tested the app on my phone, and it seems that I cant scroll on which the error occurs. Any suggestions?
Thanks
Ok, so I finally figured it out. I simply didnt have any div in my ion-scroll. :)