fix(ui): avoid error if article URL is bad

ncarlier · Jul 11, 2019 · e6ecd27 · e6ecd27
1 parent 39a06c0
commit e6ecd27
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/ui/src/articles/components/ArticleCard.tsx b/ui/src/articles/components/ArticleCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom'
 
-import { classNames } from '../../common/helpers'
+import { classNames, getHostname } from '../../common/helpers'
 import Icon from '../../common/Icon'
 import TimeAgo from '../../common/TimeAgo'
 import useKeyboard from '../../hooks/useKeyboard'
@@ -49,7 +49,7 @@ export default withRouter((props: AllProps) => {
       <footer>
         {article.url != '' && (
           <a href={article.url} target="_blank" rel="noopener noreferrer" title="Open original article">
-            {new URL(article.url).hostname}
+            {getHostname(article.url)}
             <Icon name="open_in_new" />
           </a>
         )}

diff --git a/ui/src/articles/components/ArticleHeader.tsx b/ui/src/articles/components/ArticleHeader.tsx
@@ -2,6 +2,7 @@ import { History } from 'history'
 import React, { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
+import { getHostname } from '../../common/helpers'
 import Icon from '../../common/Icon'
 import TimeAgo from '../../common/TimeAgo'
 import { Article } from '../models'
@@ -31,7 +32,7 @@ export default ({ article, to, children }: AllProps) => (
       <small>
         {article.url != '' && (
           <a href={article.url} target="_blank" rel="noopener noreferrer" title="Open original article">
-            {new URL(article.url).hostname}
+            {getHostname(article.url)}
             <Icon name="open_in_new" />
           </a>
         )}

diff --git a/ui/src/common/helpers.tsx b/ui/src/common/helpers.tsx
@@ -117,3 +117,11 @@ export function preventBookmarkletClick(e: MouseEvent<any>) {
 export function getOnlineStatus() {
   return typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true
 }
+
+export function getHostname(_url: string) {
+  try {
+    return new URL(_url).hostname
+  } catch (e) {
+    return _url
+  }
+}