Merge pull request #279 from mikecao/dev

v0.80.0

assets/exclamation-triangle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M270.2 160h35.5c3.4 0 6.1 2.8 6 6.2l-7.5 196c-.1 3.2-2.8 5.8-6 5.8h-20.5c-3.2 0-5.9-2.5-6-5.8l-7.5-196c-.1-3.4 2.6-6.2 6-6.2zM288 388c-15.5 0-28 12.5-28 28s12.5 28 28 28 28-12.5 28-28-12.5-28-28-28zm281.5 52L329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.8 0 60-40 41.5-72zM528 480H48c-12.3 0-20-13.3-13.9-24l240-416c6.1-10.6 21.6-10.7 27.7 0l240 416c6.2 10.6-1.5 24-13.8 24z"/></svg>

components/common/ErrorMessage.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Icon from './Icon';
+import Exclamation from 'assets/exclamation-triangle.svg';
+import styles from './ErrorMessage.module.css';
+
+export default function ErrorMessage() {
+  return (
+    <div className={styles.error}>
+      <Icon icon={<Exclamation />} className={styles.icon} size="large" />
+      <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
+    </div>
+  );
+}

components/common/ErrorMessage.module.css

@@ -0,0 +1,13 @@
+.error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: auto;
+  display: flex;
+  z-index: 1;
+}
+
+.icon {
+  margin-right: 10px;
+}

components/common/MenuButton.js

@@ -9,7 +9,8 @@ export default function MenuButton({
   icon,
   value,
   options,
-  menuClassname,
+  buttonClassName,
+  menuClassName,
   menuPosition = 'bottom',
   menuAlign = 'right',
   onSelect,
@@ -38,7 +39,7 @@ export default function MenuButton({
     <div className={styles.container} ref={ref}>
       <Button
         icon={icon}
-        className={classNames(styles.button, { [styles.open]: showMenu })}
+        className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
         onClick={toggleMenu}
         variant="light"
       >
@@ -46,7 +47,7 @@ export default function MenuButton({
       </Button>
       {showMenu && (
         <Menu
-          className={menuClassname}
+          className={menuClassName}
           options={options}
           selectedOption={selectedOption}
           onSelect={handleSelect}

components/metrics/MetricsBar.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Loading from 'components/common/Loading';
+import ErrorMessage from 'components/common/ErrorMessage';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
@@ -17,7 +18,7 @@ export default function MetricsBar({ websiteId, token, className }) {
     query: { url },
   } = usePageQuery();
 
-  const { data } = useFetch(
+  const { data, error, loading } = useFetch(
     `/api/website/${websiteId}/metrics`,
     {
       start_at: +startDate,
@@ -40,9 +41,9 @@ export default function MetricsBar({ websiteId, token, className }) {
 
   return (
     <div className={classNames(styles.bar, className)} onClick={handleSetFormat}>
-      {!data ? (
-        <Loading />
-      ) : (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <MetricCard
             label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}

components/metrics/MetricsTable.js

@@ -13,6 +13,7 @@ import { formatNumber, formatLongNumber } from 'lib/format';
 import useDateRange from 'hooks/useDateRange';
 import usePageQuery from 'hooks/usePageQuery';
 import styles from './MetricsTable.module.css';
+import ErrorMessage from '../common/ErrorMessage';
 
 export default function MetricsTable({
   websiteId,
@@ -36,7 +37,7 @@ export default function MetricsTable({
     query: { url },
   } = usePageQuery();
 
-  const { data } = useFetch(
+  const { data, loading, error } = useFetch(
     `/api/website/${websiteId}/rankings`,
     {
       type,
@@ -61,7 +62,7 @@ export default function MetricsTable({
       return items;
     }
     return [];
-  }, [data, dataFilter, filterOptions]);
+  }, [data, error, dataFilter, filterOptions]);
 
   const handleSetFormat = () => setFormat(state => !state);
 
@@ -86,8 +87,9 @@ export default function MetricsTable({
 
   return (
     <div className={classNames(styles.container, className)}>
-      {!data && <Loading />}
-      {data && (
+      {!data && loading && <Loading />}
+      {error && <ErrorMessage />}
+      {data && !error && (
         <>
           <div className={styles.header}>
             <div className={styles.title}>{title}</div>

components/metrics/WebsiteChart.js

@@ -13,6 +13,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import { getDateArray, getDateLength } from 'lib/date';
 import Times from 'assets/times.svg';
 import styles from './WebsiteChart.module.css';
+import ErrorMessage from '../common/ErrorMessage';
 
 export default function WebsiteChart({
   websiteId,
@@ -31,7 +32,7 @@ export default function WebsiteChart({
     query: { url },
   } = usePageQuery();
 
-  const { data, loading } = useFetch(
+  const { data, loading, error } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {
       start_at: +startDate,
@@ -83,6 +84,7 @@ export default function WebsiteChart({
       </div>
       <div className="row">
         <div className="col">
+          {error && <ErrorMessage />}
           <PageviewsChart
             websiteId={websiteId}
             data={{ pageviews, uniques }}

components/settings/LanguageButton.js

@@ -33,7 +33,7 @@ export default function LanguageButton() {
         icon={<Globe />}
         options={menuOptions}
         value={locale}
-        menuClassname={styles.menu}
+        menuClassName={styles.menu}
         renderValue={option => option?.display}
         onSelect={handleSelect}
       />

hooks/useFetch.js

@@ -25,7 +25,13 @@ export default function useFetch(url, params = {}, options = {}) {
 
       dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
 
-      setData(data);
+      if (status >= 400) {
+        setError(data);
+        setData(null);
+      } else {
+        setData(data);
+      }
+
       setStatus(status);
       onDataLoad(data);
     } catch (e) {

hooks/useForceSSL.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+export default function useForceSSL(enabled) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (enabled && typeof window !== 'undefined' && /^http:\/\//.test(location.href)) {
+      router.push(location.href.replace(/^http:\/\//, 'https://'));
+    }
+  }, [enabled]);
+
+  return null;
+}

lang/nl-NL.json

@@ -7,22 +7,22 @@
   "button.copy-to-clipboard": "Kopiëer naar klembord",
   "button.date-range": "Datumbereik",
   "button.delete": "Verwijderen",
-  "button.dismiss": "Dismiss",
+  "button.dismiss": "Negeren",
   "button.edit": "Bewerken",
   "button.login": "Inloggen",
   "button.more": "Toon meer",
   "button.refresh": "Vernieuwen",
-  "button.reset": "Reset",
+  "button.reset": "Resetten",
   "button.save": "Opslaan",
   "button.single-day": "Enkele dag",
   "button.view-details": "Meer details",
-  "label.accounts": "Accounts",
+  "label.accounts": "Gebruikers",
   "label.administrator": "Administrator",
   "label.confirm-password": "Wachtwoord bevestigen",
   "label.current-password": "Huidig wachtwoord",
   "label.custom-range": "Aangepast bereik",
-  "label.dashboard": "Dashboard",
-  "label.default-date-range": "Default date range",
+  "label.dashboard": "Overzicht",
+  "label.default-date-range": "Standaard bereik",
   "label.domain": "Domein",
   "label.enable-share-url": "Sta delen via openbare URL toe",
   "label.invalid": "Ongeldig",
@@ -41,7 +41,7 @@
   "label.this-month": "Deze maand",
   "label.this-week": "Deze week",
   "label.this-year": "Dit jaar",
-  "label.timezone": "Timezone",
+  "label.timezone": "Tijdzone",
   "label.today": "Vandaag",
   "label.unknown": "Onbekend",
   "label.username": "Gebruikersnaam",
@@ -55,7 +55,7 @@
   "message.get-tracking-code": "Tracking code",
   "message.go-to-settings": "Naar instellingen",
   "message.incorrect-username-password": "Incorrecte gebruikersnaam/wachtwoord.",
-  "message.new-version-available": "A new version of umami {version} is available!",
+  "message.new-version-available": "Een nieuwe versie van umami {version} is beschikbaar!",
   "message.no-data-available": "Geen gegevens beschikbaar.",
   "message.no-websites-configured": "Je hebt geen websites ingesteld.",
   "message.page-not-found": "Pagina niet gevonden.",

lib/queries.js

@@ -16,13 +16,9 @@ export function getDatabase() {
 }
 
 export async function runQuery(query) {
-  return query
-    .catch(e => {
-      throw e;
-    })
-    .finally(async () => {
-      await prisma.$disconnect();
-    });
+  return query.catch(e => {
+    throw e;
+  });
 }
 
 export async function rawQuery(query, params = []) {

next.config.js

@@ -4,9 +4,7 @@ const pkg = require('./package.json');
 module.exports = {
   env: {
     VERSION: pkg.version,
-  },
-  serverRuntimeConfig: {
-    PROJECT_ROOT: __dirname,
+    FORCE_SSL: !!process.env.FORCE_SSL,
   },
   webpack(config) {
     config.module.rules.push({
@@ -19,4 +17,17 @@ module.exports = {
 
     return config;
   },
+  async headers() {
+    return [
+      {
+        source: '/umami.js',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=2592000', // 30 days
+          },
+        ],
+      },
+    ]
+  },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.74.0",
+  "version": "0.80.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

pages/_app.js

@@ -3,6 +3,7 @@ import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { useStore } from 'redux/store';
 import useLocale from 'hooks/useLocale';
+import useForceSSL from 'hooks/useForceSSL';
 import { messages } from 'lib/lang';
 import 'styles/variables.css';
 import 'styles/bootstrap-grid.css';
@@ -21,6 +22,7 @@ const Intl = ({ children }) => {
 };
 
 export default function App({ Component, pageProps }) {
+  useForceSSL(process.env.FORCE_SSL);
   const store = useStore();
 
   return (

pages/api/collect.js

@@ -3,12 +3,22 @@ import { savePageView, saveEvent } from 'lib/queries';
 import { useCors, useSession } from 'lib/middleware';
 import { ok, badRequest } from 'lib/response';
 import { createToken } from 'lib/crypto';
+import { getIpAddress } from '../../lib/request';
 
 export default async (req, res) => {
   if (isBot(req.headers['user-agent'])) {
     return ok(res);
   }
 
+  if (process.env.IGNORE_IP) {
+    const ips = process.env.IGNORE_IP.split(',').map(n => n.trim());
+    const ip = getIpAddress(req);
+
+    if (ips.includes(ip)) {
+      return ok(res);
+    }
+  }
+
   await useCors(req, res);
   await useSession(req, res);
 

tracker/index.js

@@ -19,8 +19,19 @@ import { removeTrailingSlash } from '../lib/url';
   const autoTrack = attr('data-auto-track') !== 'false';
   const dnt = attr('data-do-not-track');
   const useCache = attr('data-cache');
+  const domains = attr('data-domains');
 
-  if (!script || (dnt && doNotTrack())) return;
+  if (
+    !script ||
+    (dnt && doNotTrack()) ||
+    (domains &&
+      !domains
+        .split(',')
+        .map(n => n.trim())
+        .includes(hostname))
+  ) {
+    return;
+  }
 
   const root = hostUrl
     ? removeTrailingSlash(hostUrl)