ai-debug-local-mcp
Version:
🎯 ENHANCED AI GUIDANCE v4.1.2: Dramatically improved tool descriptions help AI users choose the right tools instead of 'close enough' options. Ultra-fast keyboard automation (10x speed), universal recording, multi-ecosystem debugging support, and compreh
260 lines • 10.8 kB
JavaScript
/**
* Problem Detection Module
* Identifies common issues and anti-patterns in meta-frameworks
*/
export class MetaFrameworkProblemDetection {
dataCollection;
analysis;
constructor(dataCollection, analysis) {
this.dataCollection = dataCollection;
this.analysis = analysis;
}
/**
* Detect framework-specific problems and issues
*/
async detectMetaFrameworkProblems(page, framework) {
const problems = [];
if (!framework) {
return [{
problem: 'No meta-framework detected',
severity: 'low',
description: 'Application appears to be using vanilla React/Vue or no framework',
solution: 'Consider using a meta-framework for better performance and developer experience'
}];
}
switch (framework) {
case 'remix':
problems.push(...await this.detectRemixProblems(page));
break;
case 'astro':
problems.push(...await this.detectAstroProblems(page));
break;
case 'nuxt':
problems.push(...await this.detectNuxtProblems(page));
break;
case 'qwik':
problems.push(...await this.detectQwikProblems(page));
break;
case 'solidjs':
problems.push(...await this.detectSolidJSProblems(page));
break;
case 'sveltekit':
problems.push(...await this.detectSvelteKitProblems(page));
break;
}
return problems;
}
/**
* Detect Remix-specific problems
*/
async detectRemixProblems(page) {
const problems = [];
const loaderData = await this.dataCollection.getRemixLoaderData(page);
const analysis = await this.analysis.analyzeRemixLoaders(page);
// Slow loaders
if (analysis.slowLoaders > 0) {
problems.push({
problem: 'Slow loader performance',
severity: analysis.slowLoaders > 3 ? 'high' : 'medium',
description: `${analysis.slowLoaders} loaders are taking more than 1 second to complete`,
solution: 'Implement caching, optimize database queries, or use parallel data fetching'
});
}
// Poor cache hit rate
if (analysis.cacheHitRate < 30 && analysis.totalLoaders > 5) {
problems.push({
problem: 'Low cache utilization',
severity: 'medium',
description: `Cache hit rate is only ${analysis.cacheHitRate}%`,
solution: 'Implement proper HTTP caching headers or use Remix cache utilities'
});
}
// High route complexity
if (analysis.routeComplexity > analysis.totalLoaders * 0.8) {
problems.push({
problem: 'High route complexity',
severity: 'medium',
description: 'Many routes combine loaders and actions, increasing complexity',
solution: 'Consider separating read and write operations into different routes'
});
}
// Check for waterfall loading
const waterfallLoaders = loaderData.filter((loader, index) => index > 0 && loader.timestamp.getTime() > loaderData[index - 1].timestamp.getTime() + 100);
if (waterfallLoaders.length > 2) {
problems.push({
problem: 'Loader waterfall detected',
severity: 'high',
description: 'Sequential loader execution causing performance bottlenecks',
solution: 'Use Promise.all() or defer() for parallel data loading'
});
}
return problems;
}
/**
* Detect Astro-specific problems
*/
async detectAstroProblems(page) {
const problems = [];
const islands = await this.dataCollection.getAstroIslands(page);
const audit = await this.analysis.auditAstroIslands(page);
// Excessive eager hydration
if (audit.heavyIslands > audit.totalIslands * 0.5) {
problems.push({
problem: 'Excessive eager hydration',
severity: 'high',
description: `${audit.heavyIslands} out of ${audit.totalIslands} islands use eager loading`,
solution: 'Use client:idle, client:visible, or client:media for better performance'
});
}
// Missing lazy loading
if (!audit.hydrationStrategies.visible && audit.totalIslands > 5) {
problems.push({
problem: 'No lazy hydration strategy',
severity: 'medium',
description: 'All islands hydrate immediately, impacting initial page load',
solution: 'Implement client:visible for below-the-fold components'
});
}
// Large number of islands
if (audit.totalIslands > 20) {
problems.push({
problem: 'Too many islands',
severity: 'medium',
description: `${audit.totalIslands} islands detected, which may impact performance`,
solution: 'Consider consolidating related islands or using server-side rendering'
});
}
return problems;
}
/**
* Detect Nuxt-specific problems
*/
async detectNuxtProblems(page) {
const problems = [];
const analysis = await this.analysis.analyzeNuxtPayload(page);
// Large payload
if (analysis.payloadSize > 100000) {
problems.push({
problem: 'Large initial payload',
severity: 'high',
description: `Payload size is ${Math.round(analysis.payloadSize / 1024)}KB`,
solution: 'Reduce initial data, use lazy loading, or implement data streaming'
});
}
// Slow navigation
if (analysis.recommendations.some((r) => r.includes('slow navigation'))) {
problems.push({
problem: 'Slow client-side navigation',
severity: 'medium',
description: 'Navigation between routes is taking too long',
solution: 'Implement route-level code splitting and prefetching'
});
}
return problems;
}
/**
* Detect Qwik-specific problems
*/
async detectQwikProblems(page) {
const problems = [];
const analysis = await this.analysis.checkQwikResumability(page);
if (!analysis.resumable) {
return [{
problem: 'Qwik resumability not working',
severity: 'high',
description: 'Application is not taking advantage of Qwik resumability',
solution: 'Check Qwik configuration and ensure proper serialization'
}];
}
// Poor resumability score
if (analysis.resumabilityScore < 60) {
problems.push({
problem: 'Poor resumability performance',
severity: 'medium',
description: `Resumability score is ${analysis.resumabilityScore}/100`,
solution: 'Optimize state serialization and reduce QRL complexity'
});
}
// Large serialized state
if (analysis.serializedState > 1000) {
problems.push({
problem: 'Large serialized state',
severity: 'medium',
description: `${analysis.serializedState} serialized objects detected`,
solution: 'Optimize state management and reduce unnecessary serialization'
});
}
return problems;
}
/**
* Detect SolidJS-specific problems
*/
async detectSolidJSProblems(page) {
const problems = [];
const solidData = await this.dataCollection.getSolidJSData(page);
// Check for hydration issues
if (!solidData.hydrated && solidData.signals > 0) {
problems.push({
problem: 'Hydration mismatch',
severity: 'high',
description: 'SolidJS hydration keys suggest server/client mismatch',
solution: 'Check for differences in server and client rendering'
});
}
return problems;
}
/**
* Detect SvelteKit-specific problems
*/
async detectSvelteKitProblems(page) {
const problems = [];
const svelteData = await this.dataCollection.getSvelteKitData(page);
// Check for excessive navigations without prefetching
if (svelteData.navigations.length > 10 && !svelteData.updated) {
problems.push({
problem: 'Missing prefetching optimization',
severity: 'medium',
description: 'Many navigations detected without prefetching optimization',
solution: 'Enable SvelteKit prefetching for better navigation performance'
});
}
return problems;
}
/**
* Detect general framework issues
*/
async detectMetaFrameworkIssues(page) {
const problems = [];
// Check for common issues across all frameworks
const info = await this.dataCollection.getMetaFrameworkInfo(page);
// Check for development mode in production
const isDev = await page.evaluate(() => {
return window.__DEV__ === true ||
window.process?.env?.NODE_ENV === 'development' ||
window.__vite__ !== undefined;
});
if (isDev && info.url && !info.url.includes('localhost')) {
problems.push({
problem: 'Development mode in production',
severity: 'high',
description: 'Application appears to be running in development mode',
solution: 'Build application for production and ensure NODE_ENV=production'
});
}
// Check for missing error boundaries
const hasErrorBoundary = await page.evaluate(() => {
return document.querySelector('[data-error-boundary]') !== null ||
window.__remixContext?.matches?.some((m) => m.route.ErrorBoundary);
});
if (!hasErrorBoundary) {
problems.push({
problem: 'Missing error boundaries',
severity: 'medium',
description: 'No error boundaries detected for graceful error handling',
solution: 'Implement error boundaries to prevent application crashes'
});
}
return problems;
}
}
//# sourceMappingURL=meta-framework-problem-detection.js.map