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 })]
})
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
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 noticed this in my custom app, but it applies to the Polymer starter kit as well. I have two browsers open, Chrome and Firefox, and a click on one browser in my Polymer app affects the other.
Why?
How?!!
(Chrome on left, Firefox on right. Clicking in Firefox affects Chrome!)
Edit: And my phone?!!
This was due to how the page was served. Polymer Starter Kit has a gulp file setup to server and auto-reload the pages. Works great! But I guess it also keeps things perfectly in sync. Great for development : )
Serving with something else (live-server) allowed the app to function as expected.
Edit: As #chillitom mentioned in the comments, it was BrowserSync. When I start using gulp serve I see this:
[PSK] Access URLs:
--------------------------------------
Local: http://localhost:5000
External: http://192.168.1.107:5000
--------------------------------------
UI: http://localhost:3002
UI External: http://192.168.1.107:3002
--------------------------------------
Going to http://localhost:3002 allowed me to change browser sync options, and that "fixed" this as well.
Any time, I make code changes in .hmtl file or the .js file, the browser still renders the old code and my new code changes don't show up in the browser result.
For example, I add the following 2 lines of code in .html file.
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls readonly">
{{profile.FirstName}}
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name</label>
<div class="controls readonly">
{{profile.LastName}}
</div>
</div>
Then I do the following:
In VS2013, right click on my project and view in browser (IE or Chrome).
Login to my application.
Go the respective page and I see the rendering of the old html file. I do not see the newly added 2 div elements rendered at all.
I even hit f5 to refresh the browser but still no luck.
What am I doing wrong?
Hit F12 in your browser to bring up the Developer Tools. Disable the Cache. Reload your page.
Besides using Dev Tools to make sure the cache is disabled, you can edit your Web.config file and tell IIS to not cache your Angular files:
<configuration>
<!-- Disable IIS caching for directories containing Angular templates and scripts -->
<location path="app">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache"/>
</staticContent>
</system.webServer>
</location>
...
</configuration>
My Angular root directory is app/. You may need to modify according to your file structure.
TypeScript only!
In tsconfig.json add…
"compileOnSave": true,
Try disabling your cache with Dev Tools:
https://developer.chrome.com/devtools/docs/settings#general
Open devTools in chrome and select Network tab, In Network tab Un-check the Disable cache and reload the page.
For me, none of the previous answers worked. I was using Chrome, and the only way I was able to view the update was by opening an incognito window. My regular browser window, for some reason, just will not get the latest assets.
I have tried clearing my cache, disabling cache on devtools, and hard refresh, to no avail. The only way I was able to fix it was by clearing the DNS cache. Here's a link with more details:
How to Clear the DNS Cache on Computers and Web Browsers
Using command line, here's how you go about doing it:
Windows 7 & Earlier
ipconfig /flushdns
Windows 8
ipconfig /flushdns
OSX (Yosemite, El Capitain, and Sierra)
sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder
You need to change the aspnetcore enviroment variable from production to development. From the official website:
... set an environment variable to tell ASP.NET to run in development mode:
If you’re using PowerShell in Windows, execute $Env:ASPNETCORE_ENVIRONMENT = "Development"
If you’re using cmd.exe in Windows, execute setx ASPNETCORE_ENVIRONMENT "Development", and then restart your command prompt to make the change take effect
If you’re using Mac/Linux, execute export ASPNETCORE_ENVIRONMENT=Development
If you are in linux, you might have to do it as a superuser. i.e.
sudo export ASPNETCORE_ENVIRONMENT=Development
The value of the variable may revert back to Production after re-booting. If you want to work with several environments, I suggest you define them in the launchSettings.json file:
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:40088/",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express (Staging)": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Staging"
}
}
}
}
Read about environments here:
In chrome press F12>go to network tab> disable cache
deleting the dist folder from clientApp folder from source resolve my issue and it started auto refresh again
Or you can use Browserlink in Visual Studio 2013 to automatically reload the page
http://www.asp.net/visual-studio/overview/2013/using-browser-link
You need to run command yarn webpack:build to recompile your client code. Otherwise modifications/updates in .HTML, .json, .ts files will not be reflected.
I simply deleted the dist folder in Visual Studio and it auto refreshed again.
**** this was for Angular 7 ***
Just right click on the page reload button on the browser and choose "Empty cache and Hard Reload"
In my case issue inside Angular.json file "deployUrl": should be relative path Like "/support/yourpagenam/bundle/dist/"
Hence any changes made in Angular files are not reflecting to Browser.
Problem
Client-side (Browser) caching of static files in dev enviornment
Server-side (IIS Express) caching of static files in dev enviornment
Solutions
For Client-side (Browser) caching of static files in dev enviornment
Web.Config/ApplicationHost.config Approch: Web.config Approach
suggested by #NateBarbettini above. Please note that this approach is
also can be applied to 'Applicationhost.config' instead of web.config
file.
"Always Refresh From Server" in IE as suggested above by #Phil Degenhardt. Please find screenshot below.
Navigate to source file location in browser address bar: Try to navigate to the JavaScript file in question by typing the address. It will show you JavaScript file contents. Once you do this, file gets updated.So you can again go back and try to navigate to proper landing page of your application. This time, you will see you get latest JavaScript code getting executed.
e.g. If you have problem with not updating 'app/home/home-account.js'. Then in browser navigate to 'http://[your-host/localhost]:[specified port of your application]/app/home/home-account.js. This will show you the contents. Then again navigate to your application's home page i.e. in this case 'http://[your-host/localhost]:[specified port of your application]/'
For Server-side (IIS-Express) caching of static files in dev enviornment
visit IIS Express appcmd commandline utility. In my case, appcmd is located in "C:\Program Files(x86)\IIS Express\appcmd.exe" this path. Then use SITE list and SITE delete command to remove temporary files cached in iisexpress.
There is also one solution which is specific to IE mentioned here:
Visual Studio 2013 caching older version of .js file
This happens because of cache stored by the browser. Before running your application you can delete cache and cookies stored by your browser.
Set HTTP Response headers to expire content through IIS manager.
Open HTTP Response Headers module for you web application
Click Set Common headers in the Actions pane
https://www.iis.net/configreference/system.webserver/staticcontent/clientcache
I opened link in Incognito mode since in that mode cache is disabled and Voila it worked.