Webpack Middleware

/**
 * Creates Express middleware for handling overlay requests
 * @param options - Configuration options for webpack integration
 * @returns Express middleware function
 */
function getOverlayMiddleware(
  options: OverlayMiddlewareOptions
): (req: IncomingMessage, res: ServerResponse, next: () => void) => void;

interface OverlayMiddlewareOptions {
  /** Root directory of the project for file resolution */
  rootDirectory: string;
  /** Function returning client webpack stats */
  stats(): webpack.Stats | null;
  /** Function returning server webpack stats */
  serverStats(): webpack.Stats | null;
  /** Function returning edge server webpack stats */
  edgeServerStats(): webpack.Stats | null;
}

import express from 'express';
import { getOverlayMiddleware } from "@next/react-dev-overlay/middleware";
import webpack from 'webpack';

const app = express();

// Create webpack compiler instances
const clientCompiler = webpack(clientConfig);
const serverCompiler = webpack(serverConfig);

// Setup overlay middleware
const overlayMiddleware = getOverlayMiddleware({
  rootDirectory: process.cwd(),
  stats: () => clientCompiler.stats,
  serverStats: () => serverCompiler.stats,
  edgeServerStats: () => null, // Optional
});

// Use middleware
app.use('/__nextjs_original-stack-frame', overlayMiddleware);

/**
 * Creates original stack frames from webpack source maps
 * @param params - Parameters for stack frame creation
 * @returns Promise resolving to original stack frame data or null
 */
function createOriginalStackFrame(params: {
  line: number;
  column: number | null;
  source: any;
  sourcePackage?: string;
  moduleId?: string;
  modulePath?: string;
  rootDirectory: string;
  frame: any;
  errorMessage?: string;
  clientCompilation?: webpack.Compilation;
  serverCompilation?: webpack.Compilation;
  edgeCompilation?: webpack.Compilation;
}): Promise<OriginalStackFrameResponse | null>;

/**
 * Retrieves source content by module ID from webpack stats
 * @param isFile - Whether the ID represents a file
 * @param id - Module ID to retrieve source for
 * @param compilation - Optional webpack compilation object
 * @returns Promise resolving to source content
 */
function getSourceById(
  isFile: boolean,
  id: string,
  compilation?: webpack.Compilation
): Promise<Source>;

interface OriginalStackFrameResponse {
  originalStackFrame: StackFrame;
  originalCodeFrame: string | null;
  sourcePackage?: string;
}

type Source = { map: () => RawSourceMap } | null;

interface StackFrame {
  file: string | null;
  methodName: string | null;
  arguments: string[];
  lineNumber: number | null;
  column: number | null;
}

import { createOriginalStackFrame, getSourceById } from "@next/react-dev-overlay/middleware";

// Process stack frames
async function processError(stackFrame: StackFrame) {
  try {
    const originalFrame = await createOriginalStackFrame();
    console.log('Original frame:', originalFrame);
  } catch (error) {
    console.error('Failed to process stack frame:', error);
  }
}

// Get source by ID
function getModuleSource(moduleId: string, compilation: webpack.Compilation) {
  const source = getSourceById(moduleId, compilation);
  if (source) {
    const sourceMap = source.map();
    console.log('Source map:', sourceMap);
  }
}

/**
 * Extracts error source information from stack frames
 * @param error - Error object with stack trace
 * @returns Error source type or null
 */
function getErrorSource(error: Error): 'server' | 'edge-server' | null;

/**
 * Decorates errors with server context information
 * @param error - Error object to decorate
 * @param type - Type of server context
 */
function decorateServerError(error: Error, type: ErrorType): void;

/**
 * Creates server errors with proper stack traces and context
 * @param error - Original error object
 * @param type - Type of error context
 * @returns Enhanced error object
 */
function getServerError(error: Error, type: ErrorType): Error;

type ErrorType = 'server' | 'edge-server';

import { getErrorSource, decorateServerError, getServerError } from "@next/react-dev-overlay/middleware";

// Analyze error source
function analyzeError(error: Error) {
  const source = getErrorSource(error);
  
  if (source === 'server') {
    console.log('Server-side error detected');
  } else if (source === 'edge-server') {
    console.log('Edge server error detected');
  }
}

// Decorate server errors
function handleServerError(error: Error) {
  decorateServerError(error, 'server');
  throw error; // Error now has additional server context
}

// Create enhanced server error
function createEnhancedError(originalError: Error) {
  const serverError = getServerError(originalError, 'server');
  return serverError;
}

/**
 * Parses error stack traces into structured StackFrame objects
 * @param stack - Raw stack trace string
 * @returns Array of parsed stack frames
 */
function parseStack(stack: string): StackFrame[];

interface StackFrame {
  file: string | null;
  methodName: string | null;
  arguments: string[];
  lineNumber: number | null;
  column: number | null;
}

import { parseStack } from "@next/react-dev-overlay/middleware";

// Parse error stack
function processErrorStack(error: Error) {
  if (error.stack) {
    const frames = parseStack(error.stack);
    
    frames.forEach((frame, index) => {
      console.log(`Frame ${index}:`, {
        file: frame.file,
        method: frame.methodName,
        line: frame.lineNumber,
        column: frame.column
      });
    });
  }
}

// Filter relevant frames
function getRelevantFrames(error: Error): StackFrame[] {
  const frames = parseStack(error.stack || '');
  
  // Filter out node_modules frames
  return frames.filter(frame => 
    frame.file && !frame.file.includes('node_modules')
  );
}

interface OriginalStackFrameResponse {
  originalStackFrame: StackFrame;
  originalCodeFrame: string | null;
  sourcePackage?: string;
}

// Express server with overlay middleware
import express from 'express';
import { getOverlayMiddleware } from "@next/react-dev-overlay/middleware";

const app = express();

const overlayMiddleware = getOverlayMiddleware({
  rootDirectory: __dirname,
  stats: () => webpackStats,
  serverStats: () => serverWebpackStats,
  edgeServerStats: () => null,
});

// Mount middleware at expected paths
app.use('/__nextjs_original-stack-frame', overlayMiddleware);
app.use('/__nextjs_launch-editor', overlayMiddleware);

app.listen(3000);