Logging (#66)

* feat: Added basic error tracing to widget and api

* feat: Added AppShell

apps/api/package.json

@@ -26,6 +26,7 @@
     "@nestjs/core": "^9.1.2",
     "@nestjs/platform-express": "^9.1.2",
     "@nestjs/swagger": "^6.1.2",
+    "@sentry/node": "^7.19.0",
     "ajv": "^8.11.0",
     "ajv-formats": "^2.1.1",
     "ajv-keywords": "^5.1.0",

apps/api/src/.env.development

@@ -13,3 +13,6 @@ S3_BUCKET_NAME=impler
 
 # Security
 ACCESS-KEY=
+
+# Analytics
+SENTRY_DSN=

apps/api/src/.env.production

@@ -13,3 +13,6 @@ S3_BUCKET_NAME=impler
 
 # Security
 ACCESS-KEY=
+
+# Analytics
+SENTRY_DSN=

apps/api/src/bootstrap.ts

@@ -1,5 +1,6 @@
 import './config';
 
+import * as Sentry from '@sentry/node';
 import { INestApplication, ValidationPipe, Logger } from '@nestjs/common';
 import * as compression from 'compression';
 import { NestFactory } from '@nestjs/core';
@@ -9,6 +10,20 @@ import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
 import { AppModule } from './app.module';
 import { validateEnv } from './config/env-validator';
 import { ACCESS_KEY_NAME } from '@impler/shared';
+import { version } from '../package.json';
+
+if (process.env.SENTRY_DSN) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    environment: process.env.NODE_ENV,
+    release: `v${version}`,
+    ignoreErrors: ['Non-Error exception captured'],
+    integrations: [
+      // enable HTTP calls tracing
+      new Sentry.Integrations.Http({ tracing: true }),
+    ],
+  });
+}
 
 // Validate the ENV variables after launching SENTRY, so missing variables will report to sentry
 validateEnv();
@@ -21,6 +36,11 @@ export async function bootstrap(expressApp?): Promise<INestApplication> {
     app = await NestFactory.create(AppModule);
   }
 
+  if (process.env.SENTRY_DSN) {
+    app.use(Sentry.Handlers.requestHandler());
+    app.use(Sentry.Handlers.tracingHandler());
+  }
+
   app.enableCors(corsOptionsDelegate);
 
   app.setGlobalPrefix('v1');
@@ -69,7 +89,7 @@ const corsOptionsDelegate = function (req, callback) {
   const corsOptions = {
     origin: false as boolean | string | string[],
     preflightContinue: false,
-    allowedHeaders: ['Content-Type', ACCESS_KEY_NAME],
+    allowedHeaders: ['Content-Type', ACCESS_KEY_NAME, 'sentry-trace', 'baggage'],
     methods: ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
   };
 

apps/api/src/config/env-validator.ts

@@ -16,6 +16,7 @@ const validators: { [K in keyof any]: ValidatorSpec<any[K]> } = {
   FRONT_BASE_URL: url(),
   MONGO_URL: str(),
   RABBITMQ_CONN_URL: str(),
+  SENTRY_DSN: str(),
 };
 
 export function validateEnv() {

apps/api/src/types/env.d.ts

@@ -5,7 +5,7 @@ declare namespace NodeJS {
     PORT: number;
     'ACCESS-KEY'?: string;
     FRONT_BASE_URL: string;
-
+    SENTRY_DSN: string;
     MONGO_URL: string;
     S3_LOCAL_STACK: string;
     S3_REGION: string;

apps/widget/.example.env

@@ -1 +1,2 @@
-REACT_APP_API_URL=http://localhost:3000
+REACT_APP_API_URL=http://localhost:3000
+REACT_APP_SENTRY_DSN=

apps/widget/package.json

@@ -45,6 +45,8 @@
     "@mantine/core": "^5.6.3",
     "@mantine/dropzone": "^5.6.3",
     "@mantine/notifications": "5.6.3",
+    "@sentry/react": "^7.19.0",
+    "@sentry/tracing": "^7.19.0",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/react": "^6.5.13",
     "@tanstack/react-query": "^4.14.5",

apps/widget/src/components/App.tsx

@@ -1,11 +1,28 @@
+import * as Sentry from '@sentry/react';
+import { Integrations } from '@sentry/tracing';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { NotificationsProvider } from '@mantine/notifications';
 import { MantineProvider } from '@mantine/core';
-import { CONTEXT_PATH, mantineConfig, variables } from '@config';
+import { CONTEXT_PATH, mantineConfig, variables, SENTRY_DSN, ENV } from '@config';
 import { WidgetShell } from './ApplicationShell';
 import { Container } from './Common/Container';
 import { Widget } from './widget';
+import { AppShell } from './Common/AppShell';
+
+if (SENTRY_DSN) {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    integrations: [new Integrations.BrowserTracing()],
+    environment: ENV,
+    /*
+     * Set tracesSampleRate to 1.0 to capture 100%
+     * of transactions for performance monitoring.
+     * We recommend adjusting this value in production
+     */
+    tracesSampleRate: 1.0,
+  });
+}
 
 export function App() {
   const queryClient = new QueryClient({
@@ -28,11 +45,13 @@ export function App() {
               <Route
                 path="/:projectId"
                 element={
-                  <WidgetShell>
-                    <Container>
-                      <Widget />
-                    </Container>
-                  </WidgetShell>
+                  <AppShell>
+                    <WidgetShell>
+                      <Container>
+                        <Widget />
+                      </Container>
+                    </WidgetShell>
+                  </AppShell>
                 }
               />
             </Routes>

apps/widget/src/components/Common/AppShell/AppShell.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react';
+import * as Sentry from '@sentry/react';
+
+export function AppShell({ children }: PropsWithChildren<{}>) {
+  return (
+    <Sentry.ErrorBoundary
+      fallback={({ error, eventId }) => (
+        <>
+          Sorry, but something went wrong. <br />
+          Our team been notified about it and we will look at it asap.
+          <br />
+          <code>
+            <small style={{ color: 'lightGrey' }}>
+              Event Id: {eventId}.
+              <br />
+              {error.toString()}
+            </small>
+          </code>
+        </>
+      )}
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  );
+}

apps/widget/src/components/Common/AppShell/index.ts

@@ -0,0 +1 @@
+export * from './AppShell';

apps/widget/src/config/app.config.ts

@@ -6,4 +6,8 @@ export const API_URL =
     ? window._env_?.REACT_APP_API_URL || process.env.REACT_APP_API_URL || 'http://localhost:1336'
     : window._env_?.REACT_APP_API_URL || process.env.REACT_APP_API_URL || 'http://localhost:3000';
 
+export const SENTRY_DSN = window._env_?.REACT_APP_API_URL || process.env.REACT_APP_SENTRY_DSN || undefined;
+
+export const ENV = window._env_?.REACT_APP_ENVIRONMENT || process.env.REACT_APP_SENTRY_DSN || 'local';
+
 export const CONTEXT_PATH = getContextPath(ImplerComponentEnum.WIDGET);