Is there a way to disable the error overlay when running a create-react-app in development mode?
This is the overlay I'm talking about:
I'm asking this because im using error boundaries (React 16 Error Boundaries) in my app to display error messages when components crashes, but the error overlay pops up and covers my messages.
An alternate solution is to add the following CSS style:
iframe
{
display: none;
}
This prevents the error from showing.
We don't provide an option to disable the error overlay in development.
Error boundaries do not take its place (they are meant for production use).
There is no harm having both the development error overlay and your error boundary; simply press Escape if you'd like to view your error boundary.
We feel the error overlay provides tremendous value over your typical error boundary (source code, click to open, etc).
It is also vital as we explore enabling hot component reloading as a default behavior for all users.
If you feel strongly about disabling the overlay, you'll need to eject from react-scripts and discontinue use of webpackHotDevClient. A less intrusive method may be removing the error event listener installed by the overlay off of window.
The error overlay can be disabled by using the stopReportingRuntimeErrors helper utility in the react-error-overlay package.
First, install the react-error-overlay package:
yarn add react-error-overlay
Then in index.js — right before mounting the root React component, import the utility and invoke it like this:
import { stopReportingRuntimeErrors } from "react-error-overlay";
if (process.env.NODE_ENV === "development") {
stopReportingRuntimeErrors(); // disables error overlays
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Error overlays in create-react-app should now be disabled.
You can suppress React's error event handling by capturing the event first.
for example, by placing in public/index.html's <head>:
<script>
window.addEventListener('error', function(e){
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
</script>
Since you probably still want React's error overlay for errors outside the error boundary, consider this option:
<script>
window.addEventListener('error', function(e){
const {error} = e;
if (!error.captured) {
error.captured = true;
e.stopImmediatePropagation();
e.preventDefault();
// Revisit this error after the error boundary element processed it
setTimeout(()=>{
// can be set by the error boundary error handler
if (!error.shouldIgnore) {
// but if it wasn't caught by a boundary, release it back to the wild
throw error;
}
})
}
});
</script>
assuming your error boundary does something like:
static getDerivedStateFromError(error) {
error['shouldIgnore'] = true;
return { error };
}
The result is a behaviour that follows try...catch line of reasoning.
To solve this issue, you could use CSS:
body > iframe {
display: none !important;
}
for some reason the overlay popped up for me only now while upgrading to Webpack 5.
In any case, you can now cancel the overlay by adding in your webpack.config.js:
module.exports = {
//...
devServer: {
client: {
overlay: false,
},
},
};
Or through the CLI: npx webpack serve --no-client-overlay
Taken from here: https://webpack.js.org/configuration/dev-server/#overlay
To avoid bundling in this large dev library in prod you can use a
dynamic import:
yarn add react-error-overlay
if (process.env.NODE_ENV === 'development') {
import('react-error-overlay').then(m => {
m.stopReportingRuntimeErrors();
});
}
In config/webpack.config.dev.js, comment out the following line in the entry array
require.resolve('react-dev-utils/webpackHotDevClient'),
And uncomment these two:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
I think this makes sense but sometimes when you are typing and have an error boundary then the overlay pops up with each character stroke and is annoying. I can remove the handler I suppose.
In the file webpack.config.js, comment the line:
// require.resolve('react-dev-utils/webpackHotDevClient'),
And uncomment:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
In the file webpackDevServer.config.js, comment:
// transportMode: 'ws',
// injectClient: false,
hide it with adblock
It is very useful to disable the errors temporarily so you don't have to comment/uncomment parts of your code that is not used at the moment, but it definitely will be after a few more changes.
The quickest solution is to just use adblock to pick the iframe with the errors.
It is trivial to toggle it with a single click to enable / disable adblock on the given page.
It is counter-intuitive to overlay the rendered page in development mode just to inform the user the newly imported objects or the recenlty created variables are not yet used.
I would say it is an arrow to the knee for beginners :)
If you are using the latest version with react-script >= 5.0.0, you just need to add an environment variable ESLINT_NO_DEV_ERRORS=true.
https://create-react-app.dev/docs/advanced-configuration
There is no option for it.
But, if you strongly wanted to disable modal window, just comment out this line
https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-dev-utils/webpackHotDevClient.js#L173
I had the same problem and I have been digging in the create-react-app source for a long time. I can't find any way to disable it, but you can remove the listeners it puts in place, which effectivly stops the error message. Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in place by unhandledError.js. You can also close the error message by clicking the x in the upper right corner of the screen, and then you should see your message.
Gathering answers here together, I managed to solve this issue for myself.
Here is the package I created for this.
The css fix has changed:
body > hmr-error-overlay {
display: none;
}
I'll also recommend adding this block on init so that you don't get silent errors:
window.addEventListener('error', function (e) {
console.error(e.message);
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
Related
I've been looking through the vuelayers documentation and have found little info on to use the vl-style-icon module, which is quite important if you want to create icons on your vuelayer map.
I'm pretty sure I have proper syntax when it comes to using it but marker.png won't load in through it. I've tried accessing it as just a normal image and it works fine so it is to my assumption that it's something with my syntax.
Here is my code:
<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
<vl-feature v-for="crime in crimePoints" :key="crime.id">
<vl-geom-point :coordinates="crime.coords"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</vl-feature>
<vl-layer-tile>
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
</vl-map>
</template>
vl-style-box and vl-style-icon are the main points here. I have also checked to see if the points come up without vl-style-box and they do. What could be wrong with my code?
You can try like this:
<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
If you used Vue CLI to create your vue project include this in your vue.config.js file. First section tells webpack to parse url attribute on custom tags other than what is already configured (Source).
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').tap(options => {
options.transformAssetUrls = {
'vl-style-icon': 'src',
...options.transformAssetUrls,
};
return options;
});
}
}
Run the following command to verify the correct vue-loader configuration is there
Source
vue inspect > output.js
I use the dynamic source for vue-webpack images in nuxt :src="require('path/to/image' + dynamic.variable)" in my project navbar. If the users substitute their image through a form which refetches their information and deletes their previous image I get a webpack error module (img) not found (it does not find the new one): is there a way to solve this, like wait for webpack HRM to finish?
I tried setting up a setTimeout() of one second before user re-fetch and it works, but I don't like a random waiting, I'd use a promise or a sync dynamic, the point is webpack hot reload is not controlled by my functions.. I also tried with setting the dynamic path as a computed: but it doesn't fix.
My image tag:
<img v-if="this.$auth.user.image" class="userlogo m-2 rounded-circle" :src="require('#assets/images/users/' + this.$auth.user.image)" alt="usrimg">
My Useredit page methods:
...
methods: {
userEdit() {
//uploads the image
if (this.formImageFilename.name) {
let formImageData = new FormData()
formImageData.append('file', this.formImageFilename)
axios.post('/db/userimage', formImageData, { headers: { 'Content-Type': 'multipart/form-data' } })
// once it has uploaded the new image, it deletes the old one
.then(res=>{this.deleteOldImage()})
.catch(err=>{console.log(err)})
}else{
this.userUpdate() //if no new image has to be inserted, it proceeds to update the user information
}
},
deleteOldImage(){
if(this.$auth.user.image){axios.delete('/db/userimage', {data: {delimage: this.$auth.user.image}} )}
console.log(this.$auth.user.image + ' deleted')
this.userUpdate() // it has deleted the old image so it proceeds to update the user information
},
userUpdate(){
axios.put(
'/db/user', {
id: this.id,
name: this.formName,
surname: this.formSurname,
email: this.formEmail,
password: this.formPassword,
image: this.formImageFilename.name,
})
.then(() => { console.log('User updated'); this.userReload()}) // reloads the updated user information
.catch(err => {console.log(err)} )
},
userReload(){
console.log('User reloading..')
this.$auth.fetchUser()
.then(() => { console.log('User reloaded')})
.catch(err => {console.log(err)} )
},
}
...
the problem happens after "console.log('User reloading..')" and before "console.log('User reloaded');", it is not related to the file upload nor the server response. I broke a single function in many little ones just to check the function progression and its asynchronous dynamics but the only one that is not manageable is the webpack hot reload :/
I'd like the users to upload their images and see their logo in the Navbar appear updated after submitting the form.
First of all, as somebody told you in the comments, webpack hmr shouldn't be used for production.
In Nuxt, everything that you reference from the assets folder will be optimized and bundled into the project package. So the ideal use case for this folder is all assets that can be packaged and optimized, and most likely won't change like fonts, css, background images, icons, etc.
Then, require is called only once by webpack when it is either building the site for local development or building the site for generating a production package. The problem in your case is that you delete the original file while you're in development and webpack tries to read it and fails.
In the case of these images that the user uploads, I think you should use the static folder instead and instead of using require you'll have to change the :src with
:src="'/images/users/' + this.$auth.user.image"
Let me know if this helps.
Okay, I probably solved it.
HMR: you are of course right. Thank you for pointing out, I am sorry, I am a beginner and I try to understand stuff along the way.
Aldarund, thank you, your idea of not changing the path and cache it client side.. I am too noob to understand how I could implement it ( :) ) but it gave me a good hint: the solution was to keep the image name as the user id + the '.png' extension and to manage the image with jimp so that the image name, extension and file type are always the same, and with or without webpack compiling the new path, I always have the correct require().
Jair, thank you for the help, I didn't follow that road, but I will keep it as a second chance if my way creates errors. Just to be specific: the error comes when it does not find -and asks for the name of- the NEW image, not the OLD one, as I wrote in my question: it happens because the fetchUser() functions reloads the user information including the new image name.
Do you guys see any future problems in my methodology?
Really thank you for your answers. I am learning alone and it's great to receive support.
I've a webpage , where I've included the requirejs via script tag like -
<script data-main="/media/course-book-app/courses.require.main.js" src="/media/common/vendor/requirejs/require.js"></script>
On Safari browser, I'm getting error like -
What is causing this issue?
This issue is very frequent on Safari but on chrome it is less frequent.
Testing URL
From https://requirejs.org/docs/errors.html#scripterror (which is linked right there in the error). Follow the instructions and look at the script that caused the error
This occurs when the script.onerror function is triggered in a
browser. This usually means there is a JavaScript syntax error or
other execution problem running the script. To fix it, examine the
script that generated the error in a script debugger.
This error may not show up in IE, just other browsers, and instead, in
IE you may see the No define call for ... error when you see "Script
error". This is due to IE's quirks in detecting script errors.
Here is the way to use requirejs correctly. This ensures the configuration gets loaded before loading any module -
define('requireconfig', function(){
require.config({
paths: {
"jquery": "/common/vendor/jquery/jquery-1.9.1.min",
"backbone": "/common/vendor/backbone/backbone.min-1.1.2",
"underscore": mediaPath + "/common/vendor/underscore/underscore.min-1.7.0"
},
shim: {
backbone : {
deps: ["jquery","underscore"],
exports: "Backbone"
},
}
});
});
define('main', ['requireconfig'], function () {
'use strict';
});
// loading main module which loads the requirejs configuration
requirejs(['main'],()=>{
requirejs(['jquery'], ($)=>{//jquery loaded});
}, ()=>{//error loading module})
My app needs a login page from external url.
The login logic that I thought is :
Steps
Open external url when ionic is launched
Once user logged in, move back to internal app using deep link (ex : myapp://main)
I tested step 2 which is deep link. Works well.
So, I have to make step 1 now.
First, I tested with iframe.
And got Refused to display 'https:....' in a frame because it set 'X-Frame-Options' to 'deny'. error. Seems this needs a server-side configuration. But anyway we don't want to use this way. iframe feels like a hack.
Second, I tried location.href = this.loginUrl;.
Worked well in chrome browser but when I built in iOS simulator, I see address bar, tool bar, and close button.
I don't like this because I don't want user to close login page or to change url address.
Third, tried window.open(this.loginUrl, '_self', 'location=no').
Same result as second.
Fourth, tried to use ionic version of in-app-browserplugin.
But the result is same as second and third.
It still opens a browser with address bar, tool bar even it shows 'back to myApp'. So user would feel this is out of app.
Check here, people are looking for the solution still.
After spending a day, I don't even know if there is option I can try.
I could resolve by doing this. But in real device.
Xcode iPhone emulators don't have open in-app-browser but built-in browser.
browser:any;
this.platform.ready().then(() => {
this.browser = this.iab.create(this.loginUrl, '_blank', 'location=no,toolbar=no');
});
You can solve this by installing a cordova plugin called cordova-plugin-inappbrowser. Execute the following commands:
ionic plugin add cordova-plugin-inappbrowser
npm install --save #ionic-native/in-app-browser
On your app.module.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and also add the following to your providers in app.module.ts
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Then on your home.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and inject it into the constructor like this
constructor(public navCtrl: NavController, private iab: InAppBrowser) {
}
then add the following method
ionViewDidLoad(){
this.iab.create('url', '_self', { location: 'no' }); }
Check the different options you have for this plugin here
For removing the address bar just use the option:
location: Set to yes or no to turn the InAppBrowser's location bar on or off.
This question is mostly particularly about phpunit_selenium2 extension (though the general ideas are welcome as well):
Let's say I have a page that fires an alert on the browser/tab closing event with something like this:
window.onbeforeunload = function() {
return 'Hello world!';
};
The test opens this page, performs some actions and according to the test scenario I need to open another url.
The issue is that the command
$this->url('/another/page/url');
waits for the page url to be changed and fails because it doesn't - since it's locked by the just appeared alert window: RuntimeException: Navigation failed with error code=3.
How would one solve that?
The ugly but the only solution I could think of:
try {
$this->url('/another/page/url');
} catch (RuntimeException $e) {}
$this->acceptAlert();