Behaviour after integration sentry.io in react app.
Console logs are generated from the instremnts.ts file.
I have tried printing it from index page as well.
Do you need it for production or development? We are using this integration to transform console logs into event breadcrumbs. If you don't need them in development (or at all), you can turn them off:
Sentry.init({
dsn: '_YOUR_DSN_',
integrations: [new Sentry.Integrations.Breadcrumbs({ console: false })]
})
Related
I am trying to debug the getStaticProps() method of a React component included from my pages using console.log() like:
export default class Nav extends React.Component {
render() {
return <nav></nav>;
}
async getStaticProps() {
console.log('i like output, though');
}
}
However, I am neither able to see any output on the console from which the app is being served, nor on the browser's console. I also tried restarting yarn dev and running yarn build to see if it would produce output then. Alas, no cigar.
So what is the correct way to produce and read debug output from getStaticProps() and getStaticPaths()?
So after further research and testing I found out that getStaticProps() is only called on page components. So that was why I wasn't seeing any output. When I added the method to a component inside the pages directory I was able to see debug output produced with console.log() in the console running yarn dev on manual browser page refreshes (but not on automatic refreshes after modifying the page component) as well as during yarn build.
You can easily debug server-side code of your next application.
To enable it you need to pass NODE_OPTIONS='--inspect' to your node processor. Best place to put it is in your package.json file where you run the app in dev mode => "dev": "NODE_OPTIONS='--inspect' next dev" .
Now open a new tab in your chrome browser, and visit chrome://inspect. This will open chrome dev tool inspect where you can see your nextJs server under Remote Targets, Just click ìnspect. By clicking that it will open a new inspect window.
Now simply put debugger inside your getStaticProps function and reload your client app, you will see the breakpoint in your server side code.
I hope this helps.
Reference: https://nextjs.org/docs/advanced-features/debugging#server-side-code
getStaticProps runs on the server-side and not on the client-side.
getStaticProps only runs on the server-side. It will never run on the client-side. It won’t even be included in the JS bundle for the browser.
Ref: https://nextjs.org/learn/basics/data-fetching/getstaticprops-details
Using the current next version (11.x) you can use console.log to print out any data in the getStaticProps() function.
You will see that output in the terminal where you run
vercel dev
Your console.log will work but in the console of your app Terminal, not in the console in the browser. There you can check your message.
Also, if you get data [Object] then just in that console, make JSON.stringify(yourValue).
if it's a bigger object than stringify you can write like JSON.stringify(yourValue, null, 2) and it will be displayed within JSON way.
I guess it's about react-redux but I'm not very familiar with it.
I generated a Monolithic jhipster-react project using ehcache and h2 database for development.
When I run it with ./mvnw and then npm start and try to open two browser tabs/windows in localhost:9000 the scrolling and often entire page and actions get synced, not allowing me to do different things in different pages.
I know that redux is used to save the logged in state of the session, right?
Is there a way to keep only that and not sync scrolling and routing etc.?
It's due to browser-sync being used in dev. You should not have this issue in prod and also in dev if you open tabs on java backend port (by default 8080). You could also disable browser-sync in webpack/webpack.dev.js.
you could add this to your webpack config:
ghostMode: {
clicks: false,
location: false,
forms: false,
scroll: false
}
Using Next.js - building this
I am porting my app to the next.js framework. Currently, I am re-creating the authentication system, otherwise, this iteration of my app is pretty bare-bones. All of a sudden, after adding my protected routes (Higher Order Components) - not sure if that is related - I started getting this error along with super clunky loading (obviously).
The connection to http://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.
Otherwise, everything works as expected.
I have no idea how to even begin to troubleshoot this sort of thing. Does anyone have any ideas of how I might get a bit more info/insight on this problem? Guidance on how to debug? My next move is to start disconnecting things until it goes away I guess. Any help would be appreciated! Thanks
As per the resolution suggested in https://github.com/zeit/next.js/issues/9776, You can unregister the service worker if you are using CRA.
The following code shows the way to remove registered service worker:
import { unregister } from './serviceWorker'
// ...
unregister();
If you have already deployed the registered one, first you to need build this code and deploy again it will deploy with unregistered one. The reason for doing this is because the service worker is registered in your users' browsers if you've used register before. unregister removes it entirely, though. If you build you app again, the main JS bundle will get a new hash, the users will download it, and unregister will remove it for them.
Have had the same issue.
I followed recommendations from various sources I researched and none of them worked. In my case it was an issue in next.config.js file.
More specifically, in my next.config.js file I was including an async generateBuildId function but I left it blank in order to revisit the algorithm at a later stage since the project was in its early stage. After returning a valid buildID from this function the warning disappeared.
This usually happens when you are developing the app
The issue might be service work that is getting register to the browser again and again in development mode as the browsers reload fully,
open the Dev tool and check whether a service worker is a registered or not.
if it registers then unregister it, and update your next.config.js so that the service worker will not register again in the browser
I am using "next-pwa" module, below is the check which i have done
pwa: {
disable: process.env.NODE_ENV === 'development',
register: true,
scope: '/',
dest: 'public',
swSrc: 'service-worker.js',
},
My two cents: this happened to me using Firefox, connecting to localhost;
same error:
The connection to http://localhost:9009/__webpack_hmr
was interrupted while the page was loading.
Being specific I was running start-storybook -p 9009 -s public, but that's actually unrelated to the issue.
I solved this clearing Cached Web Content and Site Data at Firefox preferences:
I cannot assert any text with the following configuration and screenshots are blank, even though there are no errors and network activity shows 100% success.
Versions
phantomjs-prebuilt 2.1.12
phantomjs 2.1.1
poltergeist 1.13.0
capybara 2.12.0
Debug logs
Gist of phantomjs/poltergeist/capybara logs
Symptoms
captured screenshot and it is transparent
captured network activity (see gist) successful
captured html is good (see gist)
no errors in phantomjs debug (see gist)
no errors in poltergeist debug (see gist)
neither long sleeps nor high Capybara.default_max_wait_time have no impact on result
react js works with both manual testing and with selenium/chrome
Feature
Feature: smoke
Scenario: Home
Given I go to the home page
#When I sleep for 30 seconds
Then I should see "Landing Page"
Poltergeist setup
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, {
js_errors: true,
timeout: 180,
debug: true,
phantomjs: "#{Rails.root}/node_modules/phantomjs-prebuilt/bin/phantomjs",
phantomjs_options: %w(--debug=true --load-images=no --proxy-type=none --ignore-ssl-errors=yes --ssl-protocol=TLSv1),
window_size: [1280, 600],
# inspector: true,
phantomjs_logger: PoltergeistLogger # File.open("target/phantomjs.log", "a")
})
end
TLDR;
I have no errors yet a reactjs page doesn't seem to be rendering a DOM within phantomjs or when accessed via poltergeist.
I've run out of options that I'm aware of. Any thoughts I can try?
I am starting to write e2e tests using nightwatch.js and I noticed some errors that I would like to inspect manually in the target browser's console (developer tools). but always when I open the developer console, it is automatically closed by the browser. is this a intended feature of either selenium or nightwatch.js, and, if it is the case, how can I disable it?
I'm successfully using this config in nightwatch:
...
chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
'args': ['incognito', 'disable-extensions', 'auto-open-devtools-for-tabs']
}
}
},
...
Unfortunately it doesn't seem to be possible. See here:
When you open the DevTools window, ChromeDriver is automatically
disconnected. When ChromeDriver receives a command, if disconnected,
it will attempt to close the DevTools window and reconnect.
Chrome's DevTools only allows one debugger per page. As of 2.x,
ChromeDriver is now a DevTools debugging client. Previous versions of
ChromeDriver used a different automation API that is no longer
supported in Chrome 29.
See also this question.
You might be able to achieve this using Node Inspector: https://github.com/node-inspector/node-inspector
Put a debugger statement where you want the test to pause and run node-debug ./node_modules/.bin/nightwatch --config path/to/nightwatch.json --test yourTest.js