chores:

- connect sentry dsn
- create error fallback component
- add new translation
- add margin on login form

Author: SL0TR

.env.example

@@ -1,2 +1,3 @@
 REACT_APP_BACKEND_URL_DEV='dev.demosite.com/api'
-REACT_APP_BACKEND_URL_PROD='www.demosite.com/api'
+REACT_APP_BACKEND_URL_PROD='www.demosite.com/api'
+REACT_APP_BACKEND_SENTRY_DSN='sentry-dsn-url'

package.json

@@ -6,6 +6,8 @@
     "@ant-design/icons": "^4.4.0",
     "@craco/craco": "^6.1.0",
     "@reduxjs/toolkit": "^1.5.0",
+    "@sentry/react": "^6.2.4",
+    "@sentry/tracing": "^6.2.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
@@ -67,6 +69,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "husky": "^4.3.8",
     "prettier": "^2.2.1",
+    "serve": "^11.3.2",
     "source-map-explorer": "^2.5.2"
   },
   "husky": {

src/components/AppProvider/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { ConfigProvider } from 'antd';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
+import { theme, AppLocale } from 'config';
+import { useSelector } from 'react-redux';
+import { ErrorBoundary } from '@sentry/react';
+import { ErrorFallback } from 'components';
+
+export default function AppProvider({ children }) {
+  const { locale } = useSelector(state => state.LanguageSwitcher.language);
+
+  const currentAppLocale = AppLocale[locale];
+
+  return (
+    <ErrorBoundary
+      fallback={({ error, componentStack, resetError }) => (
+        <ErrorFallback error={{ error, componentStack, resetError }} />
+      )}
+      showDialog
+    >
+      <ConfigProvider locale={currentAppLocale.antd}>
+        <IntlProvider
+          locale={currentAppLocale.locale}
+          messages={currentAppLocale.messages}
+        >
+          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        </IntlProvider>
+      </ConfigProvider>
+    </ErrorBoundary>
+  );
+}
+
+AppProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};

src/components/ErrorFallback/index.js

@@ -0,0 +1,25 @@
+import { Result } from 'antd';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function ErrorFallback({ error }) {
+  return (
+    <Result
+      status="500"
+      title="500"
+      subTitle={
+        <>
+          <div>Sorry, something went wrong!</div>
+          <div>{error?.error.toString()}</div>
+          <div>{error?.componentStack}</div>
+        </>
+      }
+    />
+  );
+}
+
+ErrorFallback.propTypes = {
+  error: PropTypes.object,
+};
+
+export default ErrorFallback;

src/components/index.js

@@ -1 +1,2 @@
-export { default as AppProvider } from './wrapper/AppProvider';
+export { default as AppProvider } from './AppProvider';
+export { default as ErrorFallback } from './ErrorFallback';

src/components/wrapper/AppProvider.js

@@ -1,4 +1,5 @@
 export default {
   siteName: 'Dashboard Boilerplate',
   defaultLanguage: 'english',
+  sentryDSN: process.env.REACT_APP_BACKEND_SENTRY_DSN,
 };

src/config/app/default.js

@@ -18,5 +18,6 @@
   "Dashboard": "ড্যাশবোর্ড",
   "Settings": "সেটিংস",
   "Logout": "প্রস্থান",
-  "Successfully logged in!": "সফলভাবে লগ ইন হয়েছে!"
+  "Successfully logged in!": "সফলভাবে লগ ইন হয়েছে!",
+  "Sorry, something went wrong!": "দুঃখিত, কিছু ভুল হয়েছে!"
 }

src/config/translation/locales/bn_BD.json

@@ -18,5 +18,6 @@
   "Dashboard": "Dashboard",
   "Settings": "Settings",
   "Logout": "Logout",
-  "Successfully logged in!": "Successfully logged in!"
+  "Successfully logged in!": "Successfully logged in!",
+  "Sorry, something went wrong!": "Sorry, something went wrong!"
 }

src/config/translation/locales/en_US.json

@@ -30,7 +30,7 @@ function UserAuthForm() {
       validateMessages={getValidateMessages(messages, 'name')}
     >
       <Form.Item
-        className="mb-1"
+        className="mb-3"
         name="email"
         rules={[{ required: true }, { type: 'email' }]}
         hasFeedback