Components are accessable via console on production? - javascript

I recently deployed a website for a friend of mine, written in React, Express, Mongodb, etc... And I can see that I have a console.log on one of the components and wanted to ask if that's normal that a component is accessible via a console.log? (I can access the source code because of that).
And is there a solution for that or just removing ALL console.log before production?

Assuming you used create-react-app to start the project, it generates sourcemaps when you run the build script by default. You can disable this by adding GENERATE_SOURCEMAP=false in your .env file.
As for the console logs, you can either change console.log to console.debug (which only shows in the browser console when you have verbose logging enabled) or you can rely on some linting rule (like this) to prevent the use of console altogether.

Related

Can't profile Babel-transpiled Node.js app with Spy-js in WebStorm

So me and my team are currently in the process of profiling our Node.js app to try and improve performance on it as much as we can. After doing it with Chrome's DevTools for Node.js which was not excruciatingly hard to achieve, I thought of giving Jetbrains' Spy-js a try and so far I've had no luck.
The app is run from inside a Docker container, and the code is transpiled with babel-cli on the fly so this surely complicates things a bit. Even though I could probably get it working outside Docker and somehow connect it to the other containers, I could not go as far as to try that since I haven't managed to run the app with Spy-js.
Spy-js differs from DevTools in that it doesn't just connect with the app through the native inspector's debugging port, but rather requires the app to be run from the tool so that it can also intercept and modify script execution on the fly (as per their docs).
Since I'm using babel-node to run the app, I've tried creating a new Run/Debug configuration in WebStorm pointing to it (from a fresh global install of babel-cli) as the "Node interpreter" value in the options window. I've also already added all of the app's required environment variables to the options.
With the above setup, attempting to run the new Spy-js configuration results in the following errors:
Undefined handler Super
session (ak133): Error while instrumenting '<app directory here>/node_modules/p-locate/index.js'
(g is not a function)
session (ak133): Unexpected identifier
<app directory here>/node_modules/boom/lib/index.js:249
constructor(message, options undefined {}) {
^^^^^^^^^
Which looks like it's having trouble transpiling dependencies (boom). The original source for this was options = {} so I'm not sure why it would be converted to that either.
As much as I know this is not officially supported yet, I'd really appreciate being able to get it running somehow as Spy-js seems to do its own thing and isn't just another wrapper for the native v8 profiler, so any help would be appreciated.
Try using -r babel-register instead of babel-node - does it make things any better?
Of course, you need adding .babelrc to your project, like
{
"presets": ["env"]
}

Why vue acts differently with Laravel than standalone vue app?

I don't know why Vue acts differently with Laravel than standalone Vue app. Maybe I can't understand the environment it needs to work correctly. Here is what's happening which made me post this question.
When I install standalone Vue app, Let's say, when I install it in a completely different directory using vue init webpack vueapp, It works as it should. When I update anything in .vue file, It gets updated in the browser too which is expected behaviour in my mind or maybe it's because I am executing it in a development environment using npm run dev.
But when I use vue with laravel, I can load the modules and I can see loaded modules in the browser, but when I update something a component, It won't update in the browser! It just does not. I have to reload a page every time I update markup in the component file.
Also, when I execute npm run dev in the vue app with Laravel, It does not take over the terminal as it does in the standalone vue app. It is obvious as we can't execute vue as well as laravel in the same development environment as vue uses nodejs which uses the port 8080 and apache uses the port 80.
I don't know what I am missing but it's eating my head since last few days. I surfed almost all the tutorials available on the internet and all the available StackOverflow questions but still, I can't get it! I think it's the normal behaviour but I have less experience with vue.js as I am a newbie in vue.js.
Any help would be appreciated!
What you are saying is true and it was meant to be that way.
But you can use a library that comes withlaravel to accomplish that. first.
add .browserSync(); to your webpack.mix.js
instead of npm run dev use npm run watch. This will help you not to refresh.
and that is how you have the same effect. Hope its not much.

When running `ember test`, execution hangs at `Built project successfully. Stored in ". . .`

I've googled around for an answer but have yet to turn up anything of use. Does anyone know why attempts to run ember test at best result in a message that reads:
Built project successfully. Stored in "/Users/.../tmp/class-tests_dist-H42JePnK.tmp".
If your tests won't run at all, here are a few things to look for:
Check for a testem.js file. It is essential and contains the instructions and configurations that the Ember CLI needs. Deleting it will cause your app to build and 0 tests to run.
Check to make sure your testem.js file is valid/complete. You can test this by doing ember init and then choosing option d (diff) to see what is different between your app and a brand new app.
Your tests are also available in the normal browser. Go to http://localhost:4200/tests and see what happens there. Perhaps it will give some clues.
Similar to above, try ember test --server and see if you get different results.
Create a fresh app with ember new and try doing ember test. It can sometimes be easier to compare a fresh app instead of doing the ember init diffing.
Try switching the browser you are using for testing (unlikely to be the problem in this case, but sometimes works). For example, run the tests with headless Chrome instead of PhantomJS. The most recent release of the Ember ClI has the testem configuration that you need to try headless Chrome.

"Failed to create temp file 18" error on published github page

I have created a simple application using Create-React-App (CRA). The problem is that even though the app runs perfectly fine on my localhost (ie, after using npm start), when I try to publish my pages to gh-pages (npm run build, and npm run deploy), I am not able to load the page using the URL. I don't even see any errors in console at first, but after a while (or more specifically, after I open the Timeline tab in console), I see the following error.
Failed to create temp file 18 : It was determined that certain files
are unsafe for access within a Web application, or that too many calls
are being made on file resources.
I do see this warning on my local dev environment,
[Violation] Long running JavaScript task took 229ms
and the minified bundle.js file goes to about 4MB in size. But I guess this is not the issue because my other projects have the same warning and they are published just fine.
I'm also fairly confident that this is a more JavaScript related issue, rather than CRA related. I read somewhere that this might be a network mapping of resources issue. But so far, I'm not really sure what this means or how to resolve it.
Just to answer my own question, in case anybody else lands up here.
The issue was in the way I was using react-router. I was initially using browserHistory instead of hashHistory.
As per the docs,
GitHub Pages doesn’t support routers that use the HTML5 pushState
history API under the hood (for example, React Router using
browserHistory). This is because when there is a fresh page load for a
url like http://user.github.io/todomvc/todos/42, where /todos/42 is a
frontend route, the GitHub Pages server returns 404 because it knows
nothing of /todos/42.
More information can be found here.

How to pass Node environment variables to React Native JS code

I am trying to access node environment variable from JS code of React Native, but somehow whatever I pass it is not used.
If I try something like:
NODE_ENV=test react-native run-android
I expect process.env.NODE_ENV to be equal to test however it is overwritten to production or development according to the __DEV__ param of the bundle request.
What is the suggested way of passing environment variables to JS code in React Native?
Thanks
I'm sure you have probably have moved on from this (5 months later), but I'll answer it incase anyone else has found themself here.
At best you'll set an env var in that react-native process which won't even set it in the packager. However, that doesn't seem like what you want. You want, if I understand correctly, to have access to that variable in your app code. The reason you can't do that by setting a variable that way is that node isn't running your app, it's just packaging it and it's being run in a chrome webworker (in remote dev mode) or WebKit (in the case of on device).
To do what you want, see here
To read more about the JS environment, read here

Categories