Compare commits

...
Author SHA1 Message Date
Sonarly Claude Code e75c9719c3 chore: improve monitoring for fix: bundle Monaco Editor workers locally instead
**Modified: `packages/twenty-front/src/modules/error-handler/components/SentryInitEffect.tsx`**

Added `denyUrls` to the Sentry `init()` configuration to filter out errors originating from third-party CDN scripts (`cdn.jsdelivr.net`, `unpkg.com`). These errors are not actionable in our codebase — they represent network-level failures in the user's environment (CDN blocks, firewalls, regional restrictions).

This reduces Sentry noise from errors like the Monaco worker load failure while the code fix is being deployed, and provides ongoing protection against similar CDN-related errors from any third-party script.
2026-04-14 14:32:35 +00:00
Sonarly Claude Code 92ee998c23 fix: bundle Monaco Editor workers locally instead of loading from CDN
https://sonarly.com/issue/8519?type=bug

The `@monaco-editor/react` package loads Monaco Editor's web worker script from `cdn.jsdelivr.net` at runtime. In regions where this CDN is blocked (notably Russia), the worker fails to load, causing an unhandled NetworkError that breaks the code editor functionality.

Fix: **What changed:**

1. **New file: `packages/twenty-ui/src/input/code-editor/constants/configureMonacoLoader.ts`** — Configures `@monaco-editor/react`'s loader to use the locally installed `monaco-editor` package instead of fetching it from `cdn.jsdelivr.net`. This is a side-effect import that calls `loader.config({ monaco })` once at module load time.

2. **Modified: `packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx`** — Added the side-effect import of the new config file before the `Editor` import. This ensures the loader is configured before any Monaco component is rendered.

**Why this approach:**
- `@monaco-editor/react` defaults to loading Monaco from `https://cdn.jsdelivr.net/npm/monaco-editor@{version}/min/vs/`. This CDN is blocked in certain regions (Russia confirmed in the Sentry event).
- Passing `{ monaco }` directly to `loader.config()` tells the library to use the locally bundled instance, completely eliminating external CDN dependency.
- `monaco-editor` is already a declared dependency in `twenty-front/package.json` (`"^0.51.0"`), so no new dependency is needed.
- The trade-off is a slightly larger JavaScript bundle since Monaco's worker code is now bundled locally instead of lazy-loaded from CDN. Vite's code-splitting should put it in a separate chunk.

**Note:** The build should be verified to ensure the Monaco bundle doesn't exceed the chunk size limits configured in `vite.config.ts`.
2026-04-14 14:32:35 +00:00
3 changed files with 12 additions and 0 deletions
@@ -54,6 +54,11 @@ export const SentryInitEffect = () => {
tracesSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
denyUrls: [
// Errors from third-party CDN scripts are not actionable
/cdn\.jsdelivr\.net/i,
/unpkg\.com/i,
],
});
setIsSentryInitialized(true);
@@ -1,4 +1,5 @@
import { styled } from '@linaria/react';
import '@ui/input/code-editor/constants/configureMonacoLoader';
import Editor, { type EditorProps, type Monaco } from '@monaco-editor/react';
import { Loader } from '@ui/feedback/loader/components/Loader';
import { ResizeHandle } from '@ui/layout/resize-handle/components/ResizeHandle';
@@ -0,0 +1,6 @@
import { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
// Use the locally bundled monaco-editor instead of loading from cdn.jsdelivr.net
// This avoids failures in regions where the CDN is blocked (e.g. Russia)
loader.config({ monaco });