GH-2829 Add Sentry on frontend (#3111)

* GH-2829 pass sentry dsn key from backend in ClientConfig

* GH-2829 add Sentry library on frontend

* GH-2829 fetch dsnKey in GQL and add a state

* GH-2829 initialize Sentry on frontend

* GH-2829 fix linting issues

* Update yarn.lock

* GH-2829 update graphql schema for clientConfig

* GH-2829 remove Sentry comments

* GH-2829 rename sentry state

* GH-2829 rename dsnKey to dsn

* GH-2829 refactor to use componentEffect for sentry initialization

* GH-2829 fix linting issues

* GH-2829 update Graphql types

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-server/src/core/client-config/client-config.entity.ts

@@ -39,6 +39,12 @@ class Support {
   supportFrontChatId: string | undefined;
 }
 
+@ObjectType()
+class Sentry {
+  @Field(() => String)
+  dsn: string | undefined;
+}
+
 @ObjectType()
 export class ClientConfig {
   @Field(() => AuthProviders, { nullable: false })
@@ -58,4 +64,7 @@ export class ClientConfig {
 
   @Field(() => Support)
   support: Support;
+
+  @Field(() => Sentry)
+  sentry: Sentry;
 }

packages/twenty-server/src/core/client-config/client-config.resolver.ts

@@ -31,6 +31,9 @@ export class ClientConfigResolver {
         supportDriver: this.environmentService.getSupportDriver(),
         supportFrontChatId: this.environmentService.getSupportFrontChatId(),
       },
+      sentry: {
+        dsn: this.environmentService.getSentryDSN(),
+      },
     };
 
     return Promise.resolve(clientConfig);

packages/twenty-server/src/integrations/message-queue/jobs.module.ts

@@ -1,6 +1,7 @@
-import { Module } from "@nestjs/common";
-import { ModuleRef } from "@nestjs/core";
-import { FetchMessagesJob } from "src/workspace/messaging/jobs/fetch-messages.job";
+import { Module } from '@nestjs/common';
+import { ModuleRef } from '@nestjs/core';
+
+import { FetchMessagesJob } from 'src/workspace/messaging/jobs/fetch-messages.job';
 
 @Module({
   providers: [

packages/twenty-server/src/integrations/message-queue/utils/get-job-class-name.util.ts

@@ -2,4 +2,4 @@ export function getJobClassName(name: string): string {
   const [, jobName] = name.split('.') ?? [];
 
   return jobName ?? name;
-}
+}