Not sure if anyone had this problem, since I could not look it up anywhere but I cannot see any logs for react native app because the browser console tells me that "Another debugger is already connected" its a warning that keeps looping.
Metro bundler is telling me that I have to see the javascript logs in the browser. I cannot work on my app without debugging it, can anyone help ?
This happens if you have another tab opened at http://localhost:8081/debugger-ui as you can only have one instance of the debugger running.
You could either go back to the already running tab and see the logs there or close the other tab and refresh this one.
Related
When there is an error because of X, in Firefox I can only detect this by looking at the console. The components still render. I've had this happen on other projects too, on different computers, making me think this is something I am going to have to address specifically for FF.
Versus in Chrome, where the helpful "error component" (IDK what this is called) renders, definitely making the developer aware. I've attached an image of this.
It's the screen that says this at the bottom: "This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message."
I really want this to appear in FF. Any clue how? I do have React devtools installed, but that is not the thing driving this, as you don't even need that tool in Chrome to see this rendered.
This was the cause of an extension getting in the way.
I solved this by disabling a handful of extensions at a time until I got the error screen to load. Then I reversed the process until I narrowed it down to one extension.
The culprit was a form auto-fill extension.
I made a PWA (progressive web app) a few weeks ago with React and some PWA configuration. From that moment, the name I gave the app still displays in the top bar when I try to run any other app on localhost:3000.
Apart from this, there were no issues with running applications on localhost:3000 for a long time, so it didn't bother me. But since last week, when I tried starting my React app (yarn start) on port 3000, my app won't render anymore.
I figured it might have something to do with the browser's cache settings, so I tried opening the app in another browser and it suddenly worked.
Notice that the name has now changed back to "React App" instead of the PWA name. Since it worked on the other browser I started testing some routes and tried to delete my cache in the browsers I normally use.
I tried adding something to the route (for example: localhost:3000/test) and this also redirected me to the right page (from the right application).
Is my PWA running somewhere in the background and causing issues or is there some browser configuration I am not setting right?
It is probably cache, it's not possible to run two apps under same port at the same time (at least by default).
You should have set that cache shouldn't work on dev environment to prevent that happening.
You can try incognito or open dev tools in Chrome => right click on refresh icon and select "Empty cache and hard reload".
Also try unregistering service worker in your app or in browser dev tools.
A way good way to resolve this error is -
Right-click and press inspect element to open the dev tools.
Under the dev tools, head on to the "Application" tab.
Here, on the left side, you'll find an option "Service Worker".
Click on it, and from the left side, press unregister.
After this, you can press "Empty Cache & Hard Reload" and your application would work just fine.
Empty cache and hard reload
you should press Ctrl + F5 together
Before Im posting this question, I've tried to look up for answers on google but I could not find the solution to this problem.
I'm developing a react native application, I use redux and react native debugger to check my console and my state.
The issue that I am facing right now is my application wont update to latest changes when expo is debugging the application remotely using React Native Debugger.
Lets say I have a main screen with text "Hello World" and I change my code to "Hello Me", and when I refresh the expo/app, it is still Hello World. I've tried to reset cache, delete expo, recompile but nothing works. I have to disable remote debugging in expo in order to see any changes related to my code.
Does anyone have any idea how to solve this ?
The issue is with React Native Debugger. There is a bug that is likely related to React Native 0.61 and the "fast refresh" feature that is causing the debugger to load stale JS code.
To fix the issue click on the "Network" tab in the debugger and check the "disable cache" option. Now you should see your changes work.
For more info check this out:
https://github.com/jhen0409/react-native-debugger/issues/423
I had this problem using Expo
I managed to solve it, move the device until the settings appear, then disable the "Debug Remote JS" option.
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 started exploring react-native. One thing which I want is should able to debug my app from chrome. I am having prior experience to cordova. Cordova renders app in chrome web view. I understand that with react-native it is not possible because react-native doesn't render app on web view.
There is an option react-native "debug in chrome". When I click this option, attached screenshot is getting opened. I enabled "pause on exception."
But nothing is happening. I am unable to see my app code at all.
I like to do step by step debugging. Is it possible? If so can some one tell how to do this?
You can definitely examine the source code, set breakpoints, etc in Chrome.
In the Sources menu, select debuggerWorker.js and then you should be able to see your project tree.
Any console.log in your code will print to the browser too. But I find the breakpoint inspection most helpful.
this is simple as you were doing in cordova.
try to put debugger; statement in your code while in debug mode.
It will set the breakpoint and you can then debug your application. No need to find out your files in debuggerWorker.js