feat: ⚠️ report 404 url to GA (#230)

* feat: ⚠️ report 404 url to GA close #202 * fix lint * add GATrackingId * fix GATrackingId * upgrade yarn.lock * fix tsc and eslint * fix ga event send function
antvis · Oct 12, 2020 · fcba8b1 · fcba8b1
1 parent cbdd7cd
commit fcba8b1
Show file tree

Hide file tree

Showing 21 changed files with 1,393 additions and 1,021 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -20,9 +20,16 @@
     "consistent-return": 0,
     "import/no-extraneous-dependencies": 0,
     "import/prefer-default-export": 0,
-    "import/extensions": [2, "always", { "ts": "never", "tsx": "never", "js": "never", "jsx": "never" }],
+    "import/extensions": [
+      2,
+      "always",
+      { "ts": "never", "tsx": "never", "js": "never", "jsx": "never" }
+    ],
     "import/no-named-default": 0,
-    "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx", ".js", ".jsx"] }],
+    "react/jsx-filename-extension": [
+      1,
+      { "extensions": [".ts", ".tsx", ".js", ".jsx"] }
+    ],
     "react/prop-types": 0,
     "react/state-in-constructor": 0,
     "react/jsx-props-no-spreading": 0,
@@ -34,6 +41,10 @@
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/ban-ts-ignore": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/no-non-null-assertion": 0
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "no-use-before-define": 0,
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "no-shadow": 0,
+    "@typescript-eslint/no-shadow": ["error"]
   }
 }
diff --git a/@antv/gatsby-theme-antv/gatsby-config.js b/@antv/gatsby-theme-antv/gatsby-config.js
@@ -1,4 +1,3 @@
-/* eslint @typescript-eslint/camelcase: 0 */
 const fs = require('fs');
 const path = require('path');
 const { Extractor, ExtractorConfig } = require('@microsoft/api-extractor');

diff --git a/@antv/gatsby-theme-antv/package.json b/@antv/gatsby-theme-antv/package.json
@@ -30,6 +30,7 @@
     "@stackblitz/sdk": "^1.3.0",
     "@types/classnames": "^2.2.9",
     "@types/git-url-parse": "^9.0.0",
+    "@types/google.analytics": "^0.0.40",
     "@types/jest": "^26.0.0",
     "@types/loadable__component": "^5.13.0",
     "@types/lodash-es": "^4.17.3",

diff --git a/@antv/gatsby-theme-antv/site/components/Footer.tsx b/@antv/gatsby-theme-antv/site/components/Footer.tsx
@@ -19,7 +19,6 @@ interface FooterProps extends RcFooterProps {
   rootDomain?: string;
   language?: string;
   githubUrl?: string;
-  footerProps?: object;
   location: Location;
 }
 
@@ -29,8 +28,8 @@ const Footer: React.FC<FooterProps> = ({
   theme = 'dark',
   language,
   rootDomain = '',
-  footerProps,
   location,
+  ...resetProps
 }) => {
   const { t, i18n } = useTranslation();
   const lang = language || i18n.language;
@@ -194,7 +193,7 @@ const Footer: React.FC<FooterProps> = ({
           </div>
         )
       }
-      {...footerProps}
+      {...resetProps}
     />
   );
 };

diff --git a/@antv/gatsby-theme-antv/site/components/Header.tsx b/@antv/gatsby-theme-antv/site/components/Header.tsx
@@ -64,7 +64,7 @@ interface HeaderProps {
   versions?: { [key: string]: string };
 }
 
-export const redirectToChinaMirror = (githubUrl: string) => {
+export const redirectToChinaMirror = (githubUrl: string): void => {
   const chinaMirrorHost = getChinaMirrorHost();
   if (chinaMirrorHost !== window.location.host) {
     window.location.href = window.location.href.replace(

diff --git a/@antv/gatsby-theme-antv/site/components/PageLoading.tsx b/@antv/gatsby-theme-antv/site/components/PageLoading.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import styles from './PageLoading.module.less';
 
-const PageLoading = () => (
+const PageLoading: React.FC = () => (
   <div className={styles.container}>
     <LoadingOutlined className={styles.loading} />
   </div>

diff --git a/@antv/gatsby-theme-antv/site/components/PlayGround.tsx b/@antv/gatsby-theme-antv/site/components/PlayGround.tsx
@@ -86,8 +86,7 @@ insertCss(`,
   const [currentSourceData, updateCurrentSourceData] = useState(null);
 
   if (typeof window !== 'undefined') {
-    // @ts-ignore
-    window.__reportErrorInPlayGround = (e: Error) => {
+    (window as any).__reportErrorInPlayGround = (e: Error) => {
       console.error(e); // eslint-disable-line no-console
       setError(e);
     };

diff --git a/@antv/gatsby-theme-antv/site/components/Toolbar.tsx b/@antv/gatsby-theme-antv/site/components/Toolbar.tsx
@@ -20,6 +20,11 @@ import styles from './Toolbar.module.less';
 const { Paragraph } = Typography;
 const MonacoEditor = lazy(() => import('react-monaco-editor'));
 
+export enum EDITOR_TABS {
+  JAVASCRIPT = 'JavaScript',
+  DATA = 'Data',
+}
+
 interface ToolbarProps {
   sourceCode: string;
   fileExtension: string;
@@ -47,11 +52,6 @@ interface ToolbarProps {
   onExecuteCode: () => void;
 }
 
-export enum EDITOR_TABS {
-  JAVASCRIPT = 'JavaScript',
-  DATA = 'Data',
-}
-
 const Toolbar: React.FC<ToolbarProps> = ({
   sourceCode,
   fileExtension,

diff --git a/@antv/gatsby-theme-antv/site/hooks.ts b/@antv/gatsby-theme-antv/site/hooks.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { NavigatorBannerProps } from './components/NavigatorBanner';
 
-export const useChinaMirrorHost = () => {
+export const useChinaMirrorHost = (): [boolean] => {
   const [isChinaMirrorHost, setIsChinaMirrorHost] = useState(false);
   useEffect(() => {
     if (
@@ -14,7 +14,7 @@ export const useChinaMirrorHost = () => {
   return [isChinaMirrorHost];
 };
 
-export const usePrevAndNext = () => {
+export const usePrevAndNext = (): NavigatorBannerProps['post'][] => {
   const [prevAndNext, setPrevAndNext] = useState<
     NavigatorBannerProps['post'][]
   >([]);
@@ -24,7 +24,7 @@ export const usePrevAndNext = () => {
       'aside .ant-menu-item-selected a',
     );
     const currentIndex = Array.from(menuNodes).findIndex(
-      node => node === currentMenuNode,
+      (node) => node === currentMenuNode,
     );
     const prevNode =
       currentIndex - 1 >= 0 ? menuNodes[currentIndex - 1] : undefined;
@@ -49,7 +49,15 @@ export const usePrevAndNext = () => {
   return prevAndNext;
 };
 
-export const useLogoLink = ({ link = '', siteUrl = '', lang = '' }) => {
+export const useLogoLink = ({
+  link = '',
+  siteUrl = '',
+  lang = '',
+}: {
+  link?: string;
+  siteUrl?: string;
+  lang?: string;
+}): [string] => {
   let defaultLogoLink;
   if (link) {
     defaultLogoLink = link;

diff --git a/@antv/gatsby-theme-antv/site/layouts/layout.tsx b/@antv/gatsby-theme-antv/site/layouts/layout.tsx
@@ -4,6 +4,7 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { getCurrentLangKey } from 'ptz-i18n';
 import { Helmet } from 'react-helmet';
+import { FooterProps } from 'rc-footer';
 import Seo from '../components/Seo';
 import Header from '../components/Header';
 import PageLoading from '../components/PageLoading';
@@ -27,7 +28,7 @@ interface LayoutProps {
   children: React.ReactElement<any>;
   location: Location;
   pageContext: any;
-  footerProps: object;
+  footerProps: FooterProps;
 }
 
 function parseNulltoUndefined<T>(value: T) {
@@ -206,8 +207,8 @@ const Layout: React.FC<LayoutProps> = ({ children, location, footerProps }) => {
       <Footer
         githubUrl={githubUrl}
         rootDomain="https://antv.vision"
-        footerProps={footerProps}
         location={location}
+        {...footerProps}
       />
     </>
   );

diff --git a/@antv/gatsby-theme-antv/site/pages/404.tsx b/@antv/gatsby-theme-antv/site/pages/404.tsx
@@ -1,26 +1,38 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { HomeOutlined } from '@ant-design/icons';
 import { Result, Button } from 'antd';
 import { Link } from 'gatsby';
 import SEO from '../components/Seo';
 
-const NotFoundPage = () => (
-  <>
-    <SEO title="404: Not found" />
-    <Result
-      status={'404' as any}
-      title="404"
-      subTitle="Sorry, the page you visited does not exist."
-      extra={
-        <Link to="/">
-          <Button type="primary">
-            <HomeOutlined />
-            Back Home
-          </Button>
-        </Link>
-      }
-    />
-  </>
-);
+const NotFoundPage: React.FC = () => {
+  useEffect(() => {
+    if (window.location.pathname.startsWith('/404')) {
+      return;
+    }
+    const { ga } = window;
+    ga?.('send', 'event', {
+      eventCategory: '404',
+      eventAction: 'report',
+      eventLabel: window.location.href,
+    });
+  }, []);
+  return (
+    <>
+      <SEO title="404: Not found" />
+      <Result
+        status="404"
+        title="404"
+        subTitle="Sorry, the page you visited does not exist."
+        extra={
+          <Link to="/">
+            <Button type="primary" icon={<HomeOutlined />}>
+              Back Home
+            </Button>
+          </Link>
+        }
+      />
+    </>
+  );
+};
 
 export default NotFoundPage;
diff --git a/@antv/gatsby-theme-antv/site/pages/index.tsx b/@antv/gatsby-theme-antv/site/pages/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import RedirectIndex from '../components/RedirectIndex';
 
-const Page = () => <RedirectIndex />;
+const Page: React.FC & { noLayout: boolean } = () => <RedirectIndex />;
 
 Page.noLayout = true;
 

diff --git a/@antv/gatsby-theme-antv/site/templates/document.tsx b/@antv/gatsby-theme-antv/site/templates/document.tsx
@@ -141,7 +141,7 @@ export const getGithubSourceUrl = ({
   githubUrl: string;
   relativePath: string;
   prefix: string;
-}) => {
+}): string => {
   // https://github.com/antvis/x6/tree/master/packages/x6-sites
   if (githubUrl.includes('/tree/master/')) {
     return `${githubUrl.replace(
@@ -162,7 +162,7 @@ export default function Template({
   pageContext: {
     examples: any;
   };
-}) {
+}): React.ReactNode {
   const [prev, next] = usePrevAndNext();
   const { markdownRemark, allMarkdownRemark, site } = data; // data.markdownRemark holds our post data
   const { examples = [] } = pageContext;

diff --git a/@antv/gatsby-theme-antv/site/templates/example.tsx b/@antv/gatsby-theme-antv/site/templates/example.tsx
@@ -112,7 +112,7 @@ export default function Template({
     allDemos?: any[];
     description: string;
   };
-}) {
+}): React.ReactNode {
   const { allMarkdownRemark, site } = data; // data.markdownRemark holds our post data
   const { edges = [] } = allMarkdownRemark;
   const edgesInExamples = edges;

diff --git a/@antv/gatsby-theme-antv/site/utils.ts b/@antv/gatsby-theme-antv/site/utils.ts
@@ -1,6 +1,6 @@
 type Status = 'responded' | 'error' | 'timeout';
 
-export const ping = (callback: (status: Status) => void) => {
+export const ping = (callback: (status: Status) => void): NodeJS.Timeout => {
   const url =
     'https://private-a' +
     'lipay' +
@@ -22,14 +22,14 @@ export const ping = (callback: (status: Status) => void) => {
   return setTimeout(() => finish('timeout'), 1500);
 };
 
-export const capitalize = (s: string) => {
+export const capitalize = (s: string): string => {
   if (typeof s !== 'string') {
     return '';
   }
   return s.charAt(0).toUpperCase() + s.slice(1);
 };
 
-export const getChinaMirrorHost = (host?: string) => {
+export const getChinaMirrorHost = (host?: string): string => {
   const hostString = typeof host === 'undefined' ? window.location.host : host;
   // antv.vision => antv.gitee.io
   if (hostString === 'antv.vision') {

diff --git a/example/gatsby-config.js b/example/gatsby-config.js
@@ -4,7 +4,9 @@ module.exports = {
   plugins: [
     {
       resolve: '@antv/gatsby-theme-antv',
-      options: {},
+      options: {
+        GATrackingId: `UA-148148901-11`,
+      },
     },
   ],
   siteMetadata: {

diff --git a/example/site/pages/independent.zh.tsx b/example/site/pages/independent.zh.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-const Indepent = () => {
+const Indepent: React.FC & { noLayout: boolean } = () => {
   const { t } = useTranslation();
   return <>{t('独立页面')}</>;
 };

diff --git a/example/site/pages/index.zh.tsx b/example/site/pages/index.zh.tsx
@@ -7,7 +7,7 @@ import Features from '@antv/gatsby-theme-antv/site/components/Features';
 import Cases from '@antv/gatsby-theme-antv/site/components/Cases';
 import BannerSVG from '@antv/gatsby-theme-antv/site/components/BannerSVG';
 
-const IndexPage = () => {
+const IndexPage: React.FC = () => {
   const { t, i18n } = useTranslation();
 
   const features = [

diff --git a/example/src/index.d.ts b/example/src/index.d.ts
@@ -12,14 +12,14 @@ export class Chart {
   /**
    * This method will be removed at G2 V4.1
    */
-  source(data): void;
+  source(data: unknown): void;
 
   /**
    * 创建 Interval 几何标记。
    * @param [cfg] 传入 Interval 构造函数的配置。
    * @returns interval 返回 Interval 实例。
    */
-  interval(cfg: any): any;
+  interval(cfg: unknown): any;
 
   /**
    * 配置 position 通道映射规则。
@@ -38,7 +38,7 @@ export class Chart {
    * @returns
    */
   position(cfg: string | string[]): any;
-  
+
   /**
    * @example
    * ```typescript
@@ -70,4 +70,4 @@ export class Chart {
    * @returns
    */
   color(field: string, cfg?: string | string[]): any;
-}
+}
diff --git a/package.json b/package.json
@@ -14,17 +14,17 @@
     "example"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.32.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "eslint": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
+    "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^23.11.0",
+    "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.2.0",
-    "gh-pages": "^2.1.1",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "gh-pages": "^3.1.0",
     "husky": "^4.0.0",
     "prettier": "^2.0.5",
     "pretty-quick": "^3.0.0"