Как посмотреть написанный для ошибки HIP?

Просмотр информации об ошибках в приложении

Этот вопрос, вероятно, спрашивает о том, как посмотреть и обработать информацию об ошибках, которые возникают в приложении. Вот полный гайд.

1. Консоль браузера (Developer Tools)

Самый простой способ - открыть DevTools браузера:

F12 или Ctrl+Shift+I (Windows/Linux)
Cmd+Option+I (Mac)

В консоли смотрим:

• console.error() - красные сообщения об ошибках
• console.warn() - жёлтые предупреждения
• console.log() - информационные сообщения

// В коде приложения
try {
  riskyOperation()
} catch (error) {
  console.error('Ошибка при выполнении:', error)
  console.log('Детали ошибки:', {
    message: error.message,
    stack: error.stack,
    name: error.name
  })
}

2. Глобальный обработчик ошибок

Перехватываем все необработанные ошибки:

// Ловим синхронные ошибки
window.onerror = (message, source, lineno, colno, error) => {
  console.error('Глобальная ошибка:', {
    message,
    source,
    lineno,
    colno,
    error: error?.stack || error
  })

  // Отправляем в сервис мониторинга (Sentry, LogRocket и т.д.)
  reportError({
    message,
    stack: error?.stack,
    url: window.location.href,
    userAgent: navigator.userAgent
  })

  return true // Ошибка обработана
}

// Ловим необработанные Promise rejection
window.onunhandledrejection = (event) => {
  console.error('Необработанное Promise rejection:', event.reason)
  reportError(event.reason)
}

3. Логирование ошибок с контекстом

class ErrorLogger {
  static log(error, context = {}) {
    const errorInfo = {
      timestamp: new Date().toISOString(),
      message: error.message || String(error),
      stack: error.stack,
      name: error.name,
      url: window.location.href,
      userAgent: navigator.userAgent,
      context, // Дополнительный контекст
      ...this.getSystemInfo()
    }

    // Логируем в консоль в development
    if (process.env.NODE_ENV === 'development') {
      console.error('ERROR LOGGED:', errorInfo)
    }

    // Отправляем на сервер
    this.sendToServer(errorInfo)
  }

  static getSystemInfo() {
    return {
      memory: performance.memory ? {
        usedJSHeapSize: performance.memory.usedJSHeapSize,
        totalJSHeapSize: performance.memory.totalJSHeapSize
      } : null,
      performance: {
        navigationTiming: performance.timing
      }
    }
  }

  static sendToServer(errorInfo) {
    fetch('/api/errors', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(errorInfo)
    }).catch(() => {
      // Ошибка при отправке - молчим
    })
  }
}

// Использование
try {
  await fetch('/api/data')
} catch (error) {
  ErrorLogger.log(error, { action: 'fetch_data', endpoint: '/api/data' })
}

4. Использование Sentry для мониторинга ошибок

Sentry - популярный сервис для отслеживания ошибок в production:

import * as Sentry from "@sentry/react"

// Инициализация
Sentry.init({
  dsn: "https://key@sentry.io/project-id",
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
  beforeSend(event, hint) {
    // Фильтруем ошибки
    if (event.exception) {
      const error = hint.originalException
      if (error.message?.includes('Network')) {
        return null // Не отправляем сетевые ошибки
      }
    }
    return event
  }
})

// Логирование события
function reportUserAction() {
  Sentry.captureMessage('User performed action X')
}

// Логирование ошибки
try {
  riskyOperation()
} catch (error) {
  Sentry.captureException(error, {
    tags: {
      section: 'payment',
      action: 'process_order'
    }
  })
}

// Отправка контекста
Sentry.setUser({
  id: userId,
  email: userEmail,
  username: userName
})

Sentry.setContext('payment', {
  orderId: orderId,
  amount: amount
})

5. React Error Boundary

Для перехвата ошибок в React компонентах:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false, error: null }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error }
  }

  componentDidCatch(error, errorInfo) {
    // Логируем ошибку
    console.error('Error caught:', error)
    console.error('Error info:', errorInfo)

    // Отправляем в Sentry
    Sentry.captureException(error, { contexts: { react: errorInfo } })
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Что-то пошло не так</h1>
          <p>{this.state.error?.message}</p>
          <button onClick={() => this.setState({ hasError: false })}>
            Попробовать ещё
          </button>
        </div>
      )
    }

    return this.props.children
  }
}

// Использование
<ErrorBoundary>
  <App />
</ErrorBoundary>

6. Структурированное логирование

const LOG_LEVELS = {
  DEBUG: 0,
  INFO: 1,
  WARN: 2,
  ERROR: 3,
  FATAL: 4
}

class Logger {
  constructor(minLevel = LOG_LEVELS.INFO) {
    this.minLevel = minLevel
    this.logs = []
  }

  log(level, message, data = {}) {
    if (level < this.minLevel) return

    const logEntry = {
      timestamp: new Date().toISOString(),
      level: Object.keys(LOG_LEVELS).find(k => LOG_LEVELS[k] === level),
      message,
      data,
      url: window.location.href
    }

    this.logs.push(logEntry)

    // Вывод в консоль
    const consoleMethod = level === LOG_LEVELS.ERROR ? 'error' : 'log'
    console[consoleMethod](`[${logEntry.level}]`, message, data)

    // Отправка критичных ошибок
    if (level >= LOG_LEVELS.ERROR) {
      this.sendToServer(logEntry)
    }
  }

  error(message, data) { this.log(LOG_LEVELS.ERROR, message, data) }
  warn(message, data) { this.log(LOG_LEVELS.WARN, message, data) }
  info(message, data) { this.log(LOG_LEVELS.INFO, message, data) }
  debug(message, data) { this.log(LOG_LEVELS.DEBUG, message, data) }

  sendToServer(logEntry) {
    fetch('/api/logs', {
      method: 'POST',
      body: JSON.stringify(logEntry)
    })
  }

  getLogsForDebugging() {
    return this.logs
  }
}

const logger = new Logger()

// Использование
logger.error('Failed to load data', { endpoint: '/api/data', status: 500 })
logger.warn('Slow API response', { duration: 5000 })
logger.info('User logged in', { userId: 123 })

7. Инспекция ошибок в Network tab

Для ошибок API:

1. Открой DevTools
2. Перейди на вкладку "Network"
3. Ищи красные запросы (ошибки)
4. Кликни на запрос и смотри:
   • Response - ответ сервера
   • Status - HTTP статус код
   • Headers - заголовки запроса/ответа

// Обработка API ошибок
async function fetchWithErrorLogging(url) {
  try {
    const response = await fetch(url)
    
    if (!response.ok) {
      const errorData = await response.json()
      console.error('API Error:', {
        status: response.status,
        statusText: response.statusText,
        data: errorData
      })
      throw new Error(`HTTP ${response.status}: ${errorData.message}`)
    }

    return await response.json()
  } catch (error) {
    console.error('Request failed:', error.message)
    throw error
  }
}

8. Source Maps для отладки

Без source maps видишь минифицированный код, с ними - исходный:

// webpack.config.js
module.exports = {
  mode: 'production',
  devtool: 'source-map', // Генерирует .map файлы
  // или для production с ограничениями
  // devtool: 'hidden-source-map' // Скрывает source maps от клиента
}

// vite.config.js
export default {
  build: {
    sourcemap: true // Или 'hidden' для production
  }
}

9. Performance Monitoring

class PerformanceMonitor {
  static async trackAsync(name, asyncFn) {
    const start = performance.now()
    try {
      const result = await asyncFn()
      const duration = performance.now() - start
      console.log(`${name} completed in ${duration.toFixed(2)}ms`)
      return result
    } catch (error) {
      const duration = performance.now() - start
      console.error(`${name} failed after ${duration.toFixed(2)}ms:`, error)
      throw error
    }
  }
}

// Использование
await PerformanceMonitor.trackAsync('API call', () =>
  fetch('/api/data').then(r => r.json())
)

Лучшие практики

• Используй структурированное логирование - добавляй контекст
• Не логируй чувствительные данные - пароли, токены
• Настрой глобальные обработчики - перехватывай необработанные ошибки
• Используй Sentry или аналог - для мониторинга production
• Error Boundary в React - ловит ошибки в компонентах
• Source maps в production - для отладки минифицированного кода
• Группируй ошибки - анализируй паттерны
• Не спамь логи - фильтруй тривиальные события

Ключевой принцип: собирай достаточно информации чтобы воспроизвести баг, но не переусложняй логирование.