perf: 🔧 Configura o Sentry na aplicação

.eslintrc.json

@@ -48,6 +48,6 @@
     "class-methods-use-this": "off",
     "indent": "off",
     "max-len": "off",
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+    "import/no-extraneous-dependencies": ["off"]
   }
 }

.gitignore

@@ -65,4 +65,6 @@ coverage/*
 # Snyk
 snyk-linux
 
-services.sqlite
+services.sqlite
+# Sentry Config File
+.env.sentry-build-plugin

README.md

@@ -1,8 +1,6 @@
-
 ![Logo](https://firebasestorage.googleapis.com/v0/b/runnerdois.appspot.com/o/ServicesProject%2FImages%2FServices%20-%20Capa.png?alt=media&token=a5131cc4-2b48-4500-b90f-a22d55352242)
 ![](https://api.checklyhq.com/v1/badges/checks/dd6528e6-fac1-4d85-8295-5b0697e16d86?style=flat&theme=dark)
 
-
 # ⛓️‍💥Desburocratizador do gerenciamento de chamados
 
 Se você já algum dia precisou abrir um chamado sabe o quão chato e burocratico esse processo é. E formulários e mais formulários, sistemas tão antigos que fazem o windows 7 parecer uma arte minimalista.
@@ -11,40 +9,33 @@ Pensando em trazer algo mais moderno para esse tipo de sistema surgiu o Services
 
 Chega de formulários gigantes ou mal diagramados, chega de adicionar informações duvidosas, não é como você sempre coloque seu chamado com a prioridade alta, não é?
 
-
 ## 🎉 Bem vindo ao Services!
 
 O Services vem para trazer uma experiência um pouco diferente na hora de registar o seu problema, são três etapas:
 
-* Você diz o que aconteceu
-* Adiciona, ou não, as evidências
-* E verifica se tá tudo ok para registrar, simples.
+- Você diz o que aconteceu
+- Adiciona, ou não, as evidências
+- E verifica se tá tudo ok para registrar, simples.
 
 Você não precisa saber para quem enviar, qual o setor responsável, qual é a urgência do seu chamado ou algo do tipo. O Services se encarrega por isso, e não é só isso, o Services:
 
-
-
-
 ![Logo](https://firebasestorage.googleapis.com/v0/b/runnerdois.appspot.com/o/ServicesProject%2FImages%2FFuncionalidades.png?alt=media&token=063796b2-ebec-4970-992d-247c6e637048)
 
-
 ## 📃 Licença
 
 Para isso o Services possui a licença [GNU General Public License v3.0](https://choosealicense.com/licenses/gpl-3.0/), isso significa que:
 
-* Liberdade de Uso: Você pode usar este software para qualquer finalidade.
+- Liberdade de Uso: Você pode usar este software para qualquer finalidade.
 
-* Liberdade de Distribuição: Você pode redistribuir cópias deste software.
-* Liberdade de Modificação: Você pode modificar o software e distribuir essas modificações, desde que também estejam sob a GNU GPLv3.
+- Liberdade de Distribuição: Você pode redistribuir cópias deste software.
+- Liberdade de Modificação: Você pode modificar o software e distribuir essas modificações, desde que também estejam sob a GNU GPLv3.
 
-* Distribuição de Código-Fonte: Ao distribuir o software, seja de forma modificada ou não, você deve disponibilizar o código-fonte completo.
-
-* Uso em Rede: Se você modificar este software e permitir que outros o utilizem através de uma rede (por exemplo, um aplicativo web), você deve disponibilizar o código-fonte da sua versão modificada para esses usuários.
+- Distribuição de Código-Fonte: Ao distribuir o software, seja de forma modificada ou não, você deve disponibilizar o código-fonte completo.
 
+- Uso em Rede: Se você modificar este software e permitir que outros o utilizem através de uma rede (por exemplo, um aplicativo web), você deve disponibilizar o código-fonte da sua versão modificada para esses usuários.
 
 Saiba mais clicando no link ao lado: [GNU GPLv3](https://choosealicense.com/licenses/gpl-3.0/)
 
-
 ## 🛠 Stack utilizada
 
 **Front-end:** Next 14, Styled Components, Zustand, Typescript
@@ -53,7 +44,6 @@ Saiba mais clicando no link ao lado: [GNU GPLv3](https://choosealicense.com/lice
 
 **Testes:** Playwright, React Testign Library
 
-
 ## 💾 Rodando localmente
 
 Clone o projeto
@@ -80,7 +70,6 @@ Inicie o servidor
   yarn dev # ou rode npm run dev
 ```
 
-
 ## Variáveis de Ambiente
 
 Para rodar esse projeto, você vai precisar adicionar as seguintes variáveis de ambiente no seu .env
@@ -89,19 +78,19 @@ Para rodar esse projeto, você vai precisar adicionar as seguintes variáveis de
 
 `NODE_ENV` - development | production
 
-`HOST_ENV` - development | qas | pre-stage | production
+`NODE_ENV` - development | qas | pre-stage | production
 
 `APPLICATION_PORT` - Porta onde a aplicação está rodando
 
 `BASE_URL` - Url da aplicação
 
 `APIS_BASE_URL` Url das apis da aplicação, por padrão a aplicação utiliza o seu próprio servidor para se comunicar com o banco de dados
 
-`NEXT_PUBLIC_BASE_URL`=$BASE_URL 
+`NEXT_PUBLIC_BASE_URL`=$BASE_URL
 
 `NEXT_PUBLIC_NODE_ENV`=$NODE_ENV
 
-`NEXT_PUBLIC_HOST_ENV`=$HOST_ENV
+`NEXT_PUBLIC_NODE_ENV`=$NODE_ENV
 
 `NEXT_PUBLIC_APIS_BASE_URL`=$APIS_BASE_URL
 
@@ -119,10 +108,8 @@ Para rodar esse projeto, você vai precisar adicionar as seguintes variáveis de
 
 `DB_STORAGE` - Nome do arquivo utilizado para armazenar os dados, exlusivo do SQlite
 
-
 ### Opcionais
 
-
 `SENTRY_PROJECT`
 
 `SENTRY_ORG`
@@ -150,6 +137,3 @@ Para rodar esse projeto, você vai precisar adicionar as seguintes variáveis de
 ## Autores
 
 - [@welllucky](https://github.com/welllucky)
-
-
-

next.config.js

@@ -47,3 +47,47 @@ const withPWA = require("next-pwa")({
 });
 
 module.exports = withPWA(nextConfig);
+
+// Injected content via Sentry wizard below
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(module.exports, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  // automaticVercelMonitors: true,
+  // autoInstrumentMiddleware: true,
+  // autoInstrumentAppDirectory: true,
+  // telemetry: true,
+  release: process.env.NEXT_PUBLIC_RELEASE,
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "services",
-  "version": "0.1.15",
+  "version": "0.1.19",
   "private": true,
   "repository": {
     "type": "git",
@@ -36,6 +36,8 @@
     "@emotion/is-prop-valid": "^1.2.1",
     "@phosphor-icons/react": "^2.0.15",
     "@react-spring/web": "^9.7.3",
+    "@sentry/nextjs": "^8",
+    "@spotlightjs/spotlight": "^2.2.2",
     "@uidotdev/usehooks": "^2.4.1",
     "@use-gesture/react": "^10.3.0",
     "@vercel/analytics": "^1.1.1",
@@ -67,7 +69,7 @@
     "@babel/eslint-parser": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@next/eslint-plugin-next": "^14.1.0",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.46.0",
     "@storybook/addon-coverage": "^1.0.0",
     "@storybook/addon-essentials": "^7.6.7",
     "@storybook/addon-interactions": "^7.6.7",

playwright.config.ts

@@ -4,6 +4,7 @@ import { defineConfig, devices } from "@playwright/test";
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 require("dotenv").config();
 
 /**
@@ -31,7 +32,7 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
 
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 4 : undefined,
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: [
@@ -40,9 +41,9 @@ export default defineConfig({
       {
         outputFolder: "./tests/playwright/report",
         host: "localhost",
-        port: 4100
-      }
-    ]
+        port: 4100,
+      },
+    ],
   ],
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -109,7 +110,8 @@ export default defineConfig({
     // Toggles bypassing Content-Security-Policy.
     bypassCSP: true,
 
-    userAgent: "L3/1.0 tester worker ua (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
+    userAgent:
+      "L3/1.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Mobile Safari/537.36",
   },
 
   expect: {
@@ -118,46 +120,53 @@ export default defineConfig({
 
     toHaveScreenshot: {
       // An acceptable amount of pixels that could be different, unset by default.
-      maxDiffPixels: 10
+      maxDiffPixels: 10,
     },
 
     toMatchSnapshot: {
       // An acceptable ratio of pixels that are different to the
       // total amount of pixels, between 0 and 1.
-      maxDiffPixelRatio: 0.1
-    }
+      maxDiffPixelRatio: 0.1,
+    },
   },
 
   /* Configure projects for major browsers */
   projects: [
     // { name: "setup", testMatch: "./tests/setup/*.setup.ts" },
     {
       name: "Android Mid Level",
-      use: { ...devices["Galaxy S9+"] }
+      use: { ...devices["Galaxy S9+"] },
       // dependencies: ["setup"],
     },
     {
       name: "Android High Level",
-      use: { ...devices["Pixel 7"] }
+      use: { ...devices["Pixel 7"] },
       // dependencies: ["setup"],
     },
     {
       name: "Iphone low level",
-      use: { ...devices["iPhone 8 Plus"]}
+      use: { ...devices["iPhone 8 Plus"] },
       // dependencies: ["setup"],
-    }, 
+    },
     {
       name: "Iphone High level",
-      use: {...devices["iPhone XR"] }
-      // dependencies: ["setup"],   
-    }
+      use: { ...devices["iPhone XR"] },
+      // dependencies: ["setup"],
+    },
+    {
+      name: "Desktop",
+      testMatch: "**/noMobileDevice/**",
+      use: { ...devices["Desktop Chrome"] },
+      // dependencies
+    },
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: {
     command: "yarn dev",
-    url: "http://localhost:3000",
-    reuseExistingServer: !process.env.CI
+    url: process.env.BASE_URL || "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 5000,
     // reuseExistingServer: true
-  }
+  },
 });

sentry.client.config.ts

@@ -0,0 +1,42 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+// import * as Spotlight from "@spotlightjs/spotlight";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate:
+    process.env.NEXT_PUBLIC_NODE_ENV === "development" ? 1.0 : 0.8,
+
+  replaysOnErrorSampleRate:
+    process.env.NEXT_PUBLIC_NODE_ENV === "development" ? 1.0 : 0.8,
+
+  // 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:
+    process.env.NEXT_PUBLIC_NODE_ENV === "development" ? 1.0 : 0.8,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: false,
+      blockAllMedia: false,
+    }),
+  ],
+
+  environment: process.env.NEXT_PUBLIC_NODE_ENV,
+
+  release: process.env.NEXT_PUBLIC_RELEASE,
+
+  spotlight: process.env.NEXT_PUBLIC_NODE_ENV === "development",
+});
+
+// if (process.env.NEXT_PUBLIC_NODE_ENV === "development") {
+//   Spotlight.init();
+// }

sentry.edge.config.ts

@@ -0,0 +1,20 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate:
+    process.env.NEXT_PUBLIC_NODE_ENV === "development" ? 1.0 : 0.8,
+
+  environment: process.env.NEXT_PUBLIC_NODE_ENV,
+
+  release: process.env.NEXT_PUBLIC_RELEASE,
+
+  spotlight: process.env.NEXT_PUBLIC_NODE_ENV === "development",
+});

sentry.server.config.ts

@@ -0,0 +1,19 @@
+// 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";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate:
+    process.env.NEXT_PUBLIC_NODE_ENV === "development" ? 1.0 : 0.8,
+
+  environment: process.env.NEXT_PUBLIC_NODE_ENV,
+
+  release: process.env.NEXT_PUBLIC_RELEASE,
+
+  spotlight: process.env.NEXT_PUBLIC_NODE_ENV === "development",
+});