Adding i18next

src/pages/404/Component.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { translate, Trans } from 'react-i18next';
+
+import Message from '../../components/Message';
+import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+import Header from '../../components/Header';
+import Footer from '../../components/Footer';
+
+const Component = ({ t }) => ( // eslint-disable-line react/prop-types
+  <React.Fragment>
+    <Header/>
+    <Message className="error" icon={ AlertIcon } heading={ t('404 Page Not Found') }>
+      <p><Trans>The page you have requested could not be found</Trans></p>
+    </Message>
+    <Footer/>
+  </React.Fragment>
+);
+
+export default translate()(Component);

src/pages/404/index.js

@@ -1,6 +1,25 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Component from './Component';
+import RavenBoundary from '../../components/RavenBoundary';
+
 import '../../style.css';
+import '../../i18n';
 import { setupGA } from '../../analytics';
-import { setupRaven } from '../../sentry';
+import { Raven, setupRaven } from '../../sentry';
 
 setupRaven();
-setupGA();
+
+try {
+  setupGA();
+
+  ReactDOM.render(
+    <RavenBoundary>
+      <Component/>
+    </RavenBoundary>,
+    document.getElementById('root'));
+}
+catch (e) {
+  Raven.captureException(e);
+}

src/pages/404/template.js

@@ -1,14 +1,13 @@
 import 'babel-register';
 import React from 'react';
 
+import '../../i18n';
+
 import PageTemplate, { renderToString } from '../../components/PageTemplate';
-import Message from '../../components/Message';
-import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+import Component from './Component';
 
 export default renderToString(
   <PageTemplate>
-    <Message className="error" icon={ AlertIcon } heading="404 Page Not Found">
-      <p>The page you have requested could not be found</p>
-    </Message>
+    <Component/>
   </PageTemplate>
 );

src/pages/index/index.js

@@ -5,6 +5,7 @@ import App from '../../components/App';
 import RavenBoundary from '../../components/RavenBoundary';
 
 import '../../style.css';
+import '../../i18n';
 import { setupServiceWorker } from '../../service-worker';
 import { setupGA } from '../../analytics';
 import { Raven, setupRaven } from '../../sentry';

src/pages/index/template.js

@@ -1,12 +1,17 @@
 import 'babel-register';
 import React from 'react';
 
+import '../../i18n';
+
 import PageTemplate, { renderToString } from '../../components/PageTemplate';
 import Message from '../../components/Message';
 import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
+import Header from '../../components/Header';
+import Footer from '../../components/Footer';
 
 export default renderToString(
   <PageTemplate>
+    <Header/>
     <noscript>
       <Message className="error" icon={ AlertIcon } heading="JavaScript Required">
         <p>You need to enable JavaScript to use Regexper.</p>
@@ -18,5 +23,6 @@ export default renderToString(
         <p>Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind. The information collected by these tools is used to monitor application performance, determine browser support, and collect error reports.</p>
       </Message>
     </noscript>
+    <Footer/>
   </PageTemplate>
 );