GitHub user benkeen opened a pull request:
https://github.com/apache/couchdb-fauxton/pull/547
Add DOM check before mounting/unmounting React components
The recent API Bar refactor unveiled a rather neat problem that
showed up in the Dashboard only. The Replication page failed to
load and threw a React "Invariant Violation" error which we've
seen show up from time to time but couldn't yet reproduce. What
was happening was that when attempting to mount the component,
the DOM element just didn't exist. The same problem
could occur when unmounting.
Now to go down the rabbithole! This may get boring, be warned...
The reason it occurred in the dash only is because some page
layouts don't contain the #api-navbar element. It looks like
all Fauxton pages do.
Adding in a DOM check to confirm the existence of the apibar
at this point...
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/fauxton/base.js#L64
... has no effect because the core routeObject uses the
`two_pane.html` layout template as a base template when loading,
and that DOES contain the element. But due to the complexity of
the way our pages load, that template gets loaded first, THEN
the route object's template gets loaded. So basically we don't
know for sure whether the element exists until the moment it's
inserted/removed, hence the checks added in this PR.
I dedided to throw a warning in these cases. Seems like it should
be caught.
This fix should solve all of those Invariant Violation errors
of this kind, not just the problem with the API Bar.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/benkeen/couchdb-fauxton
safety-check-add-remove-react-components
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/couchdb-fauxton/pull/547.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #547
----
commit 2b4841e5bd5d5ba0989c7e7cdbf49bd2ba8261da
Author: Ben Keen <[email protected]>
Date: 2015-10-02T18:51:18Z
Add DOM check before mounting/unmounting React components
The recent API Bar refactor unveiled a rather neat problem that
showed up in the Dashboard only. The Replication page failed to
load and threw a React "Invariant Violation" error which we've
seen show up from time to time but couldn't yet reproduce. What
was happening was that when attempting to mount the component,
the DOM element just didn't exist. The same problem
could occur when unmounting.
Now to go down the rabbithole! This may get boring, be warned...
The reason it occurred in the dash only is because some page
layouts don't contain the #api-navbar element. It looks like
all Fauxton pages do.
Adding in a DOM check to confirm the existence of the apibar
at this point...
https://github.com/apache/couchdb-fauxton/blob/master/app/addons/fauxton/base.js#L64
... has no effect because the core routeObject uses the
`two_pane.html` layout template as a base template when loading,
and that DOES contain the element. But due to the complexity of
the way our pages load, that template gets loaded first, THEN
the route object's template gets loaded. So basically we don't
know for sure whether the element exists until the moment it's
inserted/removed, hence the checks added in this PR.
I dedided to throw a warning in these cases. Seems like it should
be caught.
This fix should solve all of those Invariant Violation errors
of this kind, not just the problem with the API Bar.
----
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at [email protected] or file a JIRA ticket
with INFRA.
---
