Add more detailed error messages for known Browser/OS issues

src/browser/modules/Stream/CypherFrame/ErrorsView.jsx

@@ -30,6 +30,8 @@ import Render from 'browser-components/Render'
 import { executeCommand } from 'shared/modules/commands/commandsDuck'
 import { listAvailableProcedures } from 'shared/modules/cypher/procedureFactory'
 import { isUnknownProcedureError } from 'services/cypherErrorsHelper'
+import { errorMessageFormater } from './../errorMessageFormater'
+
 import {
   StyledCypherErrorMessage,
   StyledHelpContent,
@@ -52,12 +54,14 @@ export class ErrorsView extends Component {
     if (!error || !error.code) {
       return null
     }
+    const fullError = errorMessageFormater(error.code, error.message)
+
     return (
       <StyledHelpFrame>
         <StyledHelpContent>
           <StyledHelpDescription>
             <StyledCypherErrorMessage>ERROR</StyledCypherErrorMessage>
-            <StyledH4>{error.code}</StyledH4>
+            <StyledH4>{fullError.code}</StyledH4>
           </StyledHelpDescription>
           <StyledDiv>
             <StyledPreformattedArea>{error.message}</StyledPreformattedArea>
@@ -89,13 +93,12 @@ export class ErrorsStatusbar extends Component {
   render () {
     const error = this.props.result
     if (!error || (!error.code && !error.message)) return null
-    const fullError = `${error.code}${error.message
-      ? ':'
-      : ''} ${error.message || ''}`
+    const fullError = errorMessageFormater(error.code, error.message)
+
     return (
       <Ellipsis>
-        <ErrorText title={fullError}>
-          <ExclamationTriangleIcon /> {fullError}
+        <ErrorText title={fullError.title}>
+          <ExclamationTriangleIcon /> {fullError.message}
         </ErrorText>
       </Ellipsis>
     )

src/browser/modules/Stream/Errors/IESecurityErrors.jsx

@@ -0,0 +1,9 @@
+export const IESecurityError18 = (
+  <span>
+    Unable to connect to local intranet. This is a known error when using
+    Internet Explorer. For more help resolving this issue{' '}
+    <a href='https://stackoverflow.com/a/41643700' target='_blank'>
+      click here
+    </a>
+  </span>
+)

src/browser/modules/Stream/FrameError.jsx

@@ -20,16 +20,16 @@
 
 import { ExclamationTriangleIcon } from 'browser-components/icons/Icons'
 import Ellipsis from 'browser-components/Ellipsis'
+import { errorMessageFormater } from './errorMessageFormater'
 import { ErrorText } from './styled'
 
 const FrameError = props => {
   if (!props || (!props.code && !props.message)) return null
-  const fullError = `${props.code}${props.message ? ':' : ''} ${props.message ||
-    ''}`
+  const fullError = errorMessageFormater(props.code, props.message)
   return (
     <Ellipsis>
-      <ErrorText title={fullError}>
-        <ExclamationTriangleIcon /> {fullError}
+      <ErrorText title={fullError.title}>
+        <ExclamationTriangleIcon /> {fullError.message}
       </ErrorText>
     </Ellipsis>
   )

src/browser/modules/Stream/errorMessageFormater.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2002-2018 "Neo4j, Inc"
+ * Network Engine for Objects in Lund AB [http://neotechnology.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { IESecurityError18 } from './Errors/IESecurityErrors'
+
+const error = (title, message) => ({
+  title,
+  message: message || title
+})
+
+const knownErrors = {
+  18: IESecurityError18
+}
+
+export const errorMessageFormater = (code, message) =>
+  error(`${code}${message ? ':' : ''} ${message || ''}`, knownErrors[code])

src/browser/modules/Stream/errorMessageFormater.test.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2002-2018 "Neo4j, Inc"
+ * Network Engine for Objects in Lund AB [http://neotechnology.com]
+ *
+ * This file is part of Neo4j.
+ *
+ * Neo4j is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* global describe, test, expect */
+
+import render from 'preact-render-to-string'
+import { errorMessageFormater } from './errorMessageFormater'
+
+describe('errorsHelper', () => {
+  test('should display custom message when code is 13 (IE + ws://localhost issue)', () => {
+    const error = errorMessageFormater(13)
+
+    expect(error.title).toContain('13')
+    expect(error.message).toBeTruthy()
+    expect(render(error.message)).toContain('Internet Explorer')
+  })
+  test('should return error code as code and message when message is missing', () => {
+    const errorCode = 0
+    const error = errorMessageFormater(errorCode)
+
+    expect(error.title.trim()).toEqual(errorCode.toString())
+    expect(error.message.trim()).toEqual(errorCode.toString())
+  })
+  test('should return error code and message', () => {
+    const errorCode = 0
+    const errorText = 'foobar'
+    const error = errorMessageFormater(errorCode, errorText)
+
+    expect(error.title.trim()).toContain(errorCode.toString())
+    expect(error.title.trim()).toContain(errorText)
+    expect(error.message.trim()).toContain(errorText)
+  })
+})