chore(react-compiler): fail CI on compiler bailouts in hardened components

.github/workflows/test-ui.yml

@@ -69,6 +69,9 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+      - name: React Compiler strict check
+        run: pnpm --filter @signozhq/ui react-compiler:strict-check
+
       - name: Format Check
         run: pnpm format:check
 

.oxlintrc.json

@@ -79,6 +79,25 @@
 				"signoz/no-conditional-text-nodes-with-siblings": "error",
 				"signoz/no-return-text-nodes": "error"
 			}
+		},
+		{
+			"files": [
+				"packages/ui/src/badge/**/*.tsx",
+				"packages/ui/src/button/**/*.tsx",
+				"packages/ui/src/tooltip/**/*.tsx"
+			],
+			"rules": {
+				"react/incompatible-library": "error",
+				"react/refs": "error",
+				"react/set-state-in-effect": "error",
+				"react/no-deriving-state-in-effects": "error",
+				"react/capitalized-calls": "error",
+				"react/hooks": "error",
+				"react/memo-dependencies": "error",
+				"react/invariant": "error",
+				"react/syntax": "error",
+				"react/unsupported-syntax": "error"
+			}
 		}
 	]
 }

packages/ui/package.json

@@ -431,7 +431,8 @@
 		"test:run": "vitest run",
 		"tokens": "node scripts/extract-css-tokens.mjs",
 		"tokens:check": "node scripts/extract-css-tokens.mjs --check",
-		"type-check": "tsgo --noEmit"
+		"type-check": "tsgo --noEmit",
+		"react-compiler:strict-check": "node scripts/check-react-compiler-strict.mjs"
 	},
 	"dependencies": {
 		"@base-ui/react": "1.7.0",

packages/ui/react-compiler-strict-components.txt

@@ -0,0 +1,3 @@
+badge
+button
+tooltip

packages/ui/scripts/check-react-compiler-strict.mjs

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+// Runs the same React Compiler pass as the build (see ../react-compiler.config.ts)
+// with panicThreshold: 'all_errors' against a hardened subset of components, so a
+// bailout there fails CI instead of only showing up as a build log warning.
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, extname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { transformSync } from 'oxc-transform-react';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SRC_DIR = join(__dirname, '../src');
+const STRICT_COMPONENTS_FILE = join(__dirname, '../react-compiler-strict-components.txt');
+const STRICT_COMPONENTS = readFileSync(STRICT_COMPONENTS_FILE, 'utf8')
+	.split('\n')
+	.map((line) => line.trim())
+	.filter((line) => line && !line.startsWith('#'));
+const EXCLUDE = /(^|\/)__tests__(\/|$)|\.test(-d)?\.tsx?$/;
+
+function collectFiles(dir) {
+	const files = [];
+
+	for (const entry of readdirSync(dir)) {
+		const fullPath = join(dir, entry);
+
+		if (statSync(fullPath).isDirectory()) {
+			files.push(...collectFiles(fullPath));
+		} else if (extname(entry) === '.tsx' && !EXCLUDE.test(fullPath)) {
+			files.push(fullPath);
+		}
+	}
+
+	return files;
+}
+
+const files = STRICT_COMPONENTS.flatMap((name) => collectFiles(join(SRC_DIR, name)));
+let hasErrors = false;
+
+for (const file of files) {
+	const { errors } = transformSync(file, readFileSync(file, 'utf8'), {
+		lang: 'tsx',
+		reactCompiler: { target: '18', panicThreshold: 'all_errors' },
+	});
+
+	for (const error of errors) {
+		hasErrors = true;
+		console.error(error.codeframe ?? `${file}: ${error.message}`);
+	}
+}
+
+if (hasErrors) {
+	console.error(
+		`\nReact Compiler bailout in a hardened component (${STRICT_COMPONENTS.join(', ')}).`,
+	);
+	process.exit(1);
+}
+
+console.log(
+	`React Compiler: no bailouts in ${STRICT_COMPONENTS.join(', ')} (${files.length} files checked).`,
+);