Add sentry source map tracking and release (#4731)

* Add sentry source map tracking and release

* Throw error

* Remove old scripts

* Remove throw button

* Add changeset

* Fix sentry in storybook

.changeset/gold-plants-build.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Enable sourcemaps export to Senty

.storybook/main.ts

@@ -22,7 +22,14 @@ const config: StorybookConfig = {
   },
 
   async viteFinal(config) {
-    config.plugins = await withoutVitePlugins(config.plugins, ["vite:html"]);
+    config.plugins = await withoutVitePlugins(config.plugins, [
+      "vite:html",
+      "sentry-telemetry-plugin",
+      "sentry-vite-release-injection-plugin",
+      "sentry-debug-id-upload-plugin",
+      "sentry-vite-debug-id-injection-plugin",
+      "sentry-vite-debug-id-upload-plugin",
+    ]);
 
     return mergeConfig(config, {
       build: {

package.json

@@ -42,6 +42,7 @@
     "@saleor/macaw-ui-next": "npm:@saleor/[email protected]",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^7.83.0",
+    "@sentry/vite-plugin": "^2.15.0",
     "@types/faker": "^5.1.6",
     "@uiw/react-color-hue": "0.0.34",
     "@uiw/react-color-material": "^0.1.0",
@@ -317,9 +318,6 @@
     "dev": "vite --host",
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
     "preview": "vite preview",
-    "sentry:inject": "sentry-cli sourcemaps inject build/dashboard",
-    "sentry:upload": "sentry-cli sourcemaps upload build/dashboard",
-    "sentry:clean": "node scripts/removeSourcemaps.js",
     "build-storybook": "cross-env NODE_OPTIONS=--max-old-space-size=6144 storybook build -o build/storybook",
     "build-types": "node scripts/build-types.js",
     "build-flags": "node scripts/build-flags.js",
@@ -348,7 +346,6 @@
     "lint": "eslint \"src/**/*.@(tsx|ts|jsx|js)\" --fix",
     "lint:check-progress": "eslint-nibble \"src/**/*.@(tsx|ts|jsx|js)\"",
     "prebuild": "npm run build-types",
-    "postbuild": "./scripts/sentry-upload.sh",
     "predev": "npm run build-types",
     "release": "echo $npm_package_version | xargs git tag && git push --follow-tags",
     "prepare": "is-ci || husky install",

src/services/errorTracking/adapters/Sentry.ts

@@ -5,6 +5,7 @@ import { TrackerMethods } from "../types";
 interface Config {
   dsn: string;
   environment?: string;
+  release?: string;
 }
 
 export const SentryAdapter = (config: Config): TrackerMethods => {
@@ -13,6 +14,7 @@ export const SentryAdapter = (config: Config): TrackerMethods => {
       Sentry.init({
         dsn: config.dsn,
         environment: config.environment,
+        release: config.release,
         ignoreErrors: [
           "Editor's content can not be saved in read-only mode",
           "ResizeObserver loop completed with undelivered notifications",

src/services/errorTracking/index.ts

@@ -6,6 +6,7 @@ const errorTracker = ErrorTrackerFactory(
   SentryAdapter({
     dsn: process.env.SENTRY_DSN,
     environment: process.env.ENVIRONMENT,
+    release: process.env.RELEASE_NAME,
   }),
 );
 

vite.config.js

@@ -1,13 +1,14 @@
 /* eslint-disable no-console */
 import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react-swc";
+import { CodeInspectorPlugin } from "code-inspector-plugin";
 import { copyFileSync, mkdirSync } from "fs";
 import path from "path";
 import nodePolyfills from "rollup-plugin-polyfill-node";
 import { defineConfig, loadEnv, searchForWorkspaceRoot } from "vite";
 import { createHtmlPlugin } from "vite-plugin-html";
 import { VitePWA } from "vite-plugin-pwa";
-import { CodeInspectorPlugin } from 'code-inspector-plugin';
 
 const copyOgImage = () => ({
   name: "copy-og-image",
@@ -45,20 +46,25 @@ export default defineConfig(({ command, mode }) => {
     FLAGS_SERVICE_ENABLED,
     LOCALE_CODE,
     POSTHOG_KEY,
-    POSTHOG_HOST
+    POSTHOG_HOST,
+    SENTRY_AUTH_TOKEN,
+    SENTRY_ORG,
+    SENTRY_PROJECT,
+    // eslint-disable-next-line camelcase
+    npm_package_version,
   } = env;
 
   const base = STATIC_URL ?? "/";
   const featureFlagsEnvs = Object.fromEntries(
     Object.entries(env).filter(([flagKey]) => flagKey.startsWith("FF_")),
   );
 
-  const sourcemap = SKIP_SOURCEMAPS ? false : true;
+  const sourcemap = !SKIP_SOURCEMAPS;
 
   const plugins = [
     react(),
     CodeInspectorPlugin({
-      bundler: 'vite',
+      bundler: "vite",
     }),
     createHtmlPlugin({
       entry: path.resolve(__dirname, "src", "index.tsx"),
@@ -94,7 +100,6 @@ export default defineConfig(({ command, mode }) => {
     copyOgImage(),
   ];
 
-
   if (!isDev) {
     console.log("Enabling service worker...");
 
@@ -113,6 +118,11 @@ export default defineConfig(({ command, mode }) => {
         srcDir: path.resolve(__dirname),
         filename: "sw.js",
       }),
+      sentryVitePlugin({
+        authToken: SENTRY_AUTH_TOKEN,
+        org: SENTRY_ORG,
+        project: SENTRY_PROJECT,
+      }),
     );
   }
 
@@ -157,7 +167,9 @@ export default defineConfig(({ command, mode }) => {
         SENTRY_RELEASE,
         STATIC_URL,
         POSTHOG_KEY,
-        POSTHOG_HOST
+        POSTHOG_HOST,
+        // eslint-disable-next-line camelcase
+        RELEASE_NAME: npm_package_version,
       },
     },
     build: {