I have worked with React.js on and off for several years. When I make certain kinds of mistakes in the jsx code, React.js silently fails. Here's what happens:
Compilation (with webpack) appears to succeed and produces no error messages or warnings.
But when I open my index.html file, all React components are missing from the page. (The nav bar, which I have coded directly into my index.html file, is still present and is styled correctly. Below that, where my React content is supposed to be, the page is blank.)
The browser console doesn't show any error messages.
For some mistakes, when I inspect different versions of the page source using my browser, I see that the <div data-reactroot> element was present before my breaking change, but is now absent. For other mistakes, <div data-reactroot> is present, but its contents are empty or commented out.
There is no error message to help pinpoint the source of the problem, and in my experience this same behavior can be caused by many different kinds of mistakes. So my question is, how should one debug these silent failures from React?
I'm looking for a general debugging approach, analogous to these tips for debugging CSS. Good answers might include a list of mistakes to check for, useful debugging tools, or other ways to narrow down the cause of the problem.
Related
I have VS Code and use it to edit my ReactJS application, along with several other people. I have the React Snippets extension installed but nothing else. It seems VS Code is reformatting my code, however, so that whenever I commit something with a small change, there are 20,000 diffs to review because of whitespace changes. Does anyone know why this is happening and how to stop it?
I'm trying to debug my gatsbyjs code in visual studio code. I followed the docs and and tried slightly different approaches like https://github.com/Microsoft/vscode-recipes/tree/master/Gatsby-js.
I can start debugging and the site builds, but my none of my breakpoints in any of my files get hit, they get instead show up as unverified.
When pausing the debug process though, I (somewhat) randomly end up in the source code of any of the external modules, and there I am able to place breakpoints that do stop...
Is there maybe some setup step or something I'm missing to make it work on page components and other react components?
Thanks for any help!
Adding a
debugger;
statement in the JS react page components definitely works for me. But be reminded that in development mode (gatsby develop), some breakpoints will get hit on startup, while others are only hit on page request. This of course depends on where you place your breakpoints.
I don’t know what happen to my WebStorm settings but previously whenever I add new react component it gave me a warning by adding underline above the component name. But now it is not showing any warnings. Why?
Please see my screenshot example currently in screenshot function is not defined so it gives underline.
How to reset the setting?
In screenshot I added Button,Dialog,DialogTitle but not imported. It is not giving any warning, why?
We intentionally decided not to mark the components as unresolved because there were quite a lot of patterns of defining the React components, especially in the component libraries that WebStorm couldn't recognize. So instead we decided to only show the missing import inspection for the cases where we knew where the component was defined.
We will review of how it all works now and will enable the inspection if it doesn't generate too much false positives.
Please vote for WEB-32549 to be notified on any progress with this feature
This question already has answers here:
How do you debug React Native?
(48 answers)
Closed 5 years ago.
How do I properly debug in React Native? From what I've seen so far, the debugging messages given aren't too useful for narrowing down where to look in my code. I just get a stack trace that only mentions dependencies in node_modules
For example:
Android emulator image (sorry, don't have enough reputation to show image on this post)
In the above error, I understsand that somewhere a non-Component object got passed in, but I have no idea how to track it down; the entire stack trace only mentions files from node_modules.
I have tried using Chrome Developer Tools as well:
Chrome Developer Tools image
I have also tried React Developer Tools and it wasn't helpful either.
How do I go about getting output from debugging that is actually helpful and linked to the code that I wrote?
Unfortunately the stack trace isn't always helpful since in this case you have to go through the bridge, and there isn't any single catch-all answer to how to get the information you need.
In this case, you're right that you most likely made a mistake returning a proper JSX object in one of your components. If you remember which components you recently added to your app, which components make up the navigator route that led to the problem, etc, you can make an educated guess as to the set of possible problematic components, and narrow that set down by commenting things out. Once that set is a reasonable size, triple-check your render methods and make sure nothing weird is going on.
You can write your own debug messages to the chrome developer console to help give yourself an idea what your app is doing (e.g. rendering this component, fetching that data from shared store, etc) using if(__DEV__) console.log("Your message here"). This will check if the app is running in a debug vs release build, and only log the messages if you are running a debug build.
You can use adb logcat for android and the XCode console for iOS to see the native debug logs, although I don't think they'll help in this case.
You can draw a picture of your component tree, put a debugger statement at the beginning of every render method, and check off components one-by-one until your app stops trying to render things and you know you've hit a problematic component (React will render components recursively, going from top-to-bottom for components on the same level in the tree).
I know it's frustrating when you can't immediately tell where the problem is by glancing at the stack trace but sometimes that's life.
My DNN site is running 7.4.2 and I'm running the latest 2sxc, 08.05.06. I have this strange issue where when I try to edit any content items, instead of displaying the edit dialog, it's now just displaying a bunch of javascript.
Before:
After:
As far as I know nothing has been deliberately changed on the site and I'm not seeing any errors in the browser console related to the module. No errors are showing in the Event Log either. I've tried reinstalling the latest release overtop to try to repair anything that may have been corrupt or missing but that didn't solve the issue. Any ideas what might be happening here?
The JavaScript inside the ui.html seems to show, instead of run. I believe that this file is somehow damaged, that the script tag isn't open/closing correctly.
-- correction --
To anybody reading this - it turned out that the web-server of this user was reconfigured, causing HTML files to be handled as plain-text. So this was a user bug.