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
283 lines • 11 kB
JavaScript
/**
* NextJSMonitoringSetup - Sets up comprehensive monitoring for Next.js applications
*
* This module handles:
* - Advanced monitoring injection
* - Cache monitoring setup
* - Middleware tracking
* - Server action monitoring
* - HMR monitoring
* - Security auditing setup
*/
export class NextJSMonitoringSetup {
monitoringStatus = {
advancedMonitoring: false,
cacheMonitoring: false,
middlewareTracking: false,
serverActionMonitoring: false,
hmrMonitoring: false,
securityAuditing: false
};
/**
* Inject advanced monitoring scripts into the page
*/
async injectAdvancedMonitoring(page) {
try {
await page.evaluate(() => {
// Initialize Next.js debug object
window.__NEXTJS_ADVANCED_DEBUG__ = {
config: null,
appRouter: {
currentRoute: window.location.pathname,
params: {},
searchParams: {},
layoutNesting: 0,
parallelRoutes: [],
interceptedRoutes: 0,
routeGroups: [],
dynamicSegments: []
},
dataFetching: new Map(),
cache: { hits: 0, misses: 0, revalidations: [] },
serverActions: [],
hmr: { updates: [], failures: [] },
security: { exposedEnvVars: [], headers: {} },
performance: { metrics: [], waterfalls: [] }
};
// Monitor fetch requests
const originalFetch = window.fetch;
window.fetch = async (...args) => {
const start = performance.now();
const url = typeof args[0] === 'string' ? args[0] : args[0].url;
try {
const response = await originalFetch(...args);
const duration = performance.now() - start;
// Track data fetching
window.__NEXTJS_ADVANCED_DEBUG__.dataFetching.set(url, {
method: 'fetch',
duration,
cacheStatus: response.headers.get('x-nextjs-cache') || 'NONE',
timestamp: new Date()
});
return response;
}
catch (error) {
const duration = performance.now() - start;
window.__NEXTJS_ADVANCED_DEBUG__.dataFetching.set(url, {
method: 'fetch',
duration,
error: error.message,
timestamp: new Date()
});
throw error;
}
};
// Monitor performance
if ('PerformanceObserver' in window) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
window.__NEXTJS_ADVANCED_DEBUG__.performance.metrics.push({
name: entry.name,
type: entry.entryType,
startTime: entry.startTime,
duration: entry.duration,
timestamp: new Date()
});
}
});
observer.observe({ entryTypes: ['navigation', 'paint', 'largest-contentful-paint'] });
}
});
this.monitoringStatus.advancedMonitoring = true;
}
catch (error) {
console.error('Error injecting advanced monitoring:', error);
}
}
/**
* Setup cache monitoring
*/
async setupCacheMonitoring(page, callback) {
try {
page.on('response', async (response) => {
const url = response.url();
const headers = response.headers();
if (headers['x-nextjs-cache'] || headers['cache-control']) {
callback({
type: 'cache',
timestamp: new Date(),
url,
data: {
cacheStatus: headers['x-nextjs-cache'] || 'UNKNOWN',
cacheControl: headers['cache-control'],
age: headers['age'],
etag: headers['etag']
}
});
}
});
this.monitoringStatus.cacheMonitoring = true;
}
catch (error) {
console.error('Error setting up cache monitoring:', error);
}
}
/**
* Setup middleware tracking
*/
async setupMiddlewareTracking(page, callback) {
try {
page.on('response', async (response) => {
const headers = response.headers();
if (headers['x-middleware-next'] || headers['x-middleware-rewrite']) {
// For middleware tracking, we'll use request start time tracking
const executionTime = 0; // Could be enhanced with request timing tracking
callback({
type: 'middleware',
timestamp: new Date(),
url: response.url(),
data: {
executionTime,
rewrite: headers['x-middleware-rewrite'],
next: headers['x-middleware-next']
}
});
}
});
this.monitoringStatus.middlewareTracking = true;
}
catch (error) {
console.error('Error setting up middleware tracking:', error);
}
}
/**
* Setup server action monitoring
*/
async setupServerActionMonitoring(page, callback) {
try {
page.on('request', async (request) => {
const headers = request.headers();
if (headers['next-action']) {
const payloadSize = request.postData()?.length || 0;
callback({
type: 'serverAction',
timestamp: new Date(),
url: request.url(),
data: {
action: headers['next-action'],
method: request.method(),
payloadSize
}
});
}
});
this.monitoringStatus.serverActionMonitoring = true;
}
catch (error) {
console.error('Error setting up server action monitoring:', error);
}
}
/**
* Setup HMR monitoring
*/
async setupHMRMonitoring(page, callback) {
try {
await page.evaluate(() => {
// Monitor HMR events
if (window.webpackHotUpdate) {
const originalHotUpdate = window.webpackHotUpdate;
window.webpackHotUpdate = (...args) => {
const start = performance.now();
try {
const result = originalHotUpdate(...args);
const duration = performance.now() - start;
window.__NEXTJS_ADVANCED_DEBUG__.hmr.updates.push({
timestamp: new Date(),
duration,
modules: args[1] ? Object.keys(args[1]) : [],
success: true
});
return result;
}
catch (error) {
window.__NEXTJS_ADVANCED_DEBUG__.hmr.failures.push({
timestamp: new Date(),
error: error.message
});
throw error;
}
};
}
});
this.monitoringStatus.hmrMonitoring = true;
}
catch (error) {
console.error('Error setting up HMR monitoring:', error);
}
}
/**
* Setup security auditing
*/
async setupSecurityAuditing(page, callback) {
try {
page.on('response', async (response) => {
if (response.url() === page.url()) {
const headers = response.headers();
callback({
type: 'security',
timestamp: new Date(),
url: response.url(),
data: {
headers: {
csp: !!headers['content-security-policy'],
xFrameOptions: headers['x-frame-options'] || 'NONE',
hsts: !!headers['strict-transport-security'],
permissionsPolicy: !!headers['permissions-policy']
}
}
});
}
});
this.monitoringStatus.securityAuditing = true;
}
catch (error) {
console.error('Error setting up security auditing:', error);
}
}
/**
* Setup all monitoring systems
*/
async setupAllMonitoring(page, callback) {
try {
await this.injectAdvancedMonitoring(page);
await this.setupCacheMonitoring(page, callback);
await this.setupMiddlewareTracking(page, callback);
await this.setupServerActionMonitoring(page, callback);
await this.setupHMRMonitoring(page, callback);
await this.setupSecurityAuditing(page, callback);
}
catch (error) {
console.error('Error setting up monitoring:', error);
}
}
/**
* Get current monitoring status
*/
getMonitoringStatus() {
return { ...this.monitoringStatus };
}
/**
* Reset monitoring status
*/
reset() {
this.monitoringStatus = {
advancedMonitoring: false,
cacheMonitoring: false,
middlewareTracking: false,
serverActionMonitoring: false,
hmrMonitoring: false,
securityAuditing: false
};
}
}
//# sourceMappingURL=nextjs-monitoring-setup.js.map