* Rewrite DOMPropertyOperations-test in terms of public API
* Add more assertions
I don't understand what the jsdom comments are about since they pass.
* Address review feedback
* Remove PooledClass from FallbackCompositionState
The only module that uses FallbackCompositonState is BeforeInputEventPlugin. The way its structured means there can only be a single instance of FallbackCompositionState at any given time (stored in a local variable at the top-level) so we don't really need pooling here at all. Instead, a single object is now stored in FallbackCompositionState, and access (initializing, reseting, getting data) is gaurded by the exported helper object.
* Use new FallbackCompositionState API in BeforeInputEventPlugin
* Implement event-specific pooling in SyntheticEvent
* Remove PooledClass from TopLevelCallbackBookKeeping
* Update results.json
* Add pooled event test fixtures (#1)
* Fix fixture lint
This prevents the captured error from becoming separated from the component stack if other errors (or console.error calls) are made between them, eg a component errors during unmount.
* Add DOM fixture for cross-origin errors
* Use a custom error object in place of cross-origin errors
Cross-origin errors aren't accessible by React in DEV mode because we
catch errors using a global error handler, in order to preserve the
"Pause on exceptions" behavior of the DevTools. When this happens, we
should use a custom error object that explains what happened.
For uncaught errors, the actual error message is logged to the console
by the browser, so React should skip logging the message again.
* Add test case that demonstrates errors are logged even if they're caught
* Don't double log error messages in DEV
In DEV, the browser always logs errors thrown inside React components,
even if the originating update is wrapped in a try-catch, because of the
dispatchEvent trick used by invokeGuardedCallback. So the error logger
should not log the message again.
* Fix tests
* Change how error is printed in DEV and PROD
In DEV, we don't want to print the stack trace because the browser already always prints it.
We'll just print the component stack now.
In PROD, we used to omit the JS error message. However we *do* want to show it because
if the application swallows the error, the browser will *not* print it. In DEV it works
only because of the fake event trick. So in PROD we will always print the underlying error
by logging the error object directly. This will show both the message and the JS stack.
* Make the wording tighter and emphasize the real error is above
There's a few goals in the rewording:
* Make it tighter using line breaks between sentences.
* Make it slightly less patronizing ("You should fix it" => "You can find its details in an earlier log")
* ^^ This also helps highlight that the real error message and stack is above
* Group subsections: intro (there's an error), component stack, and final addendum about error boundaries
* ^^ Otherwise people might think error boundaries are part of the reason they have an error
* Make it clear "located at" is not the stacktrace. Otherwise it feels confusing. This makes it clearer you should still look for stack trace (with other details) above and introduces the concept of component stack.
* Make the message shorter
* Unused variables
* Fix an error caused by fixing lint
* One more bikeshed
* Fix fixture
* Remove unused file
* Concise wording
* Unused variables
* Upgrade DOM Fixtures
Upgrade to react-scripts v1 and include required polyfills for older
browsers
* Remove ChangeEvent polyfills for unsupported browsers
* Use single entry point for SSR via browser field
* Add server.browser entry point and smoke tests
* Tweak bundle naming
* Fix import
* Re-record
* Fix the robot nits
* Add resetModules for some extra isolation
This parameter was accidentally omitted before. Leland reported it because it impacts Enzyme.
I also added a basic lifecycle parameter test for shallow renderer.
Fiber doesn't schedule animation callbacks anymore (though it does use
the browser's requestAnimationFrame to polyfill requestIdleCallback).
This removes the rAF export from ReactDOMFrameScheduling, since it's not
being used.
* Remove hydrate() warning about empty container
It used to have false positives for cases where we legitimately don't render anything.
* Use existing constant
* Test empty string case using its parent
* Add ReactDOM.hydrate()
* Deprecate ReactDOM.render() hydration in favor of ReactDOM.hydrate()
* Downgrade the warning level to console.warn()
* Warn when hydrate() is called with empty container
* Don't catch the assertion about missing errors
Previously, even if an error was not thrown, the assertion about this was ignored.
This fix exposes two failing cases in new SSR that weren't failing in Stack.
* Add child context validation to new SSR
This fixes the error cases that were silently failing before but are now exposed.
* fix(*): fix renderToString fails with array type children when react-dom/server render
* Add an integration test that verify renderToString with array type children
* Add integration test to renderToString with array type child
* Update integration test to renderToString with array type child
* fix renderToString fails with array type children when react-dom/server render
* Update integration test to renderToString with array type child
* Add to iterate that are not arrays
* Add the validation react element
* Improve an integration test of server renderToString with array type
* prettier
* prettier
* Make SSR can handle a single array element and nested array
* prettier
* Change integeration test description
* modified: src/renderers/dom/ReactDOMNodeStreamRenderer.js
* Make invariants consistent
* Gate outdated test itself by feature flag
* Change test to make sense both with old and new code
* Test more cases
The critical semantics are resilient to browser flakiness, so we don't
need this feature test.
Also added comments explaining how invokeGuardedCallback dev works.
* Deduplicate unknown DOM tag warning
* Don't warn about <time> because it is widely used
Other browsers implement it, and Chrome will ship it soon too.
* Use hasOwnProperty
* Fix corner case: hasOwnProperty as a tag
* Update comments to be more correct factually
invokeGuardedCallback is a function we use in place of try-catch
statement. It accepts a function, and if the function throws, it
captures the error. In production, the implementation is a normal try-
catch. In development, we swap out the prod implementation for a special
version designed to preserve "Pause on all exceptions" behavior of the
browser DevTools.
invokeGuardedCallbackDev works by dispatching an event to a dummy DOM
node and calling the provided function inside a handler for that event.
We also attach an error event handler to the window object. If the
function throws, the global event handler is called and we can access
the error.
The global event handler is added and removed right before and after the
fake event is dispatched. But if invokeGuardedCallbackDev is nested --
that is, if it's invoked inside the body of another
invokeGuardedCallbackDev -- multiple error event handlers will attached
simultaneously. We only want the handler that corresponds to the deepest
level to handle the error. So we keep track of a depth counter, and
within the event handler, we only handle the error if the current depth
matches the depth at the time the function was invoked.
The problem that we discovered, and that this PR fixes, is that the
depth counter is local to each renderer. So if you nest separate copies
of invokeGuardedCallback from separate renderers, each renderer will
have its own depth counter, and multiple error handlers will fire for a
single, nested error.