Custom Error Templates for JSON Formatter Applications

Key Components:

• Error Type Identification - Clear categorization of the error (syntax, schema, etc.)
• Error Location - Precise line and column numbers where the error occurred
• Visual Context - Snippet of code surrounding the error with highlighting
• Error Description - Plain language explanation of what went wrong
• Correction Suggestion - Actionable guidance on how to fix the issue
• Documentation Link - Reference to more detailed explanations for complex errors

Template System Structure:

// Error template interface
interface ErrorTemplate {
  id: string;
  title: string;
  description: (params: any) => string;
  suggestion: (params: any) => string;
  severity: 'critical' | 'error' | 'warning' | 'info';
  documentationUrl?: string;
  renderHighlight?: (context: string, position: number) => JSX.Element;
}

// Error template registry
const errorTemplates: Record<string, ErrorTemplate> = {
  SYNTAX_UNEXPECTED_TOKEN: {
    id: 'SYNTAX_UNEXPECTED_TOKEN',
    title: 'Unexpected Token',
    description: (params) => `Unexpected token '${params.token}' found at position ${params.position}.`,
    suggestion: (params) => {
      if (params.token === '}')
        return "Check for a missing comma between properties or a missing opening brace.";
      if (params.token === ']')
        return "Check for a missing comma between array items or a missing opening bracket.";
      return "Verify the syntax around this position.";
    },
    severity: 'error',
    documentationUrl: '/docs/json-syntax-errors#unexpected-token',
    renderHighlight: (context, position) => {
      // Implementation of custom highlighting for this error type
      // ...
    }
  },
  
  // More error templates...
  SYNTAX_MISSING_COLON: {
    id: 'SYNTAX_MISSING_COLON',
    title: 'Missing Colon',
    description: (params) => `Expected a colon after property name '${params.property}'.`,
    suggestion: () => "Add a colon between the property name and its value.",
    severity: 'error',
    documentationUrl: '/docs/json-syntax-errors#missing-colon'
  }
};

// Error template manager
class ErrorTemplateManager {
  getTemplate(errorType: string): ErrorTemplate {
    const template = errorTemplates[errorType];
    if (!template) {
      return this.getDefaultTemplate();
    }
    return template;
  }
  
  getDefaultTemplate(): ErrorTemplate {
    return {
      id: 'GENERIC_ERROR',
      title: 'JSON Error',
      description: (params) => params.message || 'An error occurred while processing the JSON.',
      suggestion: () => "Check the syntax of your JSON document.",
      severity: 'error'
    };
  }
  
  renderError(error: any): JSX.Element {
    const template = this.getTemplate(error.code);
    // Implementation of error rendering using the template
    // ...
  }
}

Implementation Example:

function renderErrorContext(jsonString: string, position: number, range: number = 20): JSX.Element {
  // Find the line number and column
  const lines = jsonString.substring(0, position).split('\n');
  const lineNumber = lines.length;
  const columnNumber = lines[lines.length - 1].length + 1;
  
  // Extract context before and after the error
  const contextStart = Math.max(0, position - range);
  const contextEnd = Math.min(jsonString.length, position + range);
  const context = jsonString.substring(contextStart, contextEnd);
  
  // Calculate the relative position of the error in the context
  const errorIndex = position - contextStart;
  
  // Split the context into before, error, and after parts
  const beforeError = context.substring(0, errorIndex);
  const errorChar = context.substring(errorIndex, errorIndex + 1) || ' ';
  const afterError = context.substring(errorIndex + 1);
  
  return (
    <div className="error-context">
      <div className="line-info">
        Line {lineNumber}, Column {columnNumber}
      </div>
      <pre className="context-display">
        <span className="context-before">{beforeError}</span>
        <span className="error-character">{errorChar}</span>
        <span className="context-after">{afterError}</span>
      </pre>
      <div className="error-pointer">
        {''.padStart(beforeError.length, ' ')}^
      </div>
    </div>
  );
}

User Customization Interface:

// User preferences for error display
interface ErrorDisplayPreferences {
  showLineNumbers: boolean;
  contextRange: number;
  highlightStyle: 'underline' | 'background' | 'box';
  showSuggestions: boolean;
  expandedByDefault: boolean;
  groupSimilarErrors: boolean;
}

// Default preferences
const defaultPreferences: ErrorDisplayPreferences = {
  showLineNumbers: true,
  contextRange: 20,
  highlightStyle: 'background',
  showSuggestions: true,
  expandedByDefault: true,
  groupSimilarErrors: false
};

// Function to apply user preferences to error rendering
function applyErrorPreferences(
  errorElement: JSX.Element, 
  preferences: ErrorDisplayPreferences = defaultPreferences
): JSX.Element {
  // Implementation to modify the error display based on preferences
  // ...
}

// Settings UI component for error template customization
function ErrorTemplateSettings({ 
  preferences, 
  onChange 
}: { 
  preferences: ErrorDisplayPreferences; 
  onChange: (newPreferences: ErrorDisplayPreferences) => void;
}) {
  // UI implementation for customization
  // ...
}

Missing Brackets Error Template:

"items": [
  "apple",
  "banana",
  "orange"

"items": [
  "apple",
  "banana",
  "orange"
]

Advanced Integration Example:

interface QuickFix {
  title: string;
  apply: (jsonString: string, position: number) => string;
}

// Extend error templates with quick fixes
interface AdvancedErrorTemplate extends ErrorTemplate {
  quickFixes?: QuickFix[];
}

// Example of an error template with quick fixes
const missingCommaTemplate: AdvancedErrorTemplate = {
  id: 'SYNTAX_MISSING_COMMA',
  title: 'Missing Comma',
  description: (params) => `Missing comma between properties at position ${params.position}.`,
  suggestion: () => "Add a comma between properties or array items.",
  severity: 'error',
  documentationUrl: '/docs/json-syntax-errors#missing-comma',
  quickFixes: [
    {
      title: "Insert comma",
      apply: (jsonString, position) => {
        return jsonString.substring(0, position) + ',' + jsonString.substring(position);
      }
    }
  ]
};

// Render quick fix buttons with the error
function renderQuickFixes(quickFixes: QuickFix[], jsonString: string, position: number): JSX.Element {
  return (
    <div className="quick-fixes">
      {quickFixes.map((fix, index) => (
        <button 
          key={index}
          className="quick-fix-button"
          onClick={() => applyQuickFix(fix, jsonString, position)}
        >
          {fix.title}
        </button>
      ))}
    </div>
  );
}

// Apply a quick fix and update the JSON editor
function applyQuickFix(fix: QuickFix, jsonString: string, position: number): void {
  const updatedJson = fix.apply(jsonString, position);
  // Update the editor with the fixed JSON
  // ...
}

Error Analytics Implementation:

// Error tracking interface
interface ErrorOccurrence {
  templateId: string;
  timestamp: number;
  fixed: boolean;
  fixMethod?: 'quick-fix' | 'manual' | 'suggestion';
  timeToFix?: number; // milliseconds
  jsonLength: number;
}

// Track error occurrences
function trackErrorOccurrence(error: any, templateId: string): void {
  const occurrence: ErrorOccurrence = {
    templateId,
    timestamp: Date.now(),
    fixed: false,
    jsonLength: getCurrentJsonLength()
  };
  
  // Store the occurrence for later analysis
  storeErrorOccurrence(occurrence);
}

// Track error resolutions
function trackErrorResolution(occurrenceId: string, fixMethod: 'quick-fix' | 'manual' | 'suggestion'): void {
  // Update the stored occurrence with resolution details
  updateErrorOccurrence(occurrenceId, {
    fixed: true,
    fixMethod,
    timeToFix: calculateTimeToFix(occurrenceId)
  });
}

// Analyze error patterns to improve templates
function analyzeErrorPatterns(): ErrorAnalysisReport {
  // Implementation of error pattern analysis
  // ...
}