Google analytics script fails to load with 500 error code on the website however if the link is opened in a new tab it's working fine.
Checked on MacOS BigSur Chrome, Firefox, Safari in normal and Incognito/Private mode without any active browser extension and got the same error.
Even the solution provided by NextJS https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics does not work
Whatever I tried, I can't get rid of this error: GET https://www.googletagmanager.com/gtag/js?id=G-O5IW7EZ46Q net::ERR_ABORTED 500
Also tried to create simple static site to check is it NextJS issue or not and seems like it's not. https://codesandbox.io/s/nifty-currying-1hzu1?file=/index.html - this is the link to sandbox with google analytic script initialization and it fails as well with same error code.
Try to move the Google Analytics snippet in head section of the page.
I found the problem. The issue was in the Adguard software installed on the machine. Since the app was on OS level tt was automatically blocking across all browsers and private or incognito mode.
Related
I've a weird problem with react.
We use this react video component ([https://www.npmjs.com/package/react-video-recorder) to record or upload a vide file. And It's working fine on mac (both chrome and firefox).
On windows, it's also working fine for the recording part. However for the upload part, when the upload file is more than 20mb, It's not working neither for chrome nor for firefox (on windows).
The weird thing is that we doesn't have any log error on our web server. The only error is a "cors error" showing up in the browser developer console. So it seams that the upload fails even before reaching our api. (That say I'm sure that its not a cors issue because it's working fine when the video size is less than 20Mb, and both front and back share the same domain anyway)
I'm also sure that is not a timeout issue because our axios timeout is set to 1 hour and fails after only a few second (and it is working fine on mac anyways so It couldn't be a time out issue).
Could someone help please?
I am working on a project which is using rails for its backend and react components for its frontend. The app works fine in the Safari browser but for some unknown reason, in the chrome app, it loads the correct path but just renders a white screen showing nothing. If I check the developer tools console, I get to see the following errors
Similarly I refreshed the page and opened the network tab in developers tool and got to realise that some of the packages have not been downloaded.
The point to note is that the app also requires a certificate for running it locally and I have already downloaded that certificate and trusted it so it should also not be a problem. I am stuck at it for a really long time. Can anyone tell me the solution?
As the app works fine in safari, I don't think its related to code but its just a guess. So far I have tried disabling all the extension as well as clearing the browser data but haven't been able to see any progress...
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 am watching this video and when an error occurs he gets an actual error on the page and only a blank white screen when he deploys the site.
I see this a few times. However I only see white screen no matter if I am on local host or on production.
I see he is using chrome on Mac and I am using it on PC. Not sure if that is the difference.
While I can't say definitively, my suspicion is that you aren't using create-react-app to setup your project.
You will only see that error message if you have used CRA to set up your project, as that is a specific error handler that is baked into that project. If you're not using create-react-app, React should log an error to your console instead.
ReactJS smart enough to hide the errors to the users when the app is in production mode.
You will see only a blank page if the app gets crashed but if you inspect the page you will see small detail about the error in the console.
if you running the app in development mode you will see full details about the errors.
for this case cames componentDidCatch method to handle app crash errors, instead of the blank page display a “Something went wrong” message to the user or you can send XHR request to the server with the error info.
Check out this example of declaring and using an error boundary
https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
I have a small silverlight app and when I "play" it, it just hangs in the browser. (Shows the spinner).
How can I debug this and find the cause?
Thanks
I would recommend the following...
Use Fiddler to see if there is any data that is coming/going to the server when you use this application.
Use another browser and see if the issue manifests itself
If it happens with all the browsers, then you can try capturing a dump of Internet Explorer and try to analyze it for the actual issue.
Is there a javascript exception? Open up the developer tools for your browser (F12 in IE and Chrome) to see the specific error message and error code. Once you have those, google them and voila!