From f6370ccf6defe5681bab642b591cdd4b5e9670b6 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 22 Jan 2021 20:42:45 -0800 Subject: [PATCH] chore: Sentry performance monitoring (#1841) * Hook up performance monitoring * lint --- app/index.js | 11 +++++- app/utils/sentry.js | 28 ++++++++++++++ package.json | 4 +- server/routes.js | 1 - server/static/index.html | 22 ----------- shared/i18n/index.js | 2 +- yarn.lock | 79 +++++++++++++++++++++++++++++++++++++++- 7 files changed, 118 insertions(+), 29 deletions(-) create mode 100644 app/utils/sentry.js diff --git a/app/index.js b/app/index.js index ac495d0e..c991c9cd 100644 --- a/app/index.js +++ b/app/index.js @@ -1,11 +1,12 @@ // @flow import "focus-visible"; +import { createBrowserHistory } from "history"; import { Provider } from "mobx-react"; import * as React from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; import { render } from "react-dom"; -import { BrowserRouter as Router } from "react-router-dom"; +import { Router } from "react-router-dom"; import { initI18n } from "shared/i18n"; import stores from "stores"; import ErrorBoundary from "components/ErrorBoundary"; @@ -14,10 +15,16 @@ import Theme from "components/Theme"; import Toasts from "components/Toasts"; import Routes from "./routes"; import env from "env"; +import { initSentry } from "utils/sentry"; initI18n(); const element = document.getElementById("root"); +const history = createBrowserHistory(); + +if (env.SENTRY_DSN) { + initSentry(history); +} if (element) { render( @@ -25,7 +32,7 @@ if (element) { - + <> diff --git a/app/utils/sentry.js b/app/utils/sentry.js new file mode 100644 index 00000000..069ca748 --- /dev/null +++ b/app/utils/sentry.js @@ -0,0 +1,28 @@ +// @flow +import * as Sentry from "@sentry/react"; +import { Integrations } from "@sentry/tracing"; +import { type RouterHistory } from "react-router-dom"; +import env from "env"; + +export function initSentry(history: RouterHistory) { + Sentry.init({ + dsn: env.SENTRY_DSN, + integrations: [ + new Integrations.BrowserTracing({ + routingInstrumentation: Sentry.reactRouterV5Instrumentation(history), + }), + ], + tracesSampleRate: process.env.NODE_ENV === "production" ? 0.1 : 1, + ignoreErrors: [ + "ResizeObserver loop limit exceeded", + "AuthorizationError", + "BadRequestError", + "NetworkError", + "NotFoundError", + "OfflineError", + "ServiceUnavailableError", + "UpdateRequiredError", + "ChunkLoadError", + ], + }); +} diff --git a/package.json b/package.json index 71398386..375b5eca 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,8 @@ "@babel/preset-react": "^7.10.4", "@rehooks/window-scroll-position": "^1.0.1", "@sentry/node": "^5.23.0", + "@sentry/react": "^6.0.1", + "@sentry/tracing": "^6.0.1", "@tippy.js/react": "^2.2.2", "@tommoor/remove-markdown": "0.3.1", "autotrack": "^2.4.1", @@ -148,7 +150,7 @@ "react-keydown": "^1.7.3", "react-modal": "^3.1.2", "react-portal": "^4.0.0", - "react-router-dom": "^5.1.2", + "react-router-dom": "^5.2.0", "react-virtualized-auto-sizer": "^1.0.2", "react-waypoint": "^9.0.2", "react-window": "^1.8.6", diff --git a/server/routes.js b/server/routes.js index 0efae32c..37077ccf 100644 --- a/server/routes.js +++ b/server/routes.js @@ -52,7 +52,6 @@ const renderApp = async (ctx, next) => { .toString() .replace(/\/\/inject-env\/\//g, env) .replace(/\/\/inject-prefetch\/\//g, prefetchTags) - .replace(/\/\/inject-sentry-dsn\/\//g, process.env.SENTRY_DSN || "") .replace(/\/\/inject-slack-app-id\/\//g, process.env.SLACK_APP_ID || ""); }; diff --git a/server/static/index.html b/server/static/index.html index 285907fd..f7a0d1f8 100644 --- a/server/static/index.html +++ b/server/static/index.html @@ -44,29 +44,7 @@ -