✅ Add sentry in ant.design

follow https://sentry.io/onboarding/ant-design-zb/react/configure/javascript-react

package.json

@@ -92,6 +92,7 @@
   },
   "devDependencies": {
     "@ant-design/colors": "^2.0.0",
+    "@sentry/browser": "^4.5.2",
     "@types/classnames": "^2.2.6",
     "@types/prop-types": "^15.5.6",
     "@types/react": "~16.7.13",

site/theme/template/Layout/SentryBoundary.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import * as Sentry from '@sentry/browser';
+
+Sentry.init({
+  dsn: 'https://2a2c2568315846dab9083a32e37f61fc@sentry.io/1375737',
+});
+
+export default class SentryBoundary extends Component {
+  state = { error: null };
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({ error });
+    Sentry.withScope(scope => {
+      Object.keys(errorInfo).forEach(key => {
+        scope.setExtra(key, errorInfo[key]);
+      });
+      Sentry.captureException(error);
+    });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { error } = this.state;
+    if (error) {
+      // render fallback UI
+      return <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>;
+    }
+    // when there's not an error, render children untouched
+    return children;
+  }
+}

site/theme/template/Layout/index.jsx

@@ -7,6 +7,7 @@ import 'moment/locale/zh-cn';
 import { LocaleProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import Header from './Header';
+import SentryBoundary from './SentryBoundary';
 import enLocale from '../../en-US';
 import cnLocale from '../../zh-CN';
 import * as utils from '../utils';
@@ -95,14 +96,16 @@ export default class Layout extends React.Component {
     const { appLocale } = this.state;
 
     return (
-      <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
-        <LocaleProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
-          <div className="page-wrapper">
-            <Header {...restProps} />
-            {children}
-          </div>
-        </LocaleProvider>
-      </IntlProvider>
+      <SentryBoundary>
+        <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
+          <LocaleProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
+            <div className="page-wrapper">
+              <Header {...restProps} />
+              {children}
+            </div>
+          </LocaleProvider>
+        </IntlProvider>
+      </SentryBoundary>
     );
   }
 }