Website displays empty page when cookies are disabled in Firefox

[reactjs]

Website displays empty page when cookies are disabled in Firefox

[bvaughn]

Yeah, something along those lines.

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

Haven't thought a ton about it yet :)

[tylercrosse]

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]

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]

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]

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]

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?

[SadPandaBear]

Can you assign this to me? :)

[bvaughn]

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]

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

[bvaughn]

Marking as in-progress for @emmafallancy 👍

[efallancy]

@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]

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

[efallancy]

@bvaughn No probs 👍 Glad that it worked well