I have an native mobile application that loads my react application within a child iframe (not sure exactly how it does it), but this application injects some variables into the page as windows.xxxx
So in order to test my application (yes, this sucks a lot) I need to run the app on my phone, have it open up the URL on my development machine (aka http://192.168.10.10:3300).
Then to debug anything I'm forced to alert(var1) .. as you can imagine this is a pretty painful process and I really wish the parent application would provide something better than this.
Normally a simple option would be something like console.log(var1) but I can't see the console on my mobile device and my URL is being loaded withing this native app.
So:
1. Any suggestions on a better debug process would be welcome.
2. One idea that would help is if there was a react component that would simply
print to screen anything any console.log().
3. I guess another option could be some kind of remote logger, so that console.remotelog(debugServerUrl, var1) pushes debug messages to the listener which then displays the debug.
All of this if a pain of course, but hoping someone out there has a clever idea for me.
If you're already using ReactJS, an easy quick-fix might be creating a log file in the phone. This post details a quick and relatively easy way to save a string as a text file, and it would not be hard to put everything you want saved into a string.
Furthermore, This post details an implementation of the remote logging feature you vaguely referenced.
Also, if you want to capture stdout and stderr, check out this npm package
Ultimately, hope this helps, and good luck
Related
I'm new to frontend development and thinking about what's a good way to find source code in our code base for a webpage. What I usually do is going to the element tab in chrome dev tool, finding a special class name, and searching that in code base to locate the file. I feel there should be better way for this task. I tried to use source tab in dev tool, but it shows tons of files and folders in navigation column. I also tried to use Components tab since we're using react, but component names are minified to single letters. So want to get suggestions from you folks. How do you usually do this? Thanks!
You have the right idea, the problem is that you are looking at the minified (presumably production) version of the website. In general, while developing a website, you run a development server, in which all of the code (mostly) appears as it is written in your IDE/editor. That way you can find component names and inspect the source code through the chrome dev tools.
You should talk to whoever is currently responsible for the code to help you get a development server running on your machine. Then, you find the component names and then do a "find in files" search through your IDE/editor to see what they are, and where they are used in the code base. There may be many results that you have to sift through. That's par for the course in large code bases until you become more familiar with what goes where. And even afterwards.
I will say; even things that appear simple can be fiendishly complex, so it would be useful for you if the owner of the code could give you a rough outline of how things are organised and why to make navigating the code base easier. But, it will always be a bit hard, and depending on how clean the code is, it might be nearly impenetrable. Good luck.
There are many ways to to find source code or debug Code
①You can use Chrome dev tool
②You can use debbuger in VS
③you can debug your code by puttin debugger in java script code
④browser has good functionality to find
code(For reference please check Image.)
We have a reactJs application which works fine on all other browsers except safari on macOS and ios. The app works perfectly on Chrome on macOs or windows and ios as well.
Also, once the app freezes, we cannot open dev console in safari and if it is open, most of the things don't work like pausing script execution. And we can say from activity monitor that it goes in some infinite loop as the cpu usage of that page goes to 100% but i am unable to figure out as there are no errors at all and it works on other browsers.
It just freezes on loading and becomes totally unresponsive (No scroll or clicks etc). It looks like there is some infinite loop or dependency issue.
The webapp is kind of LMS and has many dependencies but to give you an idea here is the stack -
GraphQL
React Router Dom
React Hooks
Sentry for Logging
Socket
etc
If you have any questions feel free to ask.
Here is the site - https://i3.stage.cudy.co/
Thanks
I went into trying to see what's going on and I noticed three things:
First couple of times I tried to open your site it froze as you say. Could not even open dev tools.
After previous tries, I suddenly saw the icons for your menu options (browse tutors, assignments, feeds, etc) appear and everything worked "fine" and no more freezes.
However, I did noticed a bunch of errors in dev tools. Most of them are related to urls not allowed to access and some others due a /profiles trying to access an API of some sort.
You have a lot of unhandled promise rejections errors in your *.js so that may also be something to look at.
I would suggest tackling down the cross domain origin policies first and then add logic to handle the promise rejections that you're missing since sometimes those unhandled scenarios leave the app at the dark without knowing what to do and may interrupt your logic process thus rendering frozen sites because of that.
Last but not less important, this is a good way of tracing down the issue.
There are way too many factors involved for us to help you without looking at the code.
I'd recommend the following:
Going through the code history and testing it on each major version change so you can rule out any culprits or suspicions.
I'd disconnect any packages 1 by 1.
Disconnect the API so see if it's a server issue where you're requesting API calls infinitely or something silly like that.
If disconnecting the API works then you know where to look at.
Cheers
I hope it's the right place to ask such question. I have a live react app which still runs in development mode since it requires frequent updates, and it seems that for a few users the website doesn't function properly while for the others it works perfectly.
For example, for a few users there is a button that just doesn't respond, although I created some code to log to the console that the button was pressed, and it does also for those users, but then the rest of the code just doesn't run.
For other users, there is some text that loaded from mongodb database, and for those users it reverses some of the words in a random fashion.
I'm really lost here and don't even know where to begin, since for me and most of the users everything is working fine.
Do you think it could be because the app still runs in development mode?
Recently I noticed that a few users received the message
the development server has disconnected. refresh the page if necessary.
I researched this and was suggested that I should upgrade my react-scripts. I did, and the problem vanished, but the other problems still persist.
I understand that it's like shooting in the dark and it's hard to give advices without knowing more information, but maybe you could point me in the right direction?
Thank you very much in advance
simple problem that I've seen asked in a few places and seems to have no structured answer. Because of this I though I would start a thread here and maybe get something going that will help everybody!
Diving right into it, I have build a react app using create-react-app, compiling this into a prod version using npm run build it does everything that it needs to and completes successfully.
After all of this we can observe the compiled app having multiple chunks.
All good and well until we enter the app and try to navigate to a different page, where we find it is not loading any other chunks besides the chunks responsible for the first page you access when entering the app.
This is the base problem, I realize I'm not giving any snippets or anything but again, this is because the problem seems very general, there are a lot of people with different applications and code looking for a solution to this and haven't found something practical and normal (having messaged some on forums and such).
If anybody needs any specific information to may case please ask and I will happily provide :)
As far as I can tell, this is webpack related or something like that, webpack from what I understand only includes one chunk and then loads the others as needed, is this correct?
If so and if the chunks are created but not loaded when switching to other pages, then it seems like a webpack issue, but what?
When you, then other developers, create a react app and it contains multiple chunks, do they load well?
Any and all information is appreciated, lets try to tackle this issue!
P.S. If you go into the compiled production build and manually add all the chunks, everything works perfectly. I will try to add any and all information to this thread as I find out more.
I have recently shown to my team leader the ElmahR Dashboard and now he wants to implement ExceptionsLog with ElmahR in all of our current projects, including those that are Winform Applications, and after many days of searching I can't find a way to add a Winform Application as "ElmahR source".
Does anyone have a clue?
ErrorPostModule in ElmahR.Elmah does not support Winforms apps because it's been written to be an ELMAH module, so it's tied to an ASP.NET lifecycle and cannot be easily adapted. That said, ErrorPostModule does not do anything so magic and can be easily taken as a guideline to write a small "handler" to be used in a Winforms app. Take a look at its code here, what you should do is:
replace what's in the OnInit method, which simply reads configuration bits and attaches the error handler
when an error occurs, handle it like it's done in the SetError method to post it to the right destination reading the configuration parameters you read before. You would reference ELMAH and create an Error instance from your exception, and then use ErrorJson.EncodeString to encode it
You may want to borrow the W3.cs file to simplify the http form compilation.
At some point I might generalize this work and put it in ElmahR.Elmah, but not sure when I'll be able to do it.
I just forked the elmahr source code to work on this, I want to post errors from console applications, so I'm going to remove the dependency on Elmah and create the "error" objects and send them to the dashboard.
It's a work in progress but can be used as starting point for solving your problem.
https://bitbucket.org/rudygt/elmahr
Update: the fork now include full support to post to ElmahR using a ServiceStack endpoint, using json over http. This remove the dependency over the original Elmah to publish errors to the dashboard. The first example is a C# Console Application