Applied Graph Algorithms > Category Hierarchy > ebSocket connection failure

[AdrienLemaire]

In that online training course, we're being asked to use codesandbox.io and neo4jsandbox.com.

The exercise is about searching for businessses by name and category

1. In CodeSandbox Browser, click Business Search and then click the pane for selecting a category. You should see a very long list of categories.

In firefox, clicking the Business search returns a console error:

Error {stack: "Neo4jError: WebSocket connection failure. Due to security constraints in your web browser, the reason for the failure is not available to this Neo4j Driver. Please use your browsers development console to determine the root cause of the failure. Common reasons include the database being unavailable, using the wrong connection URL or temporary network problems. If you have enabled encryption, ensure your browser is configured to trust the certificate Neo4j is configured to use. WebSocket `readyState` is: 3
captureStacktrace@https://codesandbox.io/static/js/sandbox.741f3740d.js line 1 > eval:15607:15
Result@https://codesandbox.io/static/js/sandbox.741f3740d.js line 1 > eval:15473:19
_run@https://codesandbox.io/static/js/sandbox.741f3740d.js line 1 > eval:15955:14
run@https://codesandbox.io/static/js/sandbox.741f3740d.js line 1 > eval:15933:19
BusinessSearch/_this.fetchCategories@https://4le2m.csb.app/src/BusinessSearch.js:148:15
BusinessSearch@https://4le2m.csb.app/src/BusinessSearch.js:193:11
constructClassInstance@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12880:18
updateClassComponent@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17100:27
beginWork@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:18620:16
beginWork$1@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23179:14
performUnitOfWork@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22154:12
workLoopSync@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22130:22
performSyncWorkOnRoot@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21756:9
flushSyncCallbackQueueImpl/<@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11089:24
unstable_runWithPriority@https://4le2m.csb.app/node_modules/scheduler/cjs/scheduler.development.js:653:12
runWithPriority$1@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11039:10
flushSyncCallbackQueueImpl@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11084:24
flushSyncCallbackQueue@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11072:3
discreteUpdates$1@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21893:7
discreteUpdates@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:806:12
dispatchDiscreteEvent@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4168:18
EventListener.handleEvent*addEventBubbleListener@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4027:11
trapEventForPluginEventSystem@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4162:27
trapBubbledEvent@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4133:32
legacyListenToTopLevelEvent@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3642:27
legacyListenToEvent@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3601:32
ensureListeningTo@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5761:22
setInitialDOMProperties@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5828:26
setInitialProperties@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:6026:26
finalizeInitialChildren@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:7499:23
completeWork@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:18978:40
completeUnitOfWork@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22192:16
performUnitOfWork@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22165:12
workLoopSync@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22130:22
performSyncWorkOnRoot@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21756:9
scheduleUpdateOnFiber@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21188:28
updateContainer@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24373:15
legacyRenderSubtreeIntoContainer/<@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24758:22
unbatchedUpdates@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21903:12
legacyRenderSubtreeIntoContainer@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24757:21
render@https://4le2m.csb.app/node_modules/react-dom/cjs/react-dom.development.js:24840:10
evaluate@https://4le2m.csb.app/src/index.js:19:19
Qr@https://codesandbox.io/static/js/sandbox.741f3740d.js:1:179600
value@https://codesandbox.io/static/js/sandbox.741f3740d.js:1:196182
value@https://codesandbox.io/static/js/sandbox.741f3740d.js:1:218288
value@https://codesandbox.io/static/js/sandbox.741f3740d.js:1:217892
e/<@https://codesandbox.io/static/js/sandbox.741f3740d.js:1:256925
d@https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:13828
l/n._invoke</<@https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:13617
w/</e[o]@https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:14250
t@https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:8537
i@https://codesandbox.io/static/js/common-sandbox.8155934d5.chunk.js:1:8748
"}

According to this Neo4j developer documentation article, this is a common error with firefox. Solutions are:

1. Use a signed SSL certificate
2. Follow directions for your browser to trust the server’s certificate for the bolt port, and then refresh the page.
3. Use Chrome
4. Set dbms.connector.bolt.tls_level=OPTIONAL in your neo4j config.

I couldn't find directions to let my browser trust the server's certificate.
There doesn't seem to be a way to edit the sandbox neo4j config as well.

When I tried to access the react sandbox with Chrome, I'm getting the same error, so point 3 is not a resolution either.

VM11847:5723 WebSocket connection to 'wss://34.239.207.167:32864/' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID
createWebSocket @ VM11847:5723
WebSocketChannel @ VM11847:5575
create @ VM11847:8270
_createConnection @ VM11847:2595
_acquire @ VM11847:11677
acquire @ VM11847:11535
acquireConnection @ VM11847:7454
initializeConnection @ VM11847:7229
_run @ VM11847:15945
run @ VM11847:15933
BusinessSearch._this.fetchCategories @ BusinessSearch.js? [sm]:131
BusinessSearch @ BusinessSearch.js? [sm]:76
constructClassInstance @ react-dom.development.js:12880
updateClassComponent @ react-dom.development.js:17100
beginWork @ react-dom.development.js:18620
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
index.js:27 Neo4jError: WebSocket connection failure. Due to security constraints in your web browser, the reason for the failure is not available to this Neo4j Driver. Please use your browsers development console to determine the root cause of the failure. Common reasons include the database being unavailable, using the wrong connection URL or temporary network problems. If you have enabled encryption, ensure your browser is configured to trust the certificate Neo4j is configured to use. WebSocket `readyState` 

Is there a simple way to get over this issue and continue the graph algorithm training?

[elaine_rosenber]

Hello Adrien,

We are looking into this issue and will get back to you when it is resolved.

Elaine

[elaine_rosenber]

There has been a change in how github handles codesandbox.

Here is what you now have to do:

1. Click the link to open codesandbox.
2. Sign in to codesandbox with your github credentials.
3. Click Fork.
4. Edit the env file.
5. Save the file.
6. Refresh the application pane on the right. You should see a retrieval from the graph.

Let us know if you continue to have a problem with codesandbox.

Elaine

[AdrienLemaire]

@elaine.rosenberg thanks for your reply.
It looks like you wrote the same steps already described in https://neo4j.com/graphacademy/online-training/applied-graph-algorithms/part-1/#_exercise
I had completed them yesterday before posting this issue.
Could that mean that you cannot reproduce the issue when creating a new codesandbox account? With both chrome and firefox? This is intriguing.

Here's a screenshot of what I'm seeing:

[AdrienLemaire]

codesandbox.io is trying to do websocket requests to a neo4j.com sandbox (here at 34.239.207.167:32864), and fails to establish a secure connection because the neo4j.com sandbox has a fake certificate only valid for localhost.

Manually going to https://34.239.207.167:32864/ and accepting the localhost certificate fixed the issue.

It would be much better if neo4j.com could prepopulate its sandboxes with letsencrypt certificate...

[elaine_rosenber]

The online course was modified yesterday to reflect these new steps.

We will look into the certificate issue with the yelp sandbox.

Elaine

[William_Lyon · Accepted solution]

Hey @AdrienLemaire - what are you using for the REACT_APP_NEO4J_URI value in your .env file? Are you using the "Websocket Bolt URL"?

We put a proxy in place with a valid signed certificate for each sandbox but you'll need to use that URI instead of the "Bolt URL" with just the IP address and port.

[AdrienLemaire]

Thank you @William_Lyon.
Indeed, I was using the Bolt URL instead of the websocket one, can't believe I made such a blunder.
Sorry for the disturb, and thanks for the great support!