Edit Component - Admin Dashboard

Component Name Component name cannot be changed after creation.

Display Name *

Version *

Active

Description

Controller Code (Optional) PHP code for the component controller.

Routes Code (Optional) Route definitions for the component.

Views (Optional - JSON)

{
    "index.blade.php": "@extends('layouts.app')\n\n@section('title', 'Browser Error Log Interpreter - Matomo Tools')\n\n@section('styles')\n@include('dashboard._floating_container_styles')\n@endsection\n\n@section('content')\n<div class=\"floating-container\">\n<div class=\"row\">\n  \n  <div class=\"col-12 mb-4\">\n    <div class=\"card\">\n      <div class=\"card-header d-flex align-items-center justify-content-between\">\n        <h5 class=\"card-title mb-0\">Browser Error Log Interpreter & Solutions<\/h5>\n        <div class=\"d-flex gap-2\">\n          <button class=\"btn btn-outline-primary\" onclick=\"clearErrors()\">\n            <i class=\"fas fa-eraser me-1\"><\/i> Clear\n          <\/button>\n          <button class=\"btn btn-outline-success\" onclick=\"uploadErrorLog()\">\n            <i class=\"fas fa-upload me-1\"><\/i> Upload Log\n          <\/button>\n          <button class=\"btn btn-primary\" onclick=\"analyzeBrowserErrors()\">\n            <i class=\"fas fa-search me-1\"><\/i> Analyze\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-6 mb-4\">\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h6 class=\"card-title mb-0\">Error Input<\/h6>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"mb-4\">\n          <h6 class=\"text-primary mb-3\">Paste Browser Error Log<\/h6>\n          <textarea \n            id=\"errorInput\" \n            class=\"form-control\" \n            rows=\"15\" \n            placeholder=\"Paste browser console errors, network errors, or JavaScript errors here...\"\n            style=\"font-family: 'Courier New', monospace; font-size: 0.9rem;\"\n          ><\/textarea>\n        <\/div>\n        \n        <div class=\"mb-4\">\n          <h6 class=\"text-primary mb-3\">Error Source<\/h6>\n          <div class=\"row\">\n            <div class=\"col-md-6\">\n              <select class=\"form-select\" id=\"errorSource\">\n                <option value=\"auto\">Auto-detect<\/option>\n                <option value=\"console\">Browser Console<\/option>\n                <option value=\"network\">Network Errors<\/option>\n                <option value=\"javascript\">JavaScript Errors<\/option>\n                <option value=\"matomo\">Matomo Tracking<\/option>\n                <option value=\"mixed\">Mixed Sources<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"col-md-6\">\n              <select class=\"form-select\" id=\"errorSeverity\">\n                <option value=\"all\">All Severities<\/option>\n                <option value=\"error\">Errors Only<\/option>\n                <option value=\"warning\">Warnings & Errors<\/option>\n                <option value=\"info\">All Messages<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        \n        <div class=\"mb-4\">\n          <h6 class=\"text-primary mb-3\">Quick Examples<\/h6>\n          <div class=\"d-flex flex-wrap gap-2\">\n            <button class=\"btn btn-outline-secondary btn-sm\" onclick=\"loadExample('matomo-tracking')\">\n              Matomo Tracking\n            <\/button>\n            <button class=\"btn btn-outline-secondary btn-sm\" onclick=\"loadExample('javascript-errors')\">\n              JavaScript Errors\n            <\/button>\n            <button class=\"btn btn-outline-secondary btn-sm\" onclick=\"loadExample('network-errors')\">\n              Network Errors\n            <\/button>\n            <button class=\"btn btn-outline-secondary btn-sm\" onclick=\"loadExample('cors-errors')\">\n              CORS Errors\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-lg-6 mb-4\">\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h6 class=\"card-title mb-0\">Analysis Results<\/h6>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"error-analysis-results\">\n          <div id=\"analysisResults\" class=\"bg-light p-3 rounded\" style=\"max-height: 500px; overflow-y: auto;\">\n            <p class=\"text-muted text-center\">Paste browser errors and click Analyze to see results<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-12 mb-4\">\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h6 class=\"card-title mb-0\">Recommended Solutions<\/h6>\n      <\/div>\n      <div class=\"card-body\">\n        <div id=\"solutionsPanel\">\n          <p class=\"text-muted text-center\">Analyze errors to see recommended solutions<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n\n  \n  <div class=\"col-12 mb-4\">\n    <div class=\"card\">\n      <div class=\"card-header\">\n        <h6 class=\"card-title mb-0\">Common Error Patterns<\/h6>\n      <\/div>\n      <div class=\"card-body\">\n        <div class=\"row\">\n          <div class=\"col-md-6\">\n            <h6 class=\"text-primary mb-3\">Matomo Tracking Errors<\/h6>\n            <div id=\"matomoPatterns\" class=\"pattern-list\">\n              \n            <\/div>\n          <\/div>\n          <div class=\"col-md-6\">\n            <h6 class=\"text-primary mb-3\">JavaScript Errors<\/h6>\n            <div id=\"javascriptPatterns\" class=\"pattern-list\">\n              \n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n<\/div>\n<\/div>\n@endsection\n\n@section('styles')\n<style>\n.error-entry {\n  border-left: 4px solid var(--border-color);\n  padding: 0.75rem;\n  margin-bottom: 0.5rem;\n  border-radius: 0 var(--radius-md) var(--radius-md) 0;\n  background: var(--surface-color);\n}\n\n.error-entry.error {\n  border-left-color: #dc3545;\n  background: rgba(220, 53, 69, 0.1);\n}\n\n.error-entry.warning {\n  border-left-color: #ffc107;\n  background: rgba(255, 193, 7, 0.1);\n}\n\n.error-entry.info {\n  border-left-color: #17a2b8;\n  background: rgba(23, 162, 184, 0.1);\n}\n\n.error-timestamp {\n  font-size: 0.8rem;\n  color: var(--text-muted);\n  font-weight: 600;\n}\n\n.error-level {\n  display: inline-block;\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--radius-sm);\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.error-level.error {\n  background: #dc3545;\n  color: white;\n}\n\n.error-level.warning {\n  background: #ffc107;\n  color: #212529;\n}\n\n.error-level.info {\n  background: #17a2b8;\n  color: white;\n}\n\n.error-message {\n  margin-top: 0.5rem;\n  font-family: 'Courier New', monospace;\n  font-size: 0.9rem;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.error-stack {\n  margin-top: 0.5rem;\n  padding: 0.5rem;\n  background: rgba(0,0,0,0.1);\n  border-radius: var(--radius-sm);\n  font-family: 'Courier New', monospace;\n  font-size: 0.8rem;\n  color: var(--text-muted);\n}\n\n.solution-card {\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-lg);\n  padding: 1rem;\n  margin-bottom: 1rem;\n  background: var(--surface-color);\n}\n\n.solution-card.high-priority {\n  border-left: 4px solid #dc3545;\n}\n\n.solution-card.medium-priority {\n  border-left: 4px solid #ffc107;\n}\n\n.solution-card.low-priority {\n  border-left: 4px solid #28a745;\n}\n\n.solution-title {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  color: var(--text-primary);\n}\n\n.solution-description {\n  color: var(--text-muted);\n  margin-bottom: 0.75rem;\n}\n\n.solution-actions {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.solution-actions .btn {\n  font-size: 0.8rem;\n  padding: 0.25rem 0.5rem;\n}\n\n.error-pattern {\n  background: rgba(220, 53, 69, 0.1);\n  border: 1px solid rgba(220, 53, 69, 0.3);\n  border-radius: var(--radius-sm);\n  padding: 0.5rem;\n  margin: 0.5rem 0;\n  font-family: 'Courier New', monospace;\n  font-size: 0.85rem;\n}\n\n.stats-card {\n  background: var(--card-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-lg);\n  padding: 1rem;\n  text-align: center;\n}\n\n.stats-number {\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--accent-color);\n}\n\n.stats-label {\n  font-size: 0.9rem;\n  color: var(--text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.pattern-item {\n  padding: 0.5rem;\n  margin-bottom: 0.5rem;\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-sm);\n  background: var(--surface-color);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.pattern-item:hover {\n  background: var(--card-color);\n  border-color: var(--accent-color);\n}\n\n.pattern-title {\n  font-weight: 600;\n  margin-bottom: 0.25rem;\n  color: var(--text-primary);\n}\n\n.pattern-description {\n  font-size: 0.85rem;\n  color: var(--text-muted);\n}\n\n.pattern-example {\n  font-family: 'Courier New', monospace;\n  font-size: 0.8rem;\n  color: var(--text-muted);\n  margin-top: 0.25rem;\n  background: rgba(0,0,0,0.1);\n  padding: 0.25rem;\n  border-radius: var(--radius-sm);\n}\n<\/style>\n@endsection\n\n@section('scripts')\n<script>\n\/\/ Browser error patterns and solutions database\nconst browserErrorPatterns = {\n  \/\/ Matomo tracking errors\n  'matomo': {\n    'Failed to load.*matomo': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Check Matomo Script Loading',\n          description: 'Ensure the Matomo tracking script is properly loaded and accessible',\n          actions: [\n            { text: 'Check Script URL', action: 'checkScriptUrl' },\n            { text: 'Test Network Connection', action: 'testNetwork' },\n            { text: 'Verify SSL Certificate', action: 'verifySSL' }\n          ]\n        },\n        {\n          title: 'Check CORS Configuration',\n          description: 'Cross-origin requests may be blocked by browser security policies',\n          actions: [\n            { text: 'Configure CORS Headers', action: 'configureCORS' },\n            { text: 'Check Same-Origin Policy', action: 'checkSameOrigin' }\n          ]\n        }\n      ]\n    },\n    'matomo.*is not defined': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Fix Matomo Object Initialization',\n          description: 'The Matomo tracking object is not properly initialized',\n          actions: [\n            { text: 'Check Script Order', action: 'checkScriptOrder' },\n            { text: 'Verify Initialization Code', action: 'verifyInitCode' }\n          ]\n        }\n      ]\n    },\n    'matomo.*trackPageView.*is not a function': {\n      priority: 'medium',\n      solutions: [\n        {\n          title: 'Update Matomo Tracking Code',\n          description: 'The tracking code may be using an outdated API',\n          actions: [\n            { text: 'Update Tracking Code', action: 'updateTrackingCode' },\n            { text: 'Check Matomo Version', action: 'checkMatomoVersion' }\n          ]\n        }\n      ]\n    }\n  },\n  \n  \/\/ JavaScript errors\n  'javascript': {\n    'Uncaught TypeError.*Cannot read property': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Add Null Checks',\n          description: 'Add proper null\/undefined checks before accessing object properties',\n          actions: [\n            { text: 'Add Null Checks', action: 'addNullChecks' },\n            { text: 'Use Optional Chaining', action: 'useOptionalChaining' }\n          ]\n        }\n      ]\n    },\n    'Uncaught ReferenceError.*is not defined': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Check Variable Declaration',\n          description: 'Variable is being used before it is declared or is out of scope',\n          actions: [\n            { text: 'Check Variable Scope', action: 'checkVariableScope' },\n            { text: 'Add Missing Declaration', action: 'addMissingDeclaration' }\n          ]\n        }\n      ]\n    },\n    'Uncaught SyntaxError': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Fix Syntax Error',\n          description: 'There is a syntax error in the JavaScript code',\n          actions: [\n            { text: 'Check Syntax', action: 'checkSyntax' },\n            { text: 'Use Linter', action: 'useLinter' }\n          ]\n        }\n      ]\n    }\n  },\n  \n  \/\/ Network errors\n  'network': {\n    'Failed to fetch': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Check Network Connection',\n          description: 'Network request failed, check internet connection and server status',\n          actions: [\n            { text: 'Check Network Status', action: 'checkNetworkStatus' },\n            { text: 'Test Server Response', action: 'testServerResponse' }\n          ]\n        }\n      ]\n    },\n    'CORS policy.*blocked': {\n      priority: 'high',\n      solutions: [\n        {\n          title: 'Configure CORS Headers',\n          description: 'Server needs to allow cross-origin requests',\n          actions: [\n            { text: 'Add CORS Headers', action: 'addCORSHeaders' },\n            { text: 'Configure Server', action: 'configureServer' }\n          ]\n        }\n      ]\n    },\n    '404.*Not Found': {\n      priority: 'medium',\n      solutions: [\n        {\n          title: 'Check Resource URL',\n          description: 'The requested resource does not exist at the specified URL',\n          actions: [\n            { text: 'Verify URL', action: 'verifyURL' },\n            { text: 'Check File Exists', action: 'checkFileExists' }\n          ]\n        }\n      ]\n    }\n  }\n};\n\n\/\/ Example error logs\nconst errorExamples = {\n  'matomo-tracking': `[2024-01-15 10:30:15] ERROR: Failed to load resource: the server responded with a status of 404 (Not Found) - https:\/\/analytics.example.com\/matomo.js\n[2024-01-15 10:30:16] ERROR: Uncaught ReferenceError: _paq is not defined\n    at (index):45:12\n[2024-01-15 10:30:17] ERROR: matomo.trackPageView is not a function\n    at trackPageView (tracking.js:23:5)`,\n  \n  'javascript-errors': `[2024-01-15 10:30:15] ERROR: Uncaught TypeError: Cannot read property 'length' of undefined\n    at processData (script.js:45:12)\n[2024-01-15 10:30:16] ERROR: Uncaught ReferenceError: data is not defined\n    at (index):67:8\n[2024-01-15 10:30:17] ERROR: Uncaught SyntaxError: Unexpected token '}'\n    at script.js:89:1`,\n  \n  'network-errors': `[2024-01-15 10:30:15] ERROR: Failed to fetch: https:\/\/api.example.com\/data\n[2024-01-15 10:30:16] ERROR: Access to fetch at 'https:\/\/api.example.com\/data' from origin 'https:\/\/example.com' has been blocked by CORS policy\n[2024-01-15 10:30:17] ERROR: 404 (Not Found) - https:\/\/example.com\/missing-resource.js`,\n  \n  'cors-errors': `[2024-01-15 10:30:15] ERROR: Access to XMLHttpRequest at 'https:\/\/analytics.example.com\/matomo.php' from origin 'https:\/\/example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.\n[2024-01-15 10:30:16] ERROR: CORS policy: The request client is not a secure context and the resource is in a more-private address space.`\n};\n\n\/\/ Analyze browser errors\nfunction analyzeBrowserErrors() {\n  const errorContent = document.getElementById('errorInput').value.trim();\n  const errorSource = document.getElementById('errorSource').value;\n  const errorSeverity = document.getElementById('errorSeverity').value;\n  \n  if (!errorContent) {\n    showNotification('Please paste some error content first', 'warning');\n    return;\n  }\n  \n  const resultsDiv = document.getElementById('analysisResults');\n  const solutionsDiv = document.getElementById('solutionsPanel');\n  \n  resultsDiv.innerHTML = '<div class=\"text-center\"><i class=\"fas fa-spinner fa-spin\"><\/i> Analyzing errors...<\/div>';\n  solutionsDiv.innerHTML = '<div class=\"text-center\"><i class=\"fas fa-spinner fa-spin\"><\/i> Finding solutions...<\/div>';\n  \n  setTimeout(() => {\n    const analysis = parseBrowserErrors(errorContent, errorSource, errorSeverity);\n    displayErrorAnalysis(analysis);\n    displayErrorSolutions(analysis);\n  }, 1500);\n}\n\n\/\/ Parse browser error content\nfunction parseBrowserErrors(content, errorSource, errorSeverity) {\n  const lines = content.split('\\n').filter(line => line.trim());\n  const parsedEntries = [];\n  const errorCounts = { error: 0, warning: 0, info: 0 };\n  const patterns = [];\n  \n  \/\/ First pass: collect all entries and unique error messages\n  const uniqueErrorMessages = new Set();\n  \n  lines.forEach((line, index) => {\n    const entry = parseErrorLine(line, errorSource);\n    if (entry) {\n      parsedEntries.push(entry);\n      errorCounts[entry.level]++;\n      \n      \/\/ Collect unique error messages for pattern matching\n      if (entry.level === 'error' || entry.level === 'warning') {\n        uniqueErrorMessages.add(entry.message);\n      }\n    }\n  });\n  \n  \/\/ Second pass: generate patterns only for unique error messages\n  uniqueErrorMessages.forEach(message => {\n    const matchedPatterns = findErrorPatterns(message, errorSource);\n    patterns.push(...matchedPatterns);\n  });\n  \n  \/\/ Deduplicate patterns to avoid showing same solutions multiple times\n  const deduplicatedPatterns = deduplicatePatterns(patterns);\n  \n  return {\n    entries: parsedEntries,\n    stats: errorCounts,\n    patterns: deduplicatedPatterns,\n    totalLines: lines.length\n  };\n}\n\n\/\/ Parse individual error line\nfunction parseErrorLine(line, errorSource) {\n  \/\/ Common browser error patterns\n  const patterns = {\n    console: \/^\\[(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})\\] (ERROR|WARNING|INFO): (.+)$\/,\n    network: \/^\\[(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})\\] ERROR: (.+)$\/,\n    javascript: \/^\\[(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})\\] ERROR: (.+)$\/,\n    matomo: \/^\\[(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})\\] ERROR: (.+)$\/,\n    mixed: \/^\\[(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})\\] (ERROR|WARNING|INFO): (.+)$\/\n  };\n  \n  const pattern = patterns[errorSource] || patterns.console;\n  const match = line.match(pattern);\n  \n  if (match) {\n    return {\n      timestamp: match[1],\n      level: match[2] ? match[2].toLowerCase() : 'error',\n      message: match[3] || match[2],\n      originalLine: line,\n      stackTrace: extractStackTrace(line)\n    };\n  }\n  \n  \/\/ Fallback for unrecognized format\n  return {\n    timestamp: new Date().toISOString(),\n    level: 'error',\n    message: line,\n    originalLine: line,\n    stackTrace: null\n  };\n}\n\n\/\/ Extract stack trace from error line\nfunction extractStackTrace(line) {\n  const stackMatch = line.match(\/at (.+)\/);\n  return stackMatch ? stackMatch[1] : null;\n}\n\n\/\/ Find error patterns in message\nfunction findErrorPatterns(message, errorSource) {\n  const patterns = browserErrorPatterns[errorSource] || browserErrorPatterns.javascript;\n  const foundPatterns = [];\n  \n  Object.keys(patterns).forEach(pattern => {\n    const regex = new RegExp(pattern, 'i');\n    if (regex.test(message)) {\n      foundPatterns.push({\n        pattern: pattern,\n        solutions: patterns[pattern].solutions,\n        priority: patterns[pattern].priority\n      });\n    }\n  });\n  \n  return foundPatterns;\n}\n\n\/\/ Deduplicate patterns to avoid showing same solutions multiple times\nfunction deduplicatePatterns(patterns) {\n  const seenPatterns = new Set();\n  const seenSolutions = new Set();\n  const deduplicated = [];\n  \n  patterns.forEach(pattern => {\n    \/\/ Create a unique key for this pattern based on its solutions\n    const solutionKey = pattern.solutions.map(s => s.title).sort().join('|');\n    \n    if (!seenSolutions.has(solutionKey)) {\n      seenSolutions.add(solutionKey);\n      seenPatterns.add(pattern.pattern);\n      deduplicated.push(pattern);\n    }\n  });\n  \n  return deduplicated;\n}\n\n\/\/ Display error analysis results\nfunction displayErrorAnalysis(analysis) {\n  const resultsDiv = document.getElementById('analysisResults');\n  \n  let html = `\n    <div class=\"row mb-3\">\n      <div class=\"col-md-3\">\n        <div class=\"stats-card\">\n          <div class=\"stats-number text-danger\">${analysis.stats.error}<\/div>\n          <div class=\"stats-label\">Errors<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"col-md-3\">\n        <div class=\"stats-card\">\n          <div class=\"stats-number text-warning\">${analysis.stats.warning}<\/div>\n          <div class=\"stats-label\">Warnings<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"col-md-3\">\n        <div class=\"stats-card\">\n          <div class=\"stats-number text-info\">${analysis.stats.info}<\/div>\n          <div class=\"stats-label\">Info<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"col-md-3\">\n        <div class=\"stats-card\">\n          <div class=\"stats-number text-primary\">${analysis.totalLines}<\/div>\n          <div class=\"stats-label\">Total Lines<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  `;\n  \n  if (analysis.entries.length > 0) {\n    html += '<h6 class=\"text-primary mb-3\">Error Entries<\/h6>';\n    analysis.entries.forEach(entry => {\n      html += `\n        <div class=\"error-entry ${entry.level}\">\n          <div class=\"d-flex justify-content-between align-items-start\">\n            <span class=\"error-timestamp\">${entry.timestamp}<\/span>\n            <span class=\"error-level ${entry.level}\">${entry.level.toUpperCase()}<\/span>\n          <\/div>\n          <div class=\"error-message\">${entry.message}<\/div>\n          ${entry.stackTrace ? `<div class=\"error-stack\">at ${entry.stackTrace}<\/div>` : ''}\n        <\/div>\n      `;\n    });\n  } else {\n    html += '<p class=\"text-muted text-center\">No error entries found<\/p>';\n  }\n  \n  resultsDiv.innerHTML = html;\n}\n\n\/\/ Display error solutions\nfunction displayErrorSolutions(analysis) {\n  const solutionsDiv = document.getElementById('solutionsPanel');\n  \n  if (analysis.patterns.length === 0) {\n    solutionsDiv.innerHTML = '<p class=\"text-muted text-center\">No specific solutions found. Check the error entries above for general guidance.<\/p>';\n    return;\n  }\n  \n  let html = '';\n  \n  \/\/ Group solutions by priority\n  const highPriority = analysis.patterns.filter(p => p.priority === 'high');\n  const mediumPriority = analysis.patterns.filter(p => p.priority === 'medium');\n  const lowPriority = analysis.patterns.filter(p => p.priority === 'low');\n  \n  [highPriority, mediumPriority, lowPriority].forEach((group, index) => {\n    if (group.length === 0) return;\n    \n    const priorityClass = ['high-priority', 'medium-priority', 'low-priority'][index];\n    const priorityTitle = ['High Priority', 'Medium Priority', 'Low Priority'][index];\n    \n    html += `<h6 class=\"text-primary mb-3\">${priorityTitle}<\/h6>`;\n    \n    group.forEach(pattern => {\n      pattern.solutions.forEach(solution => {\n        html += `\n          <div class=\"solution-card ${priorityClass}\">\n            <div class=\"solution-title\">${solution.title}<\/div>\n            <div class=\"solution-description\">${solution.description}<\/div>\n            <div class=\"error-pattern\">\n              <strong>Pattern:<\/strong> ${pattern.pattern}\n            <\/div>\n            <div class=\"solution-actions\">\n              ${solution.actions.map(action => \n                `<button class=\"btn btn-outline-primary btn-sm\" onclick=\"executeErrorSolution('${action.action}')\">${action.text}<\/button>`\n              ).join('')}\n            <\/div>\n          <\/div>\n        `;\n      });\n    });\n  });\n  \n  solutionsDiv.innerHTML = html;\n}\n\n\/\/ Execute error solution action\nfunction executeErrorSolution(action) {\n  const actions = {\n    checkScriptUrl: () => showNotification('Checking Matomo script URL...', 'info'),\n    testNetwork: () => showNotification('Testing network connection...', 'info'),\n    verifySSL: () => showNotification('Verifying SSL certificate...', 'info'),\n    configureCORS: () => showNotification('Opening CORS configuration guide...', 'info'),\n    checkSameOrigin: () => showNotification('Checking same-origin policy...', 'info'),\n    checkScriptOrder: () => showNotification('Checking script loading order...', 'info'),\n    verifyInitCode: () => showNotification('Verifying initialization code...', 'info'),\n    updateTrackingCode: () => showNotification('Opening tracking code updater...', 'info'),\n    checkMatomoVersion: () => showNotification('Checking Matomo version...', 'info'),\n    addNullChecks: () => showNotification('Adding null checks...', 'info'),\n    useOptionalChaining: () => showNotification('Using optional chaining...', 'info'),\n    checkVariableScope: () => showNotification('Checking variable scope...', 'info'),\n    addMissingDeclaration: () => showNotification('Adding missing declaration...', 'info'),\n    checkSyntax: () => showNotification('Checking syntax...', 'info'),\n    useLinter: () => showNotification('Running linter...', 'info'),\n    checkNetworkStatus: () => showNotification('Checking network status...', 'info'),\n    testServerResponse: () => showNotification('Testing server response...', 'info'),\n    addCORSHeaders: () => showNotification('Adding CORS headers...', 'info'),\n    configureServer: () => showNotification('Configuring server...', 'info'),\n    verifyURL: () => showNotification('Verifying URL...', 'info'),\n    checkFileExists: () => showNotification('Checking if file exists...', 'info')\n  };\n  \n  if (actions[action]) {\n    actions[action]();\n  } else {\n    showNotification(`Action \"${action}\" not implemented yet`, 'warning');\n  }\n}\n\n\/\/ Load example errors\nfunction loadExample(type) {\n  if (errorExamples[type]) {\n    document.getElementById('errorInput').value = errorExamples[type];\n    showNotification(`Loaded ${type} example`, 'success');\n  }\n}\n\n\/\/ Upload error log file\nfunction uploadErrorLog() {\n  const input = document.createElement('input');\n  input.type = 'file';\n  input.accept = '.log,.txt,.json';\n  input.onchange = function(e) {\n    const file = e.target.files[0];\n    if (file) {\n      const reader = new FileReader();\n      reader.onload = function(e) {\n        document.getElementById('errorInput').value = e.target.result;\n        showNotification('Error log file uploaded successfully!', 'success');\n      };\n      reader.readAsText(file);\n    }\n  };\n  input.click();\n}\n\n\/\/ Clear errors\nfunction clearErrors() {\n  document.getElementById('errorInput').value = '';\n  document.getElementById('analysisResults').innerHTML = '<p class=\"text-muted text-center\">Paste browser errors and click Analyze to see results<\/p>';\n  document.getElementById('solutionsPanel').innerHTML = '<p class=\"text-muted text-center\">Analyze errors to see recommended solutions<\/p>';\n}\n\n\/\/ Initialize pattern lists\nfunction initializePatternLists() {\n  \/\/ Matomo patterns\n  const matomoPatternsDiv = document.getElementById('matomoPatterns');\n  const matomoPatterns = Object.keys(browserErrorPatterns.matomo);\n  matomoPatternsDiv.innerHTML = matomoPatterns.map(pattern => `\n    <div class=\"pattern-item\" onclick=\"loadPattern('matomo', '${pattern}')\">\n      <div class=\"pattern-title\">${pattern}<\/div>\n      <div class=\"pattern-description\">${browserErrorPatterns.matomo[pattern].solutions[0].description}<\/div>\n    <\/div>\n  `).join('');\n  \n  \/\/ JavaScript patterns\n  const javascriptPatternsDiv = document.getElementById('javascriptPatterns');\n  const javascriptPatterns = Object.keys(browserErrorPatterns.javascript);\n  javascriptPatternsDiv.innerHTML = javascriptPatterns.map(pattern => `\n    <div class=\"pattern-item\" onclick=\"loadPattern('javascript', '${pattern}')\">\n      <div class=\"pattern-title\">${pattern}<\/div>\n      <div class=\"pattern-description\">${browserErrorPatterns.javascript[pattern].solutions[0].description}<\/div>\n    <\/div>\n  `).join('');\n}\n\n\/\/ Load pattern example\nfunction loadPattern(category, pattern) {\n  const example = generatePatternExample(category, pattern);\n  document.getElementById('errorInput').value = example;\n  showNotification(`Loaded ${pattern} example`, 'success');\n}\n\n\/\/ Generate pattern example\nfunction generatePatternExample(category, pattern) {\n  const examples = {\n    'matomo': {\n      'Failed to load.*matomo': `[2024-01-15 10:30:15] ERROR: Failed to load resource: the server responded with a status of 404 (Not Found) - https:\/\/analytics.example.com\/matomo.js`,\n      'matomo.*is not defined': `[2024-01-15 10:30:16] ERROR: Uncaught ReferenceError: _paq is not defined`,\n      'matomo.*trackPageView.*is not a function': `[2024-01-15 10:30:17] ERROR: matomo.trackPageView is not a function`\n    },\n    'javascript': {\n      'Uncaught TypeError.*Cannot read property': `[2024-01-15 10:30:15] ERROR: Uncaught TypeError: Cannot read property 'length' of undefined`,\n      'Uncaught ReferenceError.*is not defined': `[2024-01-15 10:30:16] ERROR: Uncaught ReferenceError: data is not defined`,\n      'Uncaught SyntaxError': `[2024-01-15 10:30:17] ERROR: Uncaught SyntaxError: Unexpected token '}'`\n    }\n  };\n  \n  return examples[category]?.[pattern] || `[2024-01-15 10:30:15] ERROR: ${pattern}`;\n}\n\n\/\/ Show notification\nfunction showNotification(message, type = 'info') {\n  const notification = document.createElement('div');\n  notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;\n  notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';\n  notification.innerHTML = `\n    ${message}\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\n  `;\n  \n  document.body.appendChild(notification);\n  \n  setTimeout(() => {\n    if (notification.parentNode) {\n      notification.remove();\n    }\n  }, 5000);\n}\n\n\/\/ Initialize on page load\ndocument.addEventListener('DOMContentLoaded', function() {\n  initializePatternLists();\n});\n<\/script>\n@endsection\n\n"
}

JSON object with view file paths or inline content.

Assets (Optional - JSON) JSON array of asset file paths.