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.
Related
This is a runtime error, not a compile time error。
When I reference umd/react.development.js, the page is normal. However, when i change it to umd/react.production.min.js, I got error message
!! (dist\react.production.min.js, line:9, col:173) - ReferenceError: self is not defined
!! (dist\main.js, line:26, col:21) - ReferenceError: React is not defined
Because it is a UMD, the registration of react to global variables is done through self executing anonymous functions. I tried to change the statement of self to that in 'development. js', but it didn't work. The web still couldn't find the React
I tried react#16.1 #17 #18，
im sure react.*.js is inculded befor main.js,by console.log
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 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?
After a lot of research, and tinkering, I can't seem to actually get my Protractor test to do anything else other than have an Angular related error, even though I am using browser to avoid Angular being detected at all.
The test involves an Angular app, opening a dropdown in it, and clicking on the link for the console; the console opens a non-Angular admin page in a separate window.
So based on the many informative SO posts I found, I first used this...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
//expect for new window here
});
});
Which appeared to work, as I could get to the window through repl pretty easily.
The issue is when either of the following were added...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
One expect check the URL and the other checks for the header element on the page, which is a table header. When I run this, I get the following:
Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
When I decide to use browser.ignoreSynchronization = true, both in the function, or in a beforeEach, with or without a following afterEach setting it to false, I get the following:
JavascriptError: angular is not defined
I can't seem to get any "useful" errors to help me debug it, and trying it in repl does not help, as I get the same issue.
To be comprehensive, trying my URL expect without getting the second window will give me the root, and the other will fail.
Just doing one or the other will cause the same problem.
Changing to regular syntax (element(by.css...)) does not change things.
So much for my first question...
It appears that my use of browser.getLocationAbsUrl() is meant to be used for an Angular page, and was causing my issue...
Essentially, even though I believed I was using pure Webdriver calls, that call still required Angular on the page to work...
As stated in another post, the use of browser.driver.getCurrentUrl() is a non-Angular call using Webdriver, and fixed the problem. Thus, the final code is the following...
browser.sleep(1000); //to wait for the page to load
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.driver.getCurrentUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
This works without setting ignoreSynchronization, BTW.
I realized it would probably be something relatively simple to fix it, just didn't expect I'd get it that quickly (I intended on submitting the question last night, but posted it this morning instead).
In any case, I hope this will at least be a good reference for anyone else facing the same issue.
Seems like getLocationAbsUrl is angular abs url.
Try using the native driver getCurrentUrl instead.
-- expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
++ expect(browser.driver.getCurrentUrl() ...
When I write $http.get request, even if I provide an error handling function:
function Ctrl1($scope, $http){
$http.get('www.blahNonexistent.com/api').
success(
function(data){console.log("SUCCESS");}
).
error(
function(data){console.log("ERROR");}
)
}
AngularJs still outputs the error to the console:
Here is a minimal working example on JsFiddle.
Is there any way to prevent this behavior? (I don't want the use the think the site is broken, if one of the API endpoints is down)
That's a native error message and not an angularjs error, therefore I don't think you can "disable"/prevent it.
For example, if you add the following css to your fiddle, you will get the same GET error on the console:
div {
background-image: url("image.png");
}