CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tsify

Browserify plugin for compiling TypeScript files with seamless integration and incremental compilation support

Pending
Overview
Eval results
Files

error-handling.mddocs/

Error Handling

Comprehensive error handling system in tsify for TypeScript compilation diagnostics and runtime errors.

Capabilities

CompileError Class

Specialized error class for TypeScript compilation errors with detailed diagnostic information.

/**
 * TypeScript compilation error with detailed diagnostics
 * Extends SyntaxError to provide TypeScript-specific error information
 */
class CompileError extends SyntaxError {
  /** File name where the error occurred */
  fileName?: string;
  
  /** Line number where the error occurred (1-based) */
  line?: number;
  
  /** Column number where the error occurred (1-based) */
  column?: number;
  
  /** Error name - always "TypeScript error" */
  name: string;
  
  /** Formatted error message with location and details */
  message: string;
}

Error Message Format:

filename.ts(line,column): category TS#### error message

Error Categories

TypeScript diagnostic errors are categorized by severity:

/** TypeScript diagnostic categories */
enum DiagnosticCategory {
  Warning = 0,
  Error = 1,
  Suggestion = 2,
  Message = 3
}

Error Types

Syntax Errors:

  • TypeScript parsing and syntax validation errors
  • Emitted during initial compilation phase
  • Always fatal - prevent code generation

Semantic Errors:

  • Type checking and semantic analysis errors
  • Emitted after syntax validation passes
  • May be non-fatal depending on noEmitOnError setting

Emit Errors:

  • Code generation and output errors
  • Occur during JavaScript output phase

Error Handling Patterns

Basic Error Handling:

const browserify = require('browserify');
const tsify = require('tsify');

browserify()
  .add('main.ts')
  .plugin(tsify, { strict: true })
  .bundle()
  .on('error', function(error) {
    console.error('Compilation failed:', error.message);
    
    // Check if it's a TypeScript compilation error
    if (error.fileName) {
      console.error(`File: ${error.fileName}`);
      console.error(`Location: ${error.line}:${error.column}`);
    }
  })
  .pipe(process.stdout);

Detailed Error Information:

browserify()
  .add('main.ts')
  .plugin(tsify)
  .bundle()
  .on('error', function(error) {
    if (error instanceof Error) {
      console.error('Error Name:', error.name);
      console.error('Error Message:', error.message);
      
      // TypeScript-specific properties
      if (error.fileName) {
        console.error('File:', error.fileName);
        console.error('Line:', error.line);
        console.error('Column:', error.column);
      }
      
      // Stack trace for debugging
      console.error('Stack:', error.stack);
    }
  });

Graceful Error Recovery:

function buildWithErrorRecovery() {
  return new Promise((resolve, reject) => {
    let hasErrors = false;
    
    const bundle = browserify()
      .add('src/main.ts')
      .plugin(tsify, { 
        noEmitOnError: false  // Continue bundling despite type errors
      })
      .bundle();
    
    bundle.on('error', function(error) {
      hasErrors = true;
      console.warn('TypeScript error (continuing):', error.message);
    });
    
    let output = '';
    bundle.on('data', chunk => output += chunk);
    bundle.on('end', () => {
      if (hasErrors) {
        console.warn('Bundle completed with TypeScript errors');
      }
      resolve(output);
    });
  });
}

Error Configuration

Stop on Error (Default):

browserify()
  .add('main.ts')
  .plugin(tsify, {
    noEmitOnError: true  // Stop compilation on any error
  })
  .bundle();

Continue on Error:

browserify()
  .add('main.ts')
  .plugin(tsify, {
    noEmitOnError: false  // Generate output despite errors
  })
  .bundle();

Common Error Scenarios

Missing Type Definitions:

// Error: Cannot find module 'some-library' or its corresponding type declarations
browserify()
  .add('main.ts')
  .plugin(tsify, {
    skipLibCheck: true  // Skip type checking for .d.ts files
  })
  .bundle();

Module Resolution Errors:

// Error: Cannot resolve module 'src/utils'
browserify()
  .add('main.ts')
  .plugin(tsify, {
    baseUrl: './src',
    paths: {
      '@utils/*': ['utils/*']
    }
  })
  .bundle();

Strict Mode Errors:

// Error: Parameter 'x' implicitly has an 'any' type
browserify()
  .add('main.ts')
  .plugin(tsify, {
    noImplicitAny: false,  // Allow implicit any
    strict: false          // Disable all strict checks
  })
  .bundle();

Error Event Handling

tsify emits errors through Browserify's standard error system:

/**
 * Error events emitted by tsify:
 * 
 * 'error' - Compilation errors (syntax, semantic, emit)
 * - Includes CompileError instances with diagnostic information
 * - Emitted for each error encountered during compilation
 * 
 * Error handling occurs at multiple levels:
 * 1. Tsifier level - Internal compilation errors
 * 2. Plugin level - Integration errors with Browserify
 * 3. Bundle level - Stream and bundling errors
 */

Watchify Error Handling

When using with watchify for incremental compilation:

const watchify = require('watchify');

const b = browserify({
  entries: ['src/main.ts'],
  cache: {},
  packageCache: {},
  plugin: [watchify]
});

b.plugin(tsify);

b.on('update', bundle);
b.on('log', console.log);

function bundle() {
  const stream = b.bundle();
  
  stream.on('error', function(error) {
    // Handle compilation errors without stopping watch
    console.error('TypeScript Error:', error.message);
    
    // Emit end event to continue watching
    stream.emit('end');
  });
  
  return stream.pipe(process.stdout);
}

bundle();

Debug Information

Enable debug logging for detailed error context:

# Enable tsify debug logging
DEBUG=tsify* browserify main.ts -p tsify > bundle.js

# Enable tsify trace logging
DEBUG=tsify*,tsify-trace* browserify main.ts -p tsify > bundle.js

Types

interface ErrorContext {
  /** TypeScript diagnostic object */
  diagnostic: any;
  /** File where error occurred */
  fileName?: string;
  /** Error location */
  location?: {
    line: number;
    column: number;
  };
  /** Error category */
  category: 'Warning' | 'Error' | 'Suggestion' | 'Message';
  /** TypeScript error code */
  code: number;
  /** Error message text */
  messageText: string;
}

interface ErrorHandlingOptions {
  /** Stop compilation on first error */
  noEmitOnError?: boolean;
  /** Skip type checking of .d.ts files */
  skipLibCheck?: boolean;
  /** Allow implicit any types */
  noImplicitAny?: boolean;
  /** Enable all strict type checking options */
  strict?: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-tsify

docs

configuration.md

error-handling.md

index.md

integration.md

internal-api.md

tile.json