feat: sentry instrumentation

Author: jaybuidl

scripts/sentry-release.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+
+cd $SCRIPT_DIR/..
+
+version="linguo@v$(cat package.json | jq -r .version)-$(git rev-parse --short HEAD)"
+sentry-cli releases new "$version"
+sentry-cli releases set-commits "$version" --auto
+
+rm -rf dist/
+yarn build
+sentry-cli releases files $version upload-sourcemaps dist/
+
+sentry-cli releases finalize "$version"
+
+cd -

src/app/MainRouter.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { SWRConfig } from 'swr';
 import { request } from 'graphql-request';
 
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Redirect, Switch } from 'react-router-dom';
 import loadable from '@loadable/component';
 import { Layout } from 'antd';
 import { ConnectedRouter } from 'connected-react-router';
@@ -15,7 +15,7 @@ import Footer from '~/layout/Footer';
 import Navbar from '~/layout/Header/Navbar';
 import { DrawerMenu } from '~/layout/Header/Menu';
 
-import { history } from '~/store';
+import { history, SentryRoute } from '~/store';
 import Content from './Content';
 import Web3ConnectionManager from '~/components/Web3ConnectionManager';
 import GlobalWarnings from '~/components/GlobalWarnings';
@@ -67,30 +67,30 @@ export default function MainRouter() {
               <TranslatorSkillsProvider>
                 <Content>
                   <Switch>
-                    <Route exact path={r.ROOT}>
+                    <SentryRoute exact path={r.ROOT}>
                       <Redirect to={r.HOME} />
-                    </Route>
-                    <Route exact path={r.HOME}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.HOME}>
                       <Home />
-                    </Route>
-                    <Route exact path={r.FAQ}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.FAQ}>
                       <Faq />
-                    </Route>
-                    <Route exact path={r.TRANSLATOR_DASHBOARD}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.TRANSLATOR_DASHBOARD}>
                       <TranslatorDashboard />
-                    </Route>
-                    <Route exact path={r.TRANSLATOR_SETTINGS}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.TRANSLATOR_SETTINGS}>
                       <TranslatorSettings />
-                    </Route>
-                    <Route exact path={r.TRANSLATION_REQUEST}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.TRANSLATION_REQUEST}>
                       <TranslationRequest />
-                    </Route>
-                    <Route exact path={r.REQUESTER_DASHBOARD}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.REQUESTER_DASHBOARD}>
                       <RequesterDashboard />
-                    </Route>
-                    <Route exact path={r.TRANSLATION_TASK_DETAILS}>
+                    </SentryRoute>
+                    <SentryRoute exact path={r.TRANSLATION_TASK_DETAILS}>
                       <TranslationDetails />
-                    </Route>
+                    </SentryRoute>
                   </Switch>
                 </Content>
               </TranslatorSkillsProvider>

src/index.jsx

@@ -7,15 +7,19 @@ import { PersistGate } from 'redux-persist/integration/react';
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
 import { Spin } from '~/adapters/antd';
-import store, { persistor } from './store';
+import store, { persistor, history } from './store';
 import App from './app/App';
 
 const loading = <Spin tip="Loading local data..." />;
 
 Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_ENDPOINT,
   environment: process.env.REACT_APP_CONTEXT,
-  integrations: [new BrowserTracing()],
+  integrations: [
+    new BrowserTracing({
+      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
+    }),
+  ],
   tracesSampleRate: 1.0,
 });
 

src/store/history.js

@@ -1,4 +1,8 @@
 import { createBrowserHistory } from 'history';
+import { Route } from 'react-router-dom';
+import * as Sentry from '@sentry/react';
+
+export const SentryRoute = Sentry.withSentryRouting(Route);
 
 const history = createBrowserHistory();
 export default history;

src/store/index.js

@@ -1,2 +1,2 @@
 export { default, persistor, runSaga } from './store';
-export { default as history } from './history';
+export { default as history, SentryRoute } from './history';