Add Sentry to data-importer (#226)

.changeset/spicy-scissors-report.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-data-importer": minor
+---
+
+App now is configured with Sentry Wizard and will log to sentry if proper env variables are set

.gitignore

@@ -40,3 +40,5 @@ test-invoice.pdf
 coverage/
 apps/**/generated
 .eslintcache
+
+.sentryclirc

apps/data-importer/next.config.js

@@ -1,3 +1,9 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+const { withSentryConfig } = require("@sentry/nextjs");
+
 /**
  * @type {import('next').NextConfig}
  */
@@ -8,3 +14,5 @@ module.exports = {
   },
   transpilePackages: ["nuvo-react", "@saleor/apps-shared"],
 };
+
+module.exports = withSentryConfig(module.exports, { silent: true }, { hideSourcemaps: true });

apps/data-importer/package.json

@@ -20,7 +20,9 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@saleor/app-sdk": "0.29.0",
+    "@saleor/apps-shared": "workspace:*",
     "@saleor/macaw-ui": "^0.7.2",
+    "@sentry/nextjs": "^7.39.0",
     "@urql/exchange-auth": "^1.0.0",
     "@vitejs/plugin-react": "^3.1.0",
     "clsx": "^1.2.1",
@@ -37,11 +39,9 @@
     "usehooks-ts": "^2.9.1",
     "vite": "^4.1.1",
     "vitest": "^0.28.4",
-    "zod": "^3.20.2",
+    "zod": "^3.20.2"
-    "@saleor/apps-shared": "workspace:*"
   },
   "devDependencies": {
-    "eslint": "^8.33.0",
     "@graphql-codegen/cli": "2.13.3",
     "@graphql-codegen/introspection": "2.2.1",
     "@graphql-codegen/typed-document-node": "^2.3.3",
@@ -56,9 +56,10 @@
     "@types/node": "^18.8.1",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "typescript": "4.9.5",
+    "@vitest/coverage-c8": "^0.28.4",
+    "eslint": "^8.33.0",
     "eslint-config-saleor": "workspace:*",
-    "@vitest/coverage-c8": "^0.28.4"
+    "typescript": "4.9.5"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --cache --fix",

apps/data-importer/sentry.client.config.js

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

apps/data-importer/sentry.edge.config.js

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever middleware or an Edge route handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

apps/data-importer/sentry.properties

@@ -0,0 +1,3 @@
+defaults.url=https://sentry.io/
+defaults.org=saleor
+defaults.project=saleor-app-data-importer

apps/data-importer/sentry.server.config.js

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1.0,
+  // ...
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

apps/data-importer/src/pages/_error.js

@@ -0,0 +1,39 @@
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
+
+import * as Sentry from "@sentry/nextjs";
+import NextErrorComponent from "next/error";
+
+const CustomErrorComponent = (props) => {
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
+
+  return <NextErrorComponent statusCode={props.statusCode} />;
+};
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData);
+
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData);
+};
+
+export default CustomErrorComponent;

pnpm-lock.yaml

@@ -36,6 +36,7 @@ importers:
       '@saleor/app-sdk': 0.29.0
       '@saleor/apps-shared': workspace:*
       '@saleor/macaw-ui': ^0.7.2
+      '@sentry/nextjs': ^7.39.0
       '@testing-library/react': ^13.4.0
       '@testing-library/react-hooks': ^8.0.1
       '@types/dot-object': ^2.1.2
@@ -70,6 +71,7 @@ importers:
       '@saleor/app-sdk': 0.29.0_3vryta7zmbcsw4rrqf4axjqggm
       '@saleor/apps-shared': link:../../packages/shared
       '@saleor/macaw-ui': 0.7.2_pmlnlm755hlzzzocw2qhf3a34e
+      '@sentry/nextjs': 7.39.0_next@13.1.6+react@18.2.0
       '@urql/exchange-auth': 1.0.0_graphql@16.6.0
       '@vitejs/plugin-react': 3.1.0_vite@4.1.1
       clsx: 1.2.1
@@ -4186,6 +4188,17 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/browser/7.39.0:
+    resolution: {integrity: sha512-LSa89bLDfGK33ArrgutVU8p4UDb809BgOn29qe/YPUL/Wor+cO59XoEmKVmXEqMZYEVjsaUVoBanUoxXKSlYgw==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.39.0
+      '@sentry/replay': 7.39.0
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      tslib: 1.14.1
+    dev: false
+
   /@sentry/cli/1.74.6:
     resolution: {integrity: sha512-pJ7JJgozyjKZSTjOGi86chIngZMLUlYt2HOog+OJn+WGvqEkVymu8m462j1DiXAnex9NspB4zLLNuZ/R6rTQHg==}
     engines: {node: '>= 8'}
@@ -4213,6 +4226,15 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/core/7.39.0:
+    resolution: {integrity: sha512-45WJIcWWCQnZ8zhHtcrkJjQ4YydmzMWY4pmRuBG7Qp+zrCT6ISoyODcjY+SCHFdvXkiYFi8+bFZa1qG3YQnnYw==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      tslib: 1.14.1
+    dev: false
+
   /@sentry/integrations/7.36.0:
     resolution: {integrity: sha512-wrRoUqdeGi64NNimGVk8U8DBiXamxTYPBux0/faFDyau8EJyQFcv8zOyB78Za4W2Ss3ZXNaE/WtFF8UxalHzBQ==}
     engines: {node: '>=8'}
@@ -4223,6 +4245,16 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/integrations/7.39.0:
+    resolution: {integrity: sha512-NJzPSAI8/YqlHj0ZbrIQrRRb4CE0IhH2UAmp96HbSqXyfiSBrGrEjPurgjKPjkYiWDpUiSolN5bhAxRG5xbe/w==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      localforage: 1.10.0
+      tslib: 1.14.1
+    dev: false
+
   /@sentry/nextjs/7.36.0_next@13.1.0+react@18.2.0:
     resolution: {integrity: sha512-7IUwBjCjo3rWuvEG16D1wKb0D+aMyCU920VGCAQVZaqTZAgrgAKfpTa1Sk0fmDxYglW1EBI9QM+WEnOa9RleLw==}
     engines: {node: '>=8'}
@@ -4283,6 +4315,36 @@ packages:
       - supports-color
     dev: false
 
+  /@sentry/nextjs/7.39.0_next@13.1.6+react@18.2.0:
+    resolution: {integrity: sha512-CXd9aQD/ekDqzzI8FEPatDJ6tFHuQy127zaECRmi4D40nmYzVLvskS2/i3LoozeCHUZcIwOJSimMZZOc3CjlvQ==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      next: ^10.0.8 || ^11.0 || ^12.0 || ^13.0
+      react: 16.x || 17.x || 18.x
+      webpack: '>= 4.0.0'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+    dependencies:
+      '@rollup/plugin-commonjs': 24.0.0_rollup@2.78.0
+      '@sentry/core': 7.39.0
+      '@sentry/integrations': 7.39.0
+      '@sentry/node': 7.39.0
+      '@sentry/react': 7.39.0_react@18.2.0
+      '@sentry/tracing': 7.39.0
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      '@sentry/webpack-plugin': 1.20.0
+      chalk: 3.0.0
+      next: 13.1.6_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      rollup: 2.78.0
+      tslib: 1.14.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
   /@sentry/node/7.36.0:
     resolution: {integrity: sha512-nAHAY+Rbn5OlTpNX/i6wYrmw3hT/BtwPZ/vNU52cKgw7CpeE1UrCeFjnPn18rQPB7lIh7x0vNvoaPrfemRzpSQ==}
     engines: {node: '>=8'}
@@ -4298,6 +4360,21 @@ packages:
       - supports-color
     dev: false
 
+  /@sentry/node/7.39.0:
+    resolution: {integrity: sha512-oe1OBxgs6t/FizjxkSPtuvJv5wJMO+mLENZkiE0PpBD56JyZrWK48kYIt2ccWAfk6Vh235/oIpmqET150xB4lQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.39.0
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      cookie: 0.4.2
+      https-proxy-agent: 5.0.1
+      lru_map: 0.3.3
+      tslib: 1.14.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@sentry/react/7.36.0_react@18.2.0:
     resolution: {integrity: sha512-ttrRqbgeqvkV3DwkDRZC/V8OEnBKGpQf4dKpG8oMlfdVbMTINzrxYUgkhi9xAkxkH9O+vj3Md8L3Rdqw/SDwKQ==}
     engines: {node: '>=8'}
@@ -4312,6 +4389,20 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/react/7.39.0_react@18.2.0:
+    resolution: {integrity: sha512-hoElDK2Z5RwBlXiIQEjmZcxImP6ZjZRAKvycVq6dEDwghmL2bJeTVyCTqCh+YnyYzUXVW+WJRaWHexSZuTHbvg==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: 15.x || 16.x || 17.x || 18.x
+    dependencies:
+      '@sentry/browser': 7.39.0
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+      tslib: 1.14.1
+    dev: false
+
   /@sentry/replay/7.36.0:
     resolution: {integrity: sha512-wNbME74/2GtkqdDXz7NaStyfPWVLjYmN9TFWvu6E9sNl9pkDDvii/Qc8F6ps1wa7bozkKcWRHgNvYiGCxUBHcg==}
     engines: {node: '>=12'}
@@ -4321,6 +4412,15 @@ packages:
       '@sentry/utils': 7.36.0
     dev: false
 
+  /@sentry/replay/7.39.0:
+    resolution: {integrity: sha512-pL5JMk/fOx9KFbNBnqoJQwx7X0ZM4BrypWMzkGKsoENjm5sn6pB/dtO4N4k3gmIy929a89d1qL+HbxHAAxFylQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@sentry/core': 7.39.0
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+    dev: false
+
   /@sentry/tracing/7.36.0:
     resolution: {integrity: sha512-5R5mfWMDncOcTMmmyYMjgus1vZJzIFw4LHaSbrX7e1IRNT/6vFyNeVxATa2ePXb9mI3XHo5f2p7YrnreAtaSXw==}
     engines: {node: '>=8'}
@@ -4331,11 +4431,26 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/tracing/7.39.0:
+    resolution: {integrity: sha512-bSRdUMzp/n54J+Qf4hHC4WVvdv4vZEv3NEbNNsnIZNAhnVAq6QB9VzsGRJZ12PqxJU3StDuqLiZFVOmGxETCkQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/core': 7.39.0
+      '@sentry/types': 7.39.0
+      '@sentry/utils': 7.39.0
+      tslib: 1.14.1
+    dev: false
+
   /@sentry/types/7.36.0:
     resolution: {integrity: sha512-uvfwUn3okAWSZ948D/xqBrkc3Sn6TeHUgi3+p/dTTNGAXXskzavgfgQ4rSW7f3YD4LL+boZojpoIARVLodMGuA==}
     engines: {node: '>=8'}
     dev: false
 
+  /@sentry/types/7.39.0:
+    resolution: {integrity: sha512-5Y83Y8O3dT5zT2jTKEIPMcpn5lUm05KRMaCXuw0sRsv4r9TbBUKeqiSU1LjowT8rB/XNy8m7DHav8+NmogPaJw==}
+    engines: {node: '>=8'}
+    dev: false
+
   /@sentry/utils/7.36.0:
     resolution: {integrity: sha512-mgDi5X5Bm0sydCzXpnyKD/sD98yc2qnKXyRdNX4HRRwruhC/P53LT0hGhZXsyqsB/l8OAMl0zWXJLg0xONQsEw==}
     engines: {node: '>=8'}
@@ -4344,6 +4459,14 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /@sentry/utils/7.39.0:
+    resolution: {integrity: sha512-/ZxlPgm1mGgmuMckCTc9iyqDuFTEYNEoMB53IjVFz8ann+37OiWB7Py/QV1rEEsv3xKrGbA8thhRhV9E1sjTlQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@sentry/types': 7.39.0
+      tslib: 1.14.1
+    dev: false
+
   /@sentry/webpack-plugin/1.20.0:
     resolution: {integrity: sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==}
     engines: {node: '>= 8'}