We're having strange, sporadic JavaScript error messages in our production log files (JavaScript errors are logged in the backend):
Uncaught Error: [$compile:tpload] http://errors.angularjs.org/1.2.16/$compile/tpload?p0=modules%2Fsome%2valid-directive-path.tpl.html
The error occurs only with directives. I'm not able to reproduce the errors locally. The templateUrl for the directives are all valid.
The only possible scenario that came to my mind was if the user presses the cancel/stop button in the browser while the page is loading (then i'm able to reproduce the error).
Does anyone have another idea or explanation? Or even a solution :-)
Cheers
Michael
We resolved the issue like this:
Since we are caching our HTML templates with $templateCache using the grunt ngTemplate plugin (https://www.npmjs.com/package/grunt-angular-templates) we do not have the above issues anymore.
Out of interest I was able to recreate this issue. By adding logging to angular I established that when the template load fails it does so with a status of 0 which made me think that the request was actually cancelled. This theory was backed up by the fact that we see no server side errors.
If I emulate a device that cannot support html5 routing and then add an arbitrary query string to the end of the route, it causes an infinite digest loop and in the end the whole page reloads a few times. This in turn was causing the outstanding template requests to be cancelled leading to exactly the errors I was seeing in the logs.
So, for me at least, this is really nothing to do with the loading of the templates, it's just an angular bug (which hopefully is going to be fixed in angular 1.3.8)
Related
I'm trying to add a redirect on my site for anyone using IE 11. I'm using ES6 and some packages that just don't play well with IE.
I think it's related to some package updates, but previous code I had to load a simple message saying to use another browser was functioning.
I now get an error saying there is a syntax error in bundle.js, and the screen is blank. What surprises me is that it's loading the bundle at all. When I debug, I can see its injecting <script defer src="/static/js/bundle.js" And I think it's the page trying to load this first and erroring out that is causing my issue.
Is there any way to stop this injection? Anyone experienced with React and IE 11 that thinks this might be a red herring and I'm going in the wrong direction to fix this?
Any thoughts are appreciated.
I tried removing almost all my code out of index.html and would have expected that the page would ReactDOM.render a really simple message. It does not. It seems to error out before it really renders anything at all.
I'm getting the following Content Security Policy error in chrome when running my React app. I tried googling this for a long time, but I couldn't find enough information about how to fix this when using create-react-app. I would appreciate any help very much.
After a bit search about your issue, I ended up here in MDN. I will shortly define what the problem is but for more information I strongly suggest you read the provided link.
So what is happening here exactly?
This is because the website is configured to use Content Security Policy(CSP) to protect against someone maliciously loading code from a third party. The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.
How to solve this then?
According to the MDN link that I provided, we should solve this by adding the following meta tag to our index.html.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com">
NOTE: *.trusted.com should be the trusted site or list of them.
Then what should it happen on your own localhost?
I have faced several issues like yours and then found out when this error has shown up on your console, this is not necessarily showing you have this exact problem on your project, and the other problems in your main code could cause such an error. I just found some similar issues that will share below:
Same issue on angular
Same issue on ionic
Same issue on react
and so on
So what you have to do?
First of all, please check all your existing codes and paths in your project and make sure there are no errors in neither of them. When you get rid of all your errors this should be gone as usual, but if the problem insists to exist please make sure to disable all your extensions in your browser (you can safely test it on incognito without disabling anything) and then run the project and see if the error is gone or not.
So there is two-step at all to get rid of that:
Get rid of all your project and pathing errors
Make sure all your extensions are disabled
i have little problem with my code:
https://github.com/burnpiro/angular-blog
live version is available on http://erdem.pl/#/
Problem is that after deploying it on my server routing doesn't work. ui-router not even trying to load template or controller into ui-view. Application starts and configs are fired (tried with console.log). Even resolve option in home state is fired (PostService). But somehow it cannot load template. If i access template manually:
erdem.pl/components/home/home.html
it is there. The same with controller. If anyone have any ideas please let me know. It happened after deploy. Before that on my local machine it seems to work fine but now after getting project again and deploying it on my local it has the same error.
There is no JS errors or any network errors.
Thanks for help,
I'm not completely sure, but I think the issue is with the host you've set in your config.js file? This should be pointed to the public link for wherever your api lives. Should it be "http://erdem.pl"?
I've also noticed that Restangular doesn't seem to be sending your requests. I see that the execution gets into the RequestInterceptor, but I don't see them in the Network tab of my developer tools. This means that your promises from your resolve properties on your states will never be resolved. Your states are configured to wait for these resolve requests to resolve before initializing the controller and loading the template.
EDIT: I think I found the issue!
Looks like Restangular is only compatible with Lodash 3.10, anything after that causes compatibility issues. Downgrade to 3.10 and hopefully it works for you!
I'm using the decorator to change the $exceptionHandler behavior, sending logs to the server. My problem with this is that the stackatrace of the exceptions seems useless, showing only part of the stack. For example:
Syntax Error: Token 'undefined' not a primary expression at column NaN
of the expression [expression here].
at Error (native)
at throwError (http://localhost:8080/angular/angular.js:6674:62)
at primary (http://localhost:8080/angular/angular.js:6918:9)
at unary (http://localhost:8080/angular/angular.js:6900:14)
at multiplicative (http://localhost:8080/angular/angular.js:6883:16)
at additive (http://localhost:8080/angular/angular.js:6874:16)
at relational (http://localhost:8080/angular/angular.js:6865:16)
at equality (http://localhost:8080/angular/angular.js:6856:16)
at logicalAND (http://localhost:8080/angular/angular.js:6847:16)
at logicalOR (http://localhost:8080/angular/angular.js:6839:41)
Is there some way to configure AngularJS to show more stacks? If I look at Chrome console, I can see more stack, and get the filename, but not in the exception handler.
Even if I change the Error limit I cannot see the original file:
Error.stackTraceLimit = Infinity;
1 Use a debugger, instead of Chrome console
Google Chrome provides a debugger that helps JS programmers to find bugs and problematic code.
As the complexity of JavaScript applications increase, developers need
powerful debugging tools to help quickly discover the cause of a
issue and fix it efficiently. The Chrome DevTools include several
useful tools to help make debugging JavaScript less painful.
You can try putting some breakpoints wherever you want (try to detect the problematic lines/ methods).
See the official documentation here: Google Chrome Debugger
2 Use a browser extension
Many plugins like ng-inspector or AngularJS Batarang helps you to print the status of your AngularJS program (controller instances, variable names/values, and scopes).
3 Use $log service (console.log wrapper)
The AngularJS $log service provides a simple resource to print the status of your variables in the browser console (if present).
Simple service for logging. Default implementation safely writes the
message into the browser's console (if present).
The main purpose of this service is to simplify debugging and
troubleshooting.
The default is to log debug messages. You can use
ng.$logProvider#debugEnabled to change this. AngularJS $log service
helps you to debug your program.
From my point of view, a good AngularJS debug includes the combination of all the above solutions.
I hope it is useful for you.
From the /posts/edit-view I'm submitting a form to the action addCategory in my Post controller.
The action does all the work it has to do, and subsequently calls $this->redirect($this->referer());.
At first sight my app works fine, but I encountered some hickups when moving to a production server. Monitoring the calls in Firebug I see that the action acually returns a 302 Found but the 'Response' is Failed to load source for: http://localhost/xps/posts/addCategory.
This happens on both dev en production servers, only on the production server it makes the redirect flow fail. On both servers the controller actions are executed well: category is added.
Removing all the code in the action results in the same failure. Removing the redirect removes the failure, but that's not getting me anywhere.
A second (though maybe irrelevant) irregularity is that the submit method of the form is identified as PUT in Firebug although I explicitly set it to POST in Cake.
I recently switched from CakePHP 1.3.4 to 1.3.6, but reversing does not change the behavior
I use the RequestHandler, Session and Auth components and call parent::beforeFilter() in beforeFilter().
I also found the following thread http://cakephp.1045679.n5.nabble.com/puzzle-over-activity-td1260972.html It suggests to remove $this->Auth->authorize = 'controller'; but I don't have that stated anywhere anyway.
Does anyone have an idea where to look next?
Just a guess, but if you are using Security component, it might cause problems. Also, sometimes when using the ajax and sessions it can cause problems. Maybe if the page requires sessions, you could try it without sessions and see if it works.
Ok, I found it.
The Failed to load source is still there but is not the cause of failure.
In one of my Behaviors I had a space after ?> which messed up the headers, which made me look into the wrong detail.