Website displays empty page when cookies are disabled in Firefox #14

bvaughn · 2017-10-06T17:28:26Z

When using a Firefox with "Cookie Whitelist" plugin (and enabled, preventing cookie storage), loading https://reactjs.org/ flashes the page's content then removes all content in the body, producing an empty white page with the following content:

<body>
  <div id="___gatsby">
  </div>
</body>

When loading the page the content initially loads, flashes, and then a security exception is thrown in the console and all content is removed from the page:

DOMException [SecurityError: "The operation is insecure."
code: 18
nsresult: 0x80530012
location: https://reactjs.org/commons-2034d1df9ebd047740fd.js:4]

If the "Cookie Whitelist" is set to allow temporary cookies, the page loads normally.

Copied from facebook/react/issues/11015

The text was updated successfully, but these errors were encountered:

tylercrosse · 2017-10-06T18:18:09Z

I experienced a similar issue of the page flashing rendered content and then going blank. The chrome extension Fair AdBlockr was responsible and whitelisting the site solved the problem. (summarized from original description filed on facebook/react#11015 )

On the blank page the react dev tools only show these 4 components & their children:

<t code ="class HelloMessage extends React.Component { ren...">...</t>
<t code ="class Timer extends React.Component { constructo..">...</t>
<t code ="class TodoApp extends React.Component { construc..">...</t>
<t code ="class MarkdownEditor extends React.Component { c..">...</t>

I also get the following errors logged to the console

react-dom.production.min.js:187 ReferenceError: docsearch is not defined
    at t.componentDidMount (component---src-layouts-index-js-673385803e28183fd482.js:2)
    at commitLifeCycles (react-dom.production.min.js:169)
    at n (react-dom.production.min.js:180)
    at u (react-dom.production.min.js:183)
    at c (react-dom.production.min.js:184)
    at h (react-dom.production.min.js:188)
    at m (react-dom.production.min.js:187)
    at Object.updateContainer (react-dom.production.min.js:248)
    at react-dom.production.min.js:254
    at Object.unbatchedUpdates (react-dom.production.min.js:190)
d @ react-dom.production.min.js:187
n @ react-dom.production.min.js:181
u @ react-dom.production.min.js:183
c @ react-dom.production.min.js:184
h @ react-dom.production.min.js:188
m @ react-dom.production.min.js:187
updateContainer @ react-dom.production.min.js:248
(anonymous) @ react-dom.production.min.js:254
unbatchedUpdates @ react-dom.production.min.js:190
pt @ react-dom.production.min.js:254
render @ react-dom.production.min.js:255
(anonymous) @ production-app.js:175
setTimeout (async)
(anonymous) @ ready.js:27
(anonymous) @ production-app.js:174
d @ loader.js:283
(anonymous) @ loader.js:295
(anonymous) @ loader.js:95
(anonymous) @ loader.js:78
(anonymous) @ home.js?e849:9
r @ patch.js:18
(anonymous) @ patch.js:39
window.webpackJsonp @ bootstrap 204fe8abcae5944a97df:20
(anonymous) @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:1

component---src-templates-home-js-cacc940266ddbdfb25ea.js:11 ReferenceError: Babel is not defined
    at y (component---src-templates-home-js-cacc940266ddbdfb25ea.js:11)
    at t._updateState (component---src-templates-home-js-cacc940266ddbdfb25ea.js:11)
    at new t (component---src-templates-home-js-cacc940266ddbdfb25ea.js:11)
    at constructClassInstance (react-dom.production.min.js:140)
    at beginWork (react-dom.production.min.js:150)
    at s (react-dom.production.min.js:182)
    at u (react-dom.production.min.js:183)
    at c (react-dom.production.min.js:184)
    at h (react-dom.production.min.js:188)
    at m (react-dom.production.min.js:187)
t._updateState @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:11
t @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:11
constructClassInstance @ react-dom.production.min.js:140
beginWork @ react-dom.production.min.js:150
s @ react-dom.production.min.js:182
u @ react-dom.production.min.js:183
c @ react-dom.production.min.js:184
h @ react-dom.production.min.js:188
m @ react-dom.production.min.js:187
updateContainer @ react-dom.production.min.js:248
(anonymous) @ react-dom.production.min.js:254
unbatchedUpdates @ react-dom.production.min.js:190
pt @ react-dom.production.min.js:254
render @ react-dom.production.min.js:255
(anonymous) @ production-app.js:175
setTimeout (async)
(anonymous) @ ready.js:27
(anonymous) @ production-app.js:174
d @ loader.js:283
(anonymous) @ loader.js:295
(anonymous) @ loader.js:95
(anonymous) @ loader.js:78
(anonymous) @ home.js?e849:9
r @ patch.js:18
(anonymous) @ patch.js:39
window.webpackJsonp @ bootstrap 204fe8abcae5944a97df:20
(anonymous) @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:1

react-dom.production.min.js:185 Uncaught ReferenceError: docsearch is not defined
    at t.componentDidMount (component---src-layouts-index-js-673385803e28183fd482.js:2)
    at commitLifeCycles (react-dom.production.min.js:169)
    at n (react-dom.production.min.js:180)
    at u (react-dom.production.min.js:183)
    at c (react-dom.production.min.js:184)
    at h (react-dom.production.min.js:188)
    at m (react-dom.production.min.js:187)
    at Object.updateContainer (react-dom.production.min.js:248)
    at react-dom.production.min.js:254
    at Object.unbatchedUpdates (react-dom.production.min.js:190)
t.componentDidMount @ component---src-layouts-index-js-673385803e28183fd482.js:2
commitLifeCycles @ react-dom.production.min.js:169
n @ react-dom.production.min.js:180
u @ react-dom.production.min.js:183
c @ react-dom.production.min.js:184
h @ react-dom.production.min.js:188
m @ react-dom.production.min.js:187
updateContainer @ react-dom.production.min.js:248
(anonymous) @ react-dom.production.min.js:254
unbatchedUpdates @ react-dom.production.min.js:190
pt @ react-dom.production.min.js:254
render @ react-dom.production.min.js:255
(anonymous) @ production-app.js:175
setTimeout (async)
(anonymous) @ ready.js:27
(anonymous) @ production-app.js:174
d @ loader.js:283
(anonymous) @ loader.js:295
(anonymous) @ loader.js:95
(anonymous) @ loader.js:78
(anonymous) @ home.js?e849:9
r @ patch.js:18
(anonymous) @ patch.js:39
window.webpackJsonp @ bootstrap 204fe8abcae5944a97df:20
(anonymous) @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:1

The new page is super fast when it works! Hope this helps debug the issue.

ishankbahl · 2017-10-09T16:27:20Z

While reproducing this error in development, got the following error in console

Where will the error boundary have to be added to tackle this? (maybe at .cache/root.js:120)

SadPandaBear · 2017-10-19T15:26:53Z

Maybe we can check if docsearch is unavailable and change the layout screen e.g asking the user to whitelist the page, clean site data, etc?

I did it here by checking if the variable is available on window, maybe I can open a PR? I think this can help #9 as well.

I still need the layout and the message to display in this case.

bvaughn · 2017-10-19T15:59:26Z

I think just gracefully disabling the site-search feature is probably a safer bet. This would enable people to access the site docs even if the CDN was down, or they didn't want to add the site to the whitelist, etc.

SadPandaBear · 2017-10-19T16:15:13Z

I think I got it.

Ok, in this case it's just a different behavior from i've mentalized. Instead of displaying a new screen, It should just hide the algolia docsearch form away. Tell me what you think on passing a prop to the Header component that says if the global variable docsearch is defined?

bvaughn · 2017-10-19T16:31:52Z

Yeah, something along those lines.

Wrap the search input in its own React component
Determine if search functionality is disabled (or if docsearch failed to load)
Render the component in a disabled state if so

Haven't thought a ton about it yet :)

SadPandaBear · 2017-10-19T16:33:05Z

Can you assign this to me? :)

bvaughn · 2017-10-19T16:38:30Z

It's all yours, @SadPandaBear. (I can't actually assign to you b'c GitHub won't let me, but I've marked it "in progress" so no one else will take it.)

If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

bvaughn · 2017-10-19T18:24:32Z

Removing the in-progress label since the docsearch related changes don't resolve the issue originally reported :)

bvaughn · 2017-10-24T21:36:28Z

Marking as in-progress for @emmafallancy 👍

efallancy · 2017-10-26T06:38:52Z

@bvaughn I've made a fix regarding the error when cookies disabled directly at Gatsby #2614

I am not particularly sure if there's any way that error boundary would be possible to do the fix on preventing the page being unmounted since the error itself happened within the ScrollContext, which is being used in router middleware. I've tried implementing the error boundary in within the pages too but it still couldn't capture the error. Also, I could possibly overlook on this if anyone has any clue how to prevent it.

Let me know what you have in mind 😃

bvaughn · 2017-11-02T14:19:00Z

Thanks for all of your hard work on this issue, @emmafallancy.

efallancy · 2017-11-02T23:11:23Z

@bvaughn No probs 👍 Glad that it worked well

* Typo fix in blog content (reactjs#1651) "Recommendation" instead of "Recomendation". * Just throw * Fix line numbers

bvaughn added difficulty: medium type: website labels Oct 6, 2017

bvaughn mentioned this issue Oct 6, 2017

reactjs.org website displays empty page when cookies are disabled in Firefox facebook/react#11015

Closed

bvaughn mentioned this issue Oct 6, 2017

Add error boundaries and exception tracking to the website #9

Open

bvaughn mentioned this issue Oct 10, 2017

Ad Blocker crashes the page #103

Closed

bvaughn added the in-progress label Oct 19, 2017

SadPandaBear mentioned this issue Oct 19, 2017

Disable Search Box if CDN is down (#9) #186

Merged

bvaughn removed the in-progress label Oct 19, 2017

bvaughn added the in-progress label Oct 24, 2017

bvaughn mentioned this issue Oct 25, 2017

reactjs.org not work #207

Closed

efallancy mentioned this issue Oct 30, 2017

Update gatsby package through yarn upgrade-interactive #222

Merged

bvaughn closed this as completed Nov 2, 2017

gaearon pushed a commit to gaearon/reactjs.org that referenced this issue Feb 9, 2019

Sync with reactjs.org @ e3cf542 (reactjs#14)

55deb6b

* Typo fix in blog content (reactjs#1651) "Recommendation" instead of "Recomendation". * Just throw * Fix line numbers

BetterZxx pushed a commit to BetterZxx/react.dev that referenced this issue Mar 21, 2023

docs(cn): translate basic/state_and_lifecycle (reactjs#14)

f1bc3a7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Website displays empty page when cookies are disabled in Firefox #14

Website displays empty page when cookies are disabled in Firefox #14

bvaughn commented Oct 6, 2017

tylercrosse commented Oct 6, 2017

ishankbahl commented Oct 9, 2017

SadPandaBear commented Oct 19, 2017 •

edited

bvaughn commented Oct 19, 2017

SadPandaBear commented Oct 19, 2017 •

edited

bvaughn commented Oct 19, 2017 •

edited

SadPandaBear commented Oct 19, 2017

bvaughn commented Oct 19, 2017

bvaughn commented Oct 19, 2017

bvaughn commented Oct 24, 2017

efallancy commented Oct 26, 2017

bvaughn commented Nov 2, 2017

efallancy commented Nov 2, 2017

Website displays empty page when cookies are disabled in Firefox #14

Website displays empty page when cookies are disabled in Firefox #14

Comments

bvaughn commented Oct 6, 2017

tylercrosse commented Oct 6, 2017

ishankbahl commented Oct 9, 2017

SadPandaBear commented Oct 19, 2017 • edited

bvaughn commented Oct 19, 2017

SadPandaBear commented Oct 19, 2017 • edited

bvaughn commented Oct 19, 2017 • edited

SadPandaBear commented Oct 19, 2017

bvaughn commented Oct 19, 2017

bvaughn commented Oct 19, 2017

bvaughn commented Oct 24, 2017

efallancy commented Oct 26, 2017

bvaughn commented Nov 2, 2017

efallancy commented Nov 2, 2017

SadPandaBear commented Oct 19, 2017 •

edited

SadPandaBear commented Oct 19, 2017 •

edited

bvaughn commented Oct 19, 2017 •

edited