Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add client.overlay.runtimeErrors options #4773

Merged
23 changes: 17 additions & 6 deletions client-src/index.js
Expand Up @@ -115,12 +115,23 @@ self.addEventListener("beforeunload", () => {
status.isUnloading = true;
});

const trustedTypesPolicyName =
typeof options.overlay === "object" && options.overlay.trustedTypesPolicyName;

const overlay = createOverlay({
trustedTypesPolicyName,
});
const overlay = options.overlay

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@malcolm-kee this is not sufficient. You are only checking if options.overlay is truthy. All options need to be passed into the createOverlay() function. The overlay options are errors: boolean & warnings: boolean.

Then, the show() function in overlay.js needs to check if the type is "warning" or "error" and compare the passed options.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@crobinson42 good catch!

I just pushed a fix so that runtime error check the options as well.

For build error/warning, it's already handled:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Testa are failed, can you look what is wrong (no rush), I think today after rest we will fix all issues

? createOverlay(
typeof options.overlay === "object"
? {
trustedTypesPolicyName: options.overlay.trustedTypesPolicyName,
catchRuntimeError: options.overlay.errors,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also ideally we need a new option for such stuff, i.e. catchRuntimeError, because as you can see some application works in very differents envs and it can be errors outside own application

}
: {
trustedTypesPolicyName: false,
catchRuntimeError: options.overlay,
}
)
: {
send() {
// noop
},
};

const onSocketMessage = {
hot() {
Expand Down
37 changes: 20 additions & 17 deletions client-src/overlay.js
Expand Up @@ -78,6 +78,7 @@ function formatProblem(type, item) {
/**
* @typedef {Object} CreateOverlayOptions
* @property {string | null} trustedTypesPolicyName
* @property {boolean} [catchRuntimeError]
*/

/**
Expand Down Expand Up @@ -271,24 +272,26 @@ const createOverlay = (options) => {
hideOverlay: hide,
});

listenToRuntimeError((errorEvent) => {
// error property may be empty in older browser like IE
const { error, message } = errorEvent;
if (!error && !message) {
return;
}
const errorObject =
error instanceof Error ? error : new Error(error || message);
overlayService.send({
type: "RUNTIME_ERROR",
messages: [
{
message: errorObject.message,
stack: parseErrorToStacks(errorObject),
},
],
if (options.catchRuntimeError) {
listenToRuntimeError((errorEvent) => {
// error property may be empty in older browser like IE
const { error, message } = errorEvent;
if (!error && !message) {
return;
}
const errorObject =
error instanceof Error ? error : new Error(error || message);
overlayService.send({
type: "RUNTIME_ERROR",
messages: [
{
message: errorObject.message,
stack: parseErrorToStacks(errorObject),
},
],
});
});
});
}

return overlayService;
};
Expand Down