mirror of
https://github.com/facebook/react.git
synced 2026-02-24 04:33:04 +00:00
cc93a85332
InvokeGuardedCallback is now implemented with the browser fork done at error-time rather than module-load-time. Originally it also tried to freeze the window/document references to avoid mismatches in prototype chains when testing React in different documents however we have since updated our tests to not do this and it was a test only feature so I removed it.
216 lines
9.0 KiB
JavaScript
216 lines
9.0 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
let fakeNode: Element = (null: any);
|
|
if (__DEV__) {
|
|
if (
|
|
typeof window !== 'undefined' &&
|
|
typeof window.dispatchEvent === 'function' &&
|
|
typeof document !== 'undefined' &&
|
|
// $FlowFixMe[method-unbinding]
|
|
typeof document.createEvent === 'function'
|
|
) {
|
|
fakeNode = document.createElement('react');
|
|
}
|
|
}
|
|
|
|
export default function invokeGuardedCallbackImpl<Args: Array<mixed>, Context>(
|
|
this: {onError: (error: mixed) => void},
|
|
name: string | null,
|
|
func: (...Args) => mixed,
|
|
context: Context,
|
|
): void {
|
|
if (__DEV__) {
|
|
// In DEV mode, we use a special version
|
|
// that plays more nicely with the browser's DevTools. The idea is to preserve
|
|
// "Pause on exceptions" behavior. Because React wraps all user-provided
|
|
// functions in invokeGuardedCallback, and the production version of
|
|
// invokeGuardedCallback uses a try-catch, all user exceptions are treated
|
|
// like caught exceptions, and the DevTools won't pause unless the developer
|
|
// takes the extra step of enabling pause on caught exceptions. This is
|
|
// unintuitive, though, because even though React has caught the error, from
|
|
// the developer's perspective, the error is uncaught.
|
|
//
|
|
// To preserve the expected "Pause on exceptions" behavior, we don't use a
|
|
// try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake
|
|
// DOM node, and call the user-provided callback from inside an event handler
|
|
// for that fake event. If the callback throws, the error is "captured" using
|
|
// event loop context, it does not interrupt the normal program flow.
|
|
// Effectively, this gives us try-catch behavior without actually using
|
|
// try-catch. Neat!
|
|
|
|
// fakeNode signifies we are in an environment with a document and window object
|
|
if (fakeNode) {
|
|
const evt = document.createEvent('Event');
|
|
|
|
let didCall = false;
|
|
// Keeps track of whether the user-provided callback threw an error. We
|
|
// set this to true at the beginning, then set it to false right after
|
|
// calling the function. If the function errors, `didError` will never be
|
|
// set to false. This strategy works even if the browser is flaky and
|
|
// fails to call our global error handler, because it doesn't rely on
|
|
// the error event at all.
|
|
let didError = true;
|
|
|
|
// Keeps track of the value of window.event so that we can reset it
|
|
// during the callback to let user code access window.event in the
|
|
// browsers that support it.
|
|
const windowEvent = window.event;
|
|
|
|
// Keeps track of the descriptor of window.event to restore it after event
|
|
// dispatching: https://github.com/facebook/react/issues/13688
|
|
const windowEventDescriptor = Object.getOwnPropertyDescriptor(
|
|
window,
|
|
'event',
|
|
);
|
|
|
|
const restoreAfterDispatch = () => {
|
|
// We immediately remove the callback from event listeners so that
|
|
// nested `invokeGuardedCallback` calls do not clash. Otherwise, a
|
|
// nested call would trigger the fake event handlers of any call higher
|
|
// in the stack.
|
|
fakeNode.removeEventListener(evtType, callCallback, false);
|
|
|
|
// We check for window.hasOwnProperty('event') to prevent the
|
|
// window.event assignment in both IE <= 10 as they throw an error
|
|
// "Member not found" in strict mode, and in Firefox which does not
|
|
// support window.event.
|
|
if (
|
|
typeof window.event !== 'undefined' &&
|
|
window.hasOwnProperty('event')
|
|
) {
|
|
window.event = windowEvent;
|
|
}
|
|
};
|
|
|
|
// Create an event handler for our fake event. We will synchronously
|
|
// dispatch our fake event using `dispatchEvent`. Inside the handler, we
|
|
// call the user-provided callback.
|
|
// $FlowFixMe[method-unbinding]
|
|
const funcArgs = Array.prototype.slice.call(arguments, 3);
|
|
const callCallback = () => {
|
|
didCall = true;
|
|
restoreAfterDispatch();
|
|
// $FlowFixMe[incompatible-call] Flow doesn't understand the arguments splicing.
|
|
func.apply(context, funcArgs);
|
|
didError = false;
|
|
};
|
|
|
|
// Create a global error event handler. We use this to capture the value
|
|
// that was thrown. It's possible that this error handler will fire more
|
|
// than once; for example, if non-React code also calls `dispatchEvent`
|
|
// and a handler for that event throws. We should be resilient to most of
|
|
// those cases. Even if our error event handler fires more than once, the
|
|
// last error event is always used. If the callback actually does error,
|
|
// we know that the last error event is the correct one, because it's not
|
|
// possible for anything else to have happened in between our callback
|
|
// erroring and the code that follows the `dispatchEvent` call below. If
|
|
// the callback doesn't error, but the error event was fired, we know to
|
|
// ignore it because `didError` will be false, as described above.
|
|
let error;
|
|
// Use this to track whether the error event is ever called.
|
|
let didSetError = false;
|
|
let isCrossOriginError = false;
|
|
|
|
const handleWindowError = (event: ErrorEvent) => {
|
|
error = event.error;
|
|
didSetError = true;
|
|
if (error === null && event.colno === 0 && event.lineno === 0) {
|
|
isCrossOriginError = true;
|
|
}
|
|
if (event.defaultPrevented) {
|
|
// Some other error handler has prevented default.
|
|
// Browsers silence the error report if this happens.
|
|
// We'll remember this to later decide whether to log it or not.
|
|
if (error != null && typeof error === 'object') {
|
|
try {
|
|
error._suppressLogging = true;
|
|
} catch (inner) {
|
|
// Ignore.
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Create a fake event type.
|
|
const evtType = `react-${name ? name : 'invokeguardedcallback'}`;
|
|
|
|
// Attach our event handlers
|
|
window.addEventListener('error', handleWindowError);
|
|
fakeNode.addEventListener(evtType, callCallback, false);
|
|
|
|
// Synchronously dispatch our fake event. If the user-provided function
|
|
// errors, it will trigger our global error handler.
|
|
evt.initEvent(evtType, false, false);
|
|
fakeNode.dispatchEvent(evt);
|
|
if (windowEventDescriptor) {
|
|
Object.defineProperty(window, 'event', windowEventDescriptor);
|
|
}
|
|
|
|
if (didCall && didError) {
|
|
if (!didSetError) {
|
|
// The callback errored, but the error event never fired.
|
|
// eslint-disable-next-line react-internal/prod-error-codes
|
|
error = new Error(
|
|
'An error was thrown inside one of your components, but React ' +
|
|
"doesn't know what it was. This is likely due to browser " +
|
|
'flakiness. React does its best to preserve the "Pause on ' +
|
|
'exceptions" behavior of the DevTools, which requires some ' +
|
|
"DEV-mode only tricks. It's possible that these don't work in " +
|
|
'your browser. Try triggering the error in production mode, ' +
|
|
'or switching to a modern browser. If you suspect that this is ' +
|
|
'actually an issue with React, please file an issue.',
|
|
);
|
|
} else if (isCrossOriginError) {
|
|
// eslint-disable-next-line react-internal/prod-error-codes
|
|
error = new Error(
|
|
"A cross-origin error was thrown. React doesn't have access to " +
|
|
'the actual error object in development. ' +
|
|
'See https://reactjs.org/link/crossorigin-error for more information.',
|
|
);
|
|
}
|
|
this.onError(error);
|
|
}
|
|
|
|
// Remove our event listeners
|
|
window.removeEventListener('error', handleWindowError);
|
|
|
|
if (didCall) {
|
|
return;
|
|
} else {
|
|
// Something went really wrong, and our event was not dispatched.
|
|
// https://github.com/facebook/react/issues/16734
|
|
// https://github.com/facebook/react/issues/16585
|
|
// Fall back to the production implementation.
|
|
restoreAfterDispatch();
|
|
// we fall through and call the prod version instead
|
|
}
|
|
}
|
|
// We only get here if we are in an environment that either does not support the browser
|
|
// variant or we had trouble getting the browser to emit the error.
|
|
// $FlowFixMe[method-unbinding]
|
|
const funcArgs = Array.prototype.slice.call(arguments, 3);
|
|
try {
|
|
// $FlowFixMe[incompatible-call] Flow doesn't understand the arguments splicing.
|
|
func.apply(context, funcArgs);
|
|
} catch (error) {
|
|
this.onError(error);
|
|
}
|
|
} else {
|
|
// $FlowFixMe[method-unbinding]
|
|
const funcArgs = Array.prototype.slice.call(arguments, 3);
|
|
try {
|
|
// $FlowFixMe[incompatible-call] Flow doesn't understand the arguments splicing.
|
|
func.apply(context, funcArgs);
|
|
} catch (error) {
|
|
this.onError(error);
|
|
}
|
|
}
|
|
}
|