Change sentry to use React-specific API

2 years ago · 237e9236b0
8 changed files with 137 additions and 21 deletions
--- a/index.html
+++ b/index.html
@ -47,9 +47,6 @@
  <!-- <link rel="stylesheet" type="text/css" href="/variables.css" /> -->

  <!-- Scripts -->
-  <script src="https://browser.sentry-cdn.com/5.19.1/bundle.min.js"
-    integrity="sha384-ibWewy8LWP0FdvEBD3iLjNmbFkkh/FKtOz8GR9C8ZBWjDTbjbdIDpa4nc/AasWns" crossorigin="anonymous">
-    </script>
  <script src="https://hcaptcha.com/1/api.js"></script>
  <script async src="/libs/sortable/sortable.min.js"></script>
 </head>
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "@pika/react-dom": "^16.13.1",
    "@reach/combobox": "^0.10.5",
    "@reach/menu-button": "^0.10.5",
+    "@sentry/react": "^5.22.3",
    "@theme-ui/color": "^0.3.1",
    "@theme-ui/presets": "^0.3.0",
    "@types/autosize": "^3.0.7",
--- a/src/components/ErrorFallback.tsx
+++ b/src/components/ErrorFallback.tsx
@ -0,0 +1,36 @@
+import React from 'react';
+import Sentry from '@sentry/react';
+import Block from './elements/Block';
+import { Heading, Textarea, ThemeProvider } from 'theme-ui';
+import defaultTheme from '../theme';
+import Button from './elements/Button';
+
+// https://sentry.io/api/0/projects/{organization_slug}/{project_slug}/user-feedback/
+
+// event_id (string) — the event ID
+// name (string) — user's name
+// email (string) — user's email address
+// comments (string) — comments supplied by user
+
+export default function ErrorFallback() {
+  async function handleSubmit(e) {
+    e.preventDefault();
+  }
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <Block
+        width="100vw"
+        height="100vh"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Block maxWidth="400px" as="form" onSubmit={handleSubmit}>
+          <Heading as="h3">Something Went Wrong</Heading>
+          {/* <Textarea /> */}
+          {/* <Button>Submit</Button> */}
+        </Block>
+      </Block>
+    </ThemeProvider>
+  );
+}
--- a/src/components/inbox.tsx
+++ b/src/components/inbox.tsx
@ -62,6 +62,7 @@ interface InboxState {
  messages: Array<PrivateMessageI>;
  sort: SortType;
  page: number;
+  loading: boolean;
  enableDownvotes: boolean;
 }

@ -75,6 +76,7 @@ export class Inbox extends Component<any, InboxState> {
    messages: [],
    sort: SortType.New,
    page: 1,
+    loading: true,
    enableDownvotes: undefined,
  };

--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@ -545,10 +545,11 @@ class UnwrappedNavbar extends Component<any, NavbarState> {
        if (typeof Notification === 'undefined' && window.innerWidth > 768) {
          toast(i18n.t('notifications_error'), 'danger');
          return;
+        } else {
+          if (Notification?.permission !== 'granted') {
+            Notification?.requestPermission();
+          }
        }
-
-        if (Notification.permission !== 'granted')
-          Notification.requestPermission();
      });
    }
  }
--- a/src/components/post-form.tsx
+++ b/src/components/post-form.tsx
@ -105,7 +105,7 @@ function CommunityInput({
      <ComboboxPopover className="shadow-popup">
        {results.length > 0 ? (
          <ComboboxList persistSelection>
-            {results.slice(0, 10).map((result, index) => (
+            {results.map((result, index) => (
              <ComboboxOption key={index} value={result.name} />
            ))}
          </ComboboxList>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,13 +1,4 @@
-// eslint-disable-next-line no-undef
-if (process.env.NODE_ENV !== 'development') {
-  // @ts-ignore
-  // eslint-disable-next-line no-undef
-  Sentry.init({
-    dsn:
-      'https://[email protected]/5336831',
-  });
-}
-
+import * as Sentry from '@sentry/react';
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@ -41,12 +32,13 @@ import PrivacyPolicy from './components/privacy-policy';
 import './custom.css';
 import './variables.css';
 import { ThemeSystemProvider } from './components/ThemeSystemProvider';
+import ErrorFallback from './components/ErrorFallback';

 const container = document.getElementById('app');

 function PPB() {
  return (
-    <div style={{ 'maxWidth': '500px' }}>
+    <div style={{ maxWidth: '500px' }}>
      <img
        src="https://i.imgur.com/5pXPI.jpg"
        className="img-fluid"
@ -76,7 +68,10 @@ class Index extends Component<any, any> {
                    />
                    <Route path="/login" component={Login} />
                    <Route path="/create_post" component={CreatePost} />
-                    <Route path="/create_community" component={CreateCommunity} />
+                    <Route
+                      path="/create_community"
+                      component={CreateCommunity}
+                    />
                    <Route
                      path="/create_private_message"
                      component={CreatePrivateMessage}
@ -141,4 +136,24 @@ class Index extends Component<any, any> {
  }
 }

-render(<Index />, container);
+// eslint-disable-next-line no-undef
+if (process.env.NODE_ENV !== 'development') {
+  // @ts-ignore
+  // eslint-disable-next-line no-undef
+  // Sentry.init({
+  //   dsn:
+  //     'https://[email protected]/5336831',
+  // });
+}
+
+Sentry.init({
+  dsn:
+    'https://[email protected]/5336831',
+});
+
+render(
+  <Sentry.ErrorBoundary fallback={ErrorFallback}>
+    <Index />
+  </Sentry.ErrorBoundary>,
+  container
+);
--- a/yarn.lock
+++ b/yarn.lock
@ -1875,6 +1875,70 @@
    estree-walker "^1.0.1"
    picomatch "^2.2.2"

+"@sentry/[email protected]":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.3.tgz#7a64bd1cf01bf393741a3e4bf35f82aa927f5b4e"
+  integrity sha512-2TzE/CoBa5ZkvxJizDdi1Iz1ldmXSJpFQ1mL07PIXBjCt0Wxf+WOuFSj5IP4L40XHfJE5gU8wEvSH0VDR8nXtA==
+  dependencies:
+    "@sentry/core" "5.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.3.tgz#030f435f2b518f282ba8bd954dac90cd70888bd7"
+  integrity sha512-eGL5uUarw3o4i9QUb9JoFHnhriPpWCaqeaIBB06HUpdcvhrjoowcKZj1+WPec5lFg5XusE35vez7z/FPzmJUDw==
+  dependencies:
+    "@sentry/hub" "5.22.3"
+    "@sentry/minimal" "5.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.3.tgz#08309a70d2ea8d5e313d05840c1711f34f2fffe5"
+  integrity sha512-INo47m6N5HFEs/7GMP9cqxOIt7rmRxdERunA3H2L37owjcr77MwHVeeJ9yawRS6FMtbWXplgWTyTIWIYOuqVbw==
+  dependencies:
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.3.tgz#706e4029ae5494123d3875c658ba8911aa5cc440"
+  integrity sha512-HoINpYnVYCpNjn2XIPIlqH5o4BAITpTljXjtAftOx6Hzj+Opjg8tR8PWliyKDvkXPpc4kXK9D6TpEDw8MO0wZA==
+  dependencies:
+    "@sentry/hub" "5.22.3"
+    "@sentry/types" "5.22.3"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]^5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-5.22.3.tgz#ed692f9e2aff718da6cd15d2941ddda4f1d63385"
+  integrity sha512-Or/tLayuxpOJhIWOXiDKdaJQZ981uRS9NT0QcPvU+Si1qTElSqtH1zB94GlwhgpglkbmLPiYq6VPrG2HOiZ79Q==
+  dependencies:
+    "@sentry/browser" "5.22.3"
+    "@sentry/minimal" "5.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/[email protected]":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.3.tgz#d1d547b30ee8bd7771fa893af74c4f3d71f0fd18"
+  integrity sha512-cv+VWK0YFgCVDvD1/HrrBWOWYG3MLuCUJRBTkV/Opdy7nkdNjhCAJQrEyMM9zX0sac8FKWKOHT0sykNh8KgmYw==
+
+"@sentry/[email protected]":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.3.tgz#e3bda3e789239eb16d436f768daa12829f33d18f"
+  integrity sha512-AHNryXMBvIkIE+GQxTlmhBXD0Ksh+5w1SwM5qi6AttH+1qjWLvV6WB4+4pvVvEoS8t5F+WaVUZPQLmCCWp6zKw==
+  dependencies:
+    "@sentry/types" "5.22.3"
+    tslib "^1.9.3"
+
 "@sinonjs/[email protected]^1.7.0":
  version "1.8.1"
  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.1.tgz#e7df00f98a203324f6dc7cc606cad9d4a8ab2217"
@ -8051,7 +8115,7 @@ [email protected]^1.0.0:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

-[email protected]^3.1.0, [email protected]^3.3.0:
+[email protected]^3.1.0, [email protected]^3.3.0, [email protected]^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==