Initial sentry improvements to deploy and verify against test.

client/src/App/App.container.jsx

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
+import * as Sentry from "@sentry/react";
 
 moment.locale("en-US");
 
@@ -18,7 +19,7 @@ export const factory = SplitSdk({
   },
 });
 
-export default function AppContainer() {
+function AppContainer() {
   const { t } = useTranslation();
 
   return (
@@ -42,3 +43,5 @@ export default function AppContainer() {
     </ApolloProvider>
   );
 }
+
+export default Sentry.withProfiler(AppContainer);

client/src/components/error-boundary/error-boundary.component.jsx

@@ -2,7 +2,7 @@ import { Button, Col, Collapse, Result, Row, Space } from "antd";
 import React from "react";
 import { withTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
-
+import * as Sentry from "@sentry/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -138,7 +138,6 @@ class ErrorBoundary extends React.Component {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation()(ErrorBoundary));
+export default Sentry.withErrorBoundary(
+  connect(mapStateToProps, mapDispatchToProps)(withTranslation()(ErrorBoundary))
+);

client/src/components/jobs-list/jobs-list.component.jsx

@@ -370,6 +370,14 @@ export function JobsList({ bodyshop }) {
         </Space>
       }
     >
+    <button
+  type="button"
+  onClick={() => {
+    throw new Error("Sentry Test Error");
+  }}
+>
+  Break the world
+</button>
       <Table
         loading={loading}
         pagination={{ defaultPageSize: 50 }}

client/src/graphql/apollo-error-handling.js

@@ -1,17 +1,21 @@
 import { onError } from "@apollo/client/link/error";
 //https://stackoverflow.com/questions/57163454/refreshing-a-token-with-apollo-client-firebase-auth
+import * as Sentry from "@sentry/react";
 
 const errorLink = onError(
   ({ graphQLErrors, networkError, operation, forward }) => {
-    if (graphQLErrors)
-      graphQLErrors.forEach(({ message, locations, path }) =>
+    if (graphQLErrors) {
+      graphQLErrors.forEach(({ message, locations, path }) => {
         console.log(
           `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
-        )
-      );
+        );
+        Sentry.captureException({ message, locations, path });
+      });
+    }
     if (networkError)
       console.log(`[Network error]: ${JSON.stringify(networkError)}`);
     console.log(operation.getContext());
+    return forward(operation);
   }
 );
 

client/src/index.js

@@ -14,38 +14,33 @@ import { persistor, store } from "./redux/store";
 import reportWebVitals from "./reportWebVitals";
 import "./translations/i18n";
 import "./utils/CleanAxios";
+
 //import { BrowserTracing } from "@sentry/tracing";
 
 // Dinero.defaultCurrency = "CAD";
 // Dinero.globalLocale = "en-CA";
 Dinero.globalRoundingMode = "HALF_EVEN";
 
-if (process.env.NODE_ENV !== "development") {
-  Sentry.init({
-    dsn: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
-    ignoreErrors: [
-      "ResizeObserver loop",
-      "Module specifier, 'fs' does not start",
-      "Module specifier, 'zlib' does not start with",
-    ],
-    integrations: [
-      // new BrowserTracing(),
-      // new Sentry.Integrations.Breadcrumbs({ console: true }),
-      //  new Sentry.Replay(),
-    ],
-    // This sets the sample rate to be 10%. You may want this to be 100% while
-    // in development and sample at a lower rate in production
-    // replaysSessionSampleRate: 0.1,
-    // // If the entire session is not sampled, use the below sample rate to sample
-    // // sessions when an error occurs.
-    // replaysOnErrorSampleRate: 1.0,
-    environment: process.env.NODE_ENV,
-    // tracesSampleRate: 0.2,
-    // We recommend adjusting this value in production, or using tracesSampler
-    // for finer control
-    //  tracesSampleRate: 0.5,
-  });
-}
+//if (process.env.NODE_ENV !== "development") {
+Sentry.init({
+  dsn: "https://fd7e89369b6b4bdc9c6c4c9f22fa4ee4@o492140.ingest.sentry.io/5651027",
+  ignoreErrors: [
+    "ResizeObserver loop",
+    "Module specifier, 'fs' does not start",
+    "Module specifier, 'zlib' does not start with",
+  ],
+  integrations: [
+    Sentry.replayIntegration({
+      maskAllText: false,
+      blockAllMedia: true,
+    }),
+    new Sentry.BrowserTracing(),
+  ],
+  tracesSampleRate: 1.0,
+  replaysOnErrorSampleRate: 1.0,
+  environment: process.env.NODE_ENV,
+});
+//}
 
 ReactDOM.render(
   <Provider store={store}>

client/src/utils/GraphQLClient.js

@@ -12,6 +12,8 @@ import apolloLogger from "apollo-link-logger";
 //import axios from "axios";
 import { auth } from "../firebase/firebase.utils";
 import errorLink from "../graphql/apollo-error-handling";
+import { SentryLink } from "apollo-link-sentry";
+
 //import { store } from "../redux/store";
 const httpLink = new HttpLink({
   uri: process.env.REACT_APP_GRAPHQL_ENDPOINT,
@@ -105,18 +107,30 @@ const link = split(
 const authLink = setContext((_, { headers }) => {
   return (
     auth.currentUser &&
-    auth.currentUser.getIdToken().then((token) => {
-      if (token) {
-        return {
-          headers: {
-            ...headers,
-            authorization: token ? `Bearer ${token}` : "",
-          },
-        };
-      } else {
+    auth.currentUser
+      .getIdToken()
+      .then((token) => {
+        if (token) {
+          return {
+            headers: {
+              ...headers,
+              authorization: token ? `Bearer ${token}` : "",
+            },
+          };
+        } else {
+          console.error(
+            "Authentication error. Unable to add authorization token because it was empty."
+          );
+          return { headers };
+        }
+      })
+      .catch((error) => {
+        console.error(
+          "Authentication error. Unable to add authorization token.",
+          error.message
+        );
         return { headers };
-      }
-    })
+      })
   );
 });
 
@@ -138,8 +152,10 @@ if (process.env.NODE_ENV === "development") {
 }
 
 middlewares.push(
-  roundTripLink.concat(
-    retryLink.concat(errorLink.concat(authLink.concat(link)))
+  new SentryLink().concat(
+    roundTripLink.concat(
+      retryLink.concat(errorLink.concat(authLink.concat(link)))
+    )
   )
 );