Offer help if being blocked by Tracking Protection

src/api/reddit/index.js

@@ -5,7 +5,9 @@ const requestSettings = {headers: {"Accept-Language": "en"}}
 
 const errorHandler = (error, from) => {
   console.error(from + ': ' + error)
-  throw new Error('Could not connect to Reddit')
+  const e = new Error('Could not connect to Reddit')
+  e.origError = error
+  throw e
 }
 
 // Return the post itself

src/pages/common/Header.js

@@ -15,6 +15,8 @@ const Header = props => (
     <div id='status'>
       {props.global.state.statusText &&
         <p id='status-text'>{props.global.state.statusText}</p>}
+      {props.global.state.statusHelpUrl &&
+        <Link id='status-helpurl' to={props.global.state.statusHelpUrl}>Need help?</Link>}
       {props.global.state.statusImage &&
         <img id='status-image' src={props.global.state.statusImage} alt='status' />}
     </div>

src/pages/thread/index.js

@@ -157,6 +157,24 @@ class Thread extends React.Component {
               loadingComments: false
             })
           })
+          .catch(e => {
+            if (e.origError.name == 'TypeError') {  // The exception when blocked by Tracking Protection
+              // https://stackoverflow.com/a/9851769
+              const isFirefox = typeof InstallTrigger !== 'undefined'
+              if (isFirefox) {
+                this.props.global.setError(e, '/about#firefox')
+                return
+              } else {
+                const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime)
+                const isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1)
+                if (isEdgeChromium) {
+                  this.props.global.setError(e, '/about#edge')
+                  return
+                }
+              }
+            }
+            throw e
+          })
       })
       .catch(this.props.global.setError)
   }

src/sass/header.sass

@@ -30,10 +30,13 @@ header
     justify-content: space-between
     align-items: center
 
-    #status-text
+    #status-text, #status-helpurl
       color: #fff
       margin: 0 20px 0 0
 
+    #status-helpurl
+      font-size: 20px
+
     #status-image 
       height: 64px
       width: 64px

src/state.js

@@ -32,6 +32,7 @@ class GlobalState extends Container {
     commentFilter: get(filterKey, filter.removedDeleted),
     maxComments: get(maxCommentsKey, maxCommentsDefault),
     statusText: '',
+    statusHelpUrl: undefined,
     statusImage: undefined
   }
 
@@ -55,10 +56,14 @@ class GlobalState extends Container {
 
   loadMaxComments = () => this.setState({maxComments: get(maxCommentsKey, maxCommentsDefault)})
 
-  setSuccess = () => this.setState({statusText: '', statusImage: '/images/success.png'})
+  setSuccess = () => this.setState({statusText: '', statusHelpUrl: undefined, statusImage: '/images/success.png'})
   setLoading = (text) => this.setState({statusText: text, statusImage: '/images/loading.gif'})
-  setError = (error) => this.setState({statusText: error.message, statusImage: '/images/error.png'})
-  clearStatus = () => this.setState({statusText: '', statusImage: undefined})
+  setError = (error, helpUrl = undefined) => {
+    this.setState({statusText: error.message, statusImage: '/images/error.png'})
+    if (helpUrl)
+      this.setState({statusHelpUrl: helpUrl})
+  }
+  clearStatus = () => this.setState({statusText: '', statusHelpUrl: undefined, statusImage: undefined})
 }
 
 // A redux-like connect function for Unstated