I am getting this error on sentry. I don't know how or why the next/router is redirecting users to the same page, it is happening on some browsers, and on some browsers, it is working just fine.
Tags
{
"routing.instrumentation": "next-router"
}
Operation - pageLoad
It looks like this has to do specifically with the Vivo OEM browser.
The current Vivo is based on Chrome 87 (2020).
I ended up on some Chinese dev blogs etc detailing similar errors with the same message.
Those seem to have been due to Vivo not handling new ES6 features. Not certain exactly what is not supported in the current version that's causing this.
We're looking at adding filtering around the <anonymous> file in the stack trace since (as far as I can tell) that's always 3rd party scripts throwing up.
Related
I have an angular app that I would like to force users to view in "portrait" mode even when rotated in mobile browsers. I'm attempting to use the screen.orientation API, but I'm getting the error:
"Uncaught (in promise) DOMException: screen.orientation.lock() is not available on this device."
The short version of code that I've used in trying to debug in the console is:
screen.orientation.lock("portrait")
This returns the error provided above. I have tried this on both MS Edge version 107.0 and modern versions of chrome, on different machines and devices and all yield the same result. In looking through other articles all are old posts and point to use this API, which seems as if this is no longer supported by modern browsers.
Is there another way to do this, or would I need to use CSS to render the page differently when detecting a change state of the orientation?
I have deployed my React PWA on AWS Amplify. Works perfectly on the Chrome Desktop browser on localhost as well as when deployed to AWS Amplify. Unfortunately though, on Safari Desktop as well as on Chrome and Safari on my iPhone, I always only get a blank page. Important to know: I am using basic auth.
I have looked into the Safari web developer tools on my iPhone and I can see in the console that I get a 401 error on loading manifest.json. This error does not show up on Chrome on Desktop and here the app works flawlessly as described above.
What could be the cause here?
I have already tried the following:
Playing around with all possible rewrite rules in AWS Amplify. Currently I use the rule </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> --> index.html (200)
Setting attribute homepage in my package.json either to "." or also to the base url of where my AWS amplify deployment lands
Adding the attribute crossorigin="use-credentials" to the reference of manifest.json in the index.html page (<link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials" />)
After reading all possible posts on stackoverflow and anywhere else in the web, I am stuck. Can somebody maybe give me another idea to try out?
Thanks a lot and best regards
EDIT 1: I am trying to use Bluetooth on that React app. What I now also figured out is that I also get an error message Invariant Violation: This device is not capable of using Bluetooth - could that be the reason for the white screen?
OK, for all who might stumble above the same issue in the future - the problem was the Bluetooth connection I was trying to build up. I had not paid enough attention to the console warning Invariant Violation: This device is not capable of using Bluetooth cause I had thought this could not cause the problem. But it did. After removing the Bluetooth capability, the app renders as expected on all browsers no matter if Desktop or mobile device. Now I have another issue finding out how to somehow get around this Bluetooth issue but that's another topic. This question here can be closed / marked solved.
I have a create-react-app build being served by flask. It works fine in other browsers; however on Firefox, when I do a reload, the main.js file is stuck at the fetch method. After 3 minutes, it timesout then renders what it suppose to. I am looking for guidance on where to look from hereon. The production server does not log that the endpoint is receiving the fetch request; however, once the 3 minutes is up, the client side renders the updated information (as if it hit the server side). Everything looks like it should be working in the code I wrote, but I am not able scope out where I should be looking in debugging this issue.
Note: I am giving a broad description of the problem at the moment, but will disclose specifics such as codes, logs, and others items once I am able to get some guidance of the matter. As of now, there are no resources pointing out this specific issue, thus displaying code will simply be a "garbage" dump.
After working on the problem for quite some time, we found these two articles to be very helpful:
https://www.andreasreiterer.at/fix-whitescreen-static-react-app/
https://blog.miguelgrinberg.com/post/how-to-deploy-a-react--flask-project
After testing different sources, we first found that article one's suggestion of changing the homepage to the base url worked. After realizing that the nginx was getting confused on which static files to server, we proceeded to follow article 2's steps.
We did not have any issues on other browsers, but only on firefox. I hope this will help those that are experiencing the same Firefox issue.
I experienced an strange error in angularjs when I use .htaccess (AuthType Basic) within chromium.
If I access the page 'in an normal way' the user and password promt get shown from the browser. If I enter them angularjs (and the rest of the page) is working perfectly fine!
But when I access the page with embedded credentials, e.g. like this: http://user:password#domain.com/directory I get the following warnung:
[Deprecation] Subresource requests whose URLs contain embedded credentials (e.g. https://user:pass#host/) are blocked. See https://www.chromestatus.com/feature/5669008342777856 for more details.
which due to its 'just' a warning, it should not cause the issue.
But along this the following error gets shown as well (which stops the page from working):
angular.js:14700 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.6/$controller/ctrlreg?p0=myController
at angular.js:88
at angular.js:10973
at da (angular.js:10050)
at q (angular.js:9820)
at f (angular.js:9174)
at f (angular.js:9177)
at angular.js:9039
at angular.js:1954
at m.$eval (angular.js:18423)
at m.$apply (angular.js:18523)
any clue why this error gets show, or better, how to avoid this error? Using non-embedded credentials the error is not appearing and the exact same code is working perfectly fine.
When I use e.g. chrome both approaches are working great as well. The issue just appears using the combination of chromium and embedded credentials.
PS: my chromium is running on raspbian in case this matter.
I have an angular application that run ok on chrome and firefox.
But on IE the application does not work.
My Big problem is that I can't find the error reason. and got some generic error.
How can I debug the application on IE or how can I find the reason for the Error
This means that ng module is failing to load. :)
Please look at your browser's console to find if any files are missing or not being downloaded correctly. Also it helps if you click on the link to http://errors.angularjs.org in your console, it will give details about which particular module is failing to load.
Check below link for complete details for resolution:
http://blog.technovert.com/2014/10/dependency-injection-fails-angularjs/
IE Debugging : First of all you need to ensure your Angular application works on IE please consider the use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11. Arguably, this is the biggest annoyance of IE—the page just doesn’t load and doesn’t give any errors. Sometimes you need to view the page again in Firefox. If it’s not an IE specific error, Firebug will pick it up. If Firebug loads normally, the chances are it’s one of two IE specific errors: a trailing comma, or unsupported XML syntax.
For minimize the application files I use
bundles.Add(new ScriptBundle("~/app").IncludeDirectory("~/Assets/app", "*.js", true)
);
(Part of asp.net mvc)
And from the layout page I take all the application files
#Scripts.Render("~/app")
Like I said this part of code worked for me in some browsers, But on IE It fail.
By Changing the script src to all specific files, I resolve this problem. and now on IE it work like the other browsers.
Maybe I miss a comma or ";" (end row) or something like that.
Thanks
need to check this page or api
http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html
https://docs.angularjs.org/guide/ie