mirror of
https://gitlab.com/foxixus/neomovies_mobile.git
synced 2025-10-28 01:18:50 +05:00
6b59750621
Problem: - Gray screens without error messages made debugging impossible - Users couldn't see what went wrong - Developers couldn't debug issues without full stack traces Solution: 1. Created ErrorDisplay widget (lib/presentation/widgets/error_display.dart): ✅ Shows detailed error message with copy button ✅ Expandable stack trace section with syntax highlighting ✅ Retry button for failed operations ✅ Debug tips for troubleshooting ✅ Beautiful UI with icons, colors, and proper styling ✅ Fully selectable text for easy copying Features: - 🔴 Red error card with full error message - 🟠 Orange expandable stack trace panel - 🔵 Blue tips panel with debugging suggestions - 📋 Copy buttons for error and stack trace - 🔄 Retry button to attempt operation again - 📱 Responsive scrolling for long errors 2. Updated MovieDetailProvider: ✅ Added _stackTrace field to store full stack trace ✅ Save stack trace in catch block: catch (e, stackTrace) ✅ Expose via getter: String? get stackTrace 3. Updated DownloadsProvider: ✅ Added _stackTrace field ✅ Updated _setError() to accept optional stackTrace parameter ✅ Save stack trace in refreshDownloads() catch block ✅ Print error and stack trace to console 4. Updated MovieDetailScreen: ✅ Replaced simple Text('Error: ...') with ErrorDisplay widget ✅ Shows 'Ошибка загрузки фильма/сериала' title ✅ Pass error, stackTrace, and onRetry callback ✅ Retry attempts to reload media 5. Updated DownloadsScreen: ✅ Replaced custom error UI with ErrorDisplay widget ✅ Shows 'Ошибка загрузки торрентов' title ✅ Pass error, stackTrace, and onRetry callback ✅ Retry attempts to refresh downloads Error Display Features: ---------------------------- 📋 Сообщение об ошибке: [Red card with full error text] [Copy button] 🐛 Stack Trace (для разработчиков): [Expandable orange section] [Black terminal-style with green text] [Copy stack trace button] 💡 Советы по отладке: • Скопируйте ошибку и отправьте разработчику • Проверьте соединение с интернетом • Проверьте логи Flutter в консоли • Попробуйте перезапустить приложение 🔄 [Попробовать снова] button Example Error Display: ---------------------- ┌────────────────────────────────────┐ │ ⚠️ Произошла ошибка │ │ │ │ 📋 Сообщение об ошибке: │ │ ┌──────────────────────────────┐ │ │ │ Exception: Failed to load │ │ │ │ movie: 404 - Not Found │ │ │ │ [Копировать ошибку] │ │ │ └──────────────────────────────┘ │ │ │ │ 🐛 Stack Trace ▶ │ │ │ │ 💡 Советы по отладке: │ │ ┌──────────────────────────────┐ │ │ │ • Скопируйте ошибку... │ │ │ │ • Проверьте соединение... │ │ │ └──────────────────────────────┘ │ │ │ │ [🔄 Попробовать снова] │ └────────────────────────────────────┘ Changes: - lib/presentation/widgets/error_display.dart (NEW): 254 lines - lib/presentation/providers/movie_detail_provider.dart: +4 lines - lib/presentation/providers/downloads_provider.dart: +6 lines - lib/presentation/screens/movie_detail/movie_detail_screen.dart: +11/-2 lines - lib/presentation/screens/downloads/downloads_screen.dart: +4/-27 lines Result: ✅ No more gray screens without explanation! ✅ Full error messages visible on screen ✅ Stack traces available for developers ✅ Copy button for easy error reporting ✅ Retry button for quick recovery ✅ Beautiful, user-friendly error UI ✅ Much easier debugging process Testing: -------- 1. Open app and tap on a movie card 2. If error occurs, you'll see: - Full error message in red card - Stack trace in expandable section - Copy buttons for error and stack trace - Retry button to try again 3. Same for Downloads screen Now debugging is 10x easier! 🎉
255 lines
9.7 KiB
Dart
255 lines
9.7 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter/services.dart';
|
||
|
||
/// Widget that displays detailed error information for debugging
|
||
class ErrorDisplay extends StatelessWidget {
|
||
final String title;
|
||
final String error;
|
||
final String? stackTrace;
|
||
final VoidCallback? onRetry;
|
||
|
||
const ErrorDisplay({
|
||
super.key,
|
||
this.title = 'Произошла ошибка',
|
||
required this.error,
|
||
this.stackTrace,
|
||
this.onRetry,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Center(
|
||
child: SingleChildScrollView(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Error icon and title
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
Icons.error_outline,
|
||
size: 48,
|
||
color: Colors.red.shade400,
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 16),
|
||
|
||
// Title
|
||
Text(
|
||
title,
|
||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.red.shade700,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
const SizedBox(height: 24),
|
||
|
||
// Error message card
|
||
Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.all(16),
|
||
decoration: BoxDecoration(
|
||
color: Colors.red.shade50,
|
||
borderRadius: BorderRadius.circular(8),
|
||
border: Border.all(color: Colors.red.shade200),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Icon(Icons.info_outline, size: 20, color: Colors.red.shade700),
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
'Сообщение об ошибке:',
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.red.shade700,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 8),
|
||
SelectableText(
|
||
error,
|
||
style: const TextStyle(
|
||
fontFamily: 'monospace',
|
||
fontSize: 13,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: OutlinedButton.icon(
|
||
onPressed: () {
|
||
Clipboard.setData(ClipboardData(text: error));
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(
|
||
content: Text('Ошибка скопирована в буфер обмена'),
|
||
duration: Duration(seconds: 2),
|
||
),
|
||
);
|
||
},
|
||
icon: const Icon(Icons.copy, size: 18),
|
||
label: const Text('Копировать ошибку'),
|
||
style: OutlinedButton.styleFrom(
|
||
foregroundColor: Colors.red.shade700,
|
||
side: BorderSide(color: Colors.red.shade300),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
// Stack trace (if available)
|
||
if (stackTrace != null && stackTrace!.isNotEmpty) ...[
|
||
const SizedBox(height: 16),
|
||
ExpansionTile(
|
||
title: Row(
|
||
children: [
|
||
Icon(Icons.bug_report, size: 20, color: Colors.orange.shade700),
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
'Stack Trace (для разработчиков)',
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.orange.shade700,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
backgroundColor: Colors.orange.shade50,
|
||
collapsedBackgroundColor: Colors.orange.shade50,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(8),
|
||
side: BorderSide(color: Colors.orange.shade200),
|
||
),
|
||
collapsedShape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(8),
|
||
side: BorderSide(color: Colors.orange.shade200),
|
||
),
|
||
children: [
|
||
Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.all(16),
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey.shade900,
|
||
borderRadius: const BorderRadius.only(
|
||
bottomLeft: Radius.circular(8),
|
||
bottomRight: Radius.circular(8),
|
||
),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
SelectableText(
|
||
stackTrace!,
|
||
style: const TextStyle(
|
||
fontFamily: 'monospace',
|
||
fontSize: 11,
|
||
color: Colors.greenAccent,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
OutlinedButton.icon(
|
||
onPressed: () {
|
||
Clipboard.setData(ClipboardData(text: stackTrace!));
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(
|
||
content: Text('Stack trace скопирован в буфер обмена'),
|
||
duration: Duration(seconds: 2),
|
||
),
|
||
);
|
||
},
|
||
icon: const Icon(Icons.copy, size: 18),
|
||
label: const Text('Копировать stack trace'),
|
||
style: OutlinedButton.styleFrom(
|
||
foregroundColor: Colors.greenAccent,
|
||
side: const BorderSide(color: Colors.greenAccent),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
|
||
// Retry button
|
||
if (onRetry != null) ...[
|
||
const SizedBox(height: 24),
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: ElevatedButton.icon(
|
||
onPressed: onRetry,
|
||
icon: const Icon(Icons.refresh),
|
||
label: const Text('Попробовать снова'),
|
||
style: ElevatedButton.styleFrom(
|
||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||
backgroundColor: Theme.of(context).primaryColor,
|
||
foregroundColor: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
|
||
// Debug tips
|
||
const SizedBox(height: 24),
|
||
Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.all(12),
|
||
decoration: BoxDecoration(
|
||
color: Colors.blue.shade50,
|
||
borderRadius: BorderRadius.circular(8),
|
||
border: Border.all(color: Colors.blue.shade200),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Icon(Icons.lightbulb_outline, size: 20, color: Colors.blue.shade700),
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
'Советы по отладке:',
|
||
style: TextStyle(
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.blue.shade700,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'• Скопируйте ошибку и отправьте разработчику\n'
|
||
'• Проверьте соединение с интернетом\n'
|
||
'• Проверьте логи Flutter в консоли\n'
|
||
'• Попробуйте перезапустить приложение',
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.blue.shade900,
|
||
height: 1.5,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|