Integrate Sentry for error tracking and reporting, enhance SettingsScreen with cache management and feedback options

This update introduces Sentry for improved error tracking and reporting within the application. The SettingsScreen has been enhanced to include a button for reporting bugs or suggestions via Sentry's feedback widget. Additionally, a new feature allows users to clear the MDBList cache, improving cache management and user experience. The .gitignore file has been updated to include .env.local, and the app.json file has been modified to support Sentry integration.

.gitignore

@@ -39,4 +39,5 @@ yarn-error.*
 plan.md
 release_announcement.md
 ALPHA_BUILD_2_ANNOUNCEMENT.md
-CHANGELOG.md
+CHANGELOG.md
+.env.local

App.tsx

@@ -25,6 +25,23 @@ import { GenreProvider } from './src/contexts/GenreContext';
 import { TraktProvider } from './src/contexts/TraktContext';
 import { ThemeProvider, useTheme } from './src/contexts/ThemeContext';
 import SplashScreen from './src/components/SplashScreen';
+import * as Sentry from '@sentry/react-native';
+
+Sentry.init({
+  dsn: 'https://1a58bf436454d346e5852b7bfd3c95e8@o4509536317276160.ingest.de.sentry.io/4509536317734992',
+
+  // Adds more context data to events (IP address, cookies, user, etc.)
+  // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/
+  sendDefaultPii: true,
+
+  // Configure Session Replay
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1,
+  integrations: [Sentry.mobileReplayIntegration(), Sentry.feedbackIntegration()],
+
+  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: __DEV__,
+});
 
 // This fixes many navigation layout issues by using native screen containers
 enableScreens(true);
@@ -99,4 +116,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default App;
+export default Sentry.wrap(App);

app.json

@@ -24,7 +24,9 @@
         ],
         "NSLocalNetworkUsageDescription": "App uses the local network to discover and connect to devices.",
         "NSMicrophoneUsageDescription": "This app does not require microphone access.",
-        "UIBackgroundModes": ["audio"],
+        "UIBackgroundModes": [
+          "audio"
+        ],
         "LSSupportsOpeningDocumentsInPlace": true,
         "UIFileSharingEnabled": true
       },
@@ -34,8 +36,12 @@
         {
           "name": "Matroska Video",
           "role": "viewer",
-          "utis": ["org.matroska.mkv"],
+          "utis": [
-          "extensions": ["mkv"]
+            "org.matroska.mkv"
+          ],
+          "extensions": [
+            "mkv"
+          ]
         }
       ]
     },
@@ -65,6 +71,16 @@
         "projectId": "909107b8-fe61-45ce-b02f-b02510d306a6"
       }
     },
-    "owner": "nayifleo"
+    "owner": "nayifleo",
+    "plugins": [
+      [
+        "@sentry/react-native/expo",
+        {
+          "url": "https://sentry.io/",
+          "project": "react-native",
+          "organization": "tapframe"
+        }
+      ]
+    ]
   }
 }

metro.config.js

@@ -1,6 +1,8 @@
-const { getDefaultConfig } = require('expo/metro-config');
+const {
+  getSentryExpoConfig
+} = require("@sentry/react-native/metro");
 
-const config = getDefaultConfig(__dirname);
+const config = getSentryExpoConfig(__dirname);
 
 // Enable tree shaking and better minification
 config.transformer = {
@@ -28,4 +30,4 @@ config.resolver = {
   resolverMainFields: ['react-native', 'browser', 'main'],
 };
 
-module.exports = config; 
+module.exports = config;

package-lock.json

@@ -21,6 +21,7 @@
         "@react-navigation/native": "^7.1.6",
         "@react-navigation/native-stack": "^7.3.10",
         "@react-navigation/stack": "^7.2.10",
+        "@sentry/react-native": "^6.15.1",
         "@shopify/flash-list": "1.7.3",
         "@types/lodash": "^4.17.16",
         "@types/react-native-video": "^5.0.20",
@@ -4014,6 +4015,349 @@
         "join-component": "^1.1.0"
       }
     },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.54.0.tgz",
+      "integrity": "sha512-DKWCqb4YQosKn6aD45fhKyzhkdG7N6goGFDeyTaJFREJDFVDXiNDsYZu30nJ6BxMM7uQIaARhPAC5BXfoED3pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.54.0.tgz",
+      "integrity": "sha512-nQqRacOXoElpE0L0ADxUUII0I3A94niqG9Z4Fmsw6057QvyrV/LvTiMQBop6r5qLjwMqK+T33iR4/NQI5RhsXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.54.0.tgz",
+      "integrity": "sha512-8xuBe06IaYIGJec53wUC12tY2q4z2Z0RPS2s1sLtbA00EvK1YDGuXp96IDD+HB9mnDMrQ/jW5f97g9TvPsPQUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.54.0",
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.54.0.tgz",
+      "integrity": "sha512-K/On3OAUBeq/TV2n+1EvObKC+WMV9npVXpVyJqCCyn8HYMm8FUGzuxeajzm0mlW4wDTPCQor6mK9/IgOquUzCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "8.54.0",
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/babel-plugin-component-annotate": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-3.5.0.tgz",
+      "integrity": "sha512-s2go8w03CDHbF9luFGtBHKJp4cSpsQzNVqgIa9Pfa4wnjipvrK6CxVT4icpLA3YO6kg5u622Yoa5GF3cJdippw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.54.0.tgz",
+      "integrity": "sha512-BgUtvxFHin0fS0CmJVKTLXXZcke0Av729IVfi+2fJ4COX8HO7/HAP02RKaSQGmL2HmvWYTfNZ7529AnUtrM4Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.54.0",
+        "@sentry-internal/feedback": "8.54.0",
+        "@sentry-internal/replay": "8.54.0",
+        "@sentry-internal/replay-canvas": "8.54.0",
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/cli": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.46.0.tgz",
+      "integrity": "sha512-nqoPl7UCr446QFkylrsRrUXF51x8Z9dGquyf4jaQU+OzbOJMqclnYEvU6iwbwvaw3tu/2DnoZE/Og+Nq1h63sA==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@sentry/cli-darwin": "2.46.0",
+        "@sentry/cli-linux-arm": "2.46.0",
+        "@sentry/cli-linux-arm64": "2.46.0",
+        "@sentry/cli-linux-i686": "2.46.0",
+        "@sentry/cli-linux-x64": "2.46.0",
+        "@sentry/cli-win32-arm64": "2.46.0",
+        "@sentry/cli-win32-i686": "2.46.0",
+        "@sentry/cli-win32-x64": "2.46.0"
+      }
+    },
+    "node_modules/@sentry/cli-darwin": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.46.0.tgz",
+      "integrity": "sha512-5Ll+e5KAdIk9OYiZO8aifMBRNWmNyPjSqdjaHlBC1Qfh7pE3b1zyzoHlsUazG0bv0sNrSGea8e7kF5wIO1hvyg==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.46.0.tgz",
+      "integrity": "sha512-WRrLNq/TEX/TNJkGqq6Ad0tGyapd5dwlxtsPbVBrIdryuL1mA7VCBoaHBr3kcwJLsgBHFH0lmkMee2ubNZZdkg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm64": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.46.0.tgz",
+      "integrity": "sha512-OEJN8yAjI9y5B4telyqzu27Hi3+S4T8VxZCqJz1+z2Mp0Q/MZ622AahVPpcrVq/5bxrnlZR16+lKh8L1QwNFPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-i686": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.46.0.tgz",
+      "integrity": "sha512-xko3/BVa4LX8EmRxVOCipV+PwfcK5Xs8lP6lgF+7NeuAHMNL4DqF6iV9rrN8gkGUHCUI9RXSve37uuZnFy55+Q==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-x64": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.46.0.tgz",
+      "integrity": "sha512-hJ1g5UEboYcOuRia96LxjJ0jhnmk8EWLDvlGnXLnYHkwy3ree/L7sNgdp/QsY8Z4j2PGO5f22Va+UDhSjhzlfQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd",
+        "android"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-arm64": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-arm64/-/cli-win32-arm64-2.46.0.tgz",
+      "integrity": "sha512-mN7cpPoCv2VExFRGHt+IoK11yx4pM4ADZQGEso5BAUZ5duViXB2WrAXCLd8DrwMnP0OE978a7N8OtzsFqjkbNA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-i686": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.46.0.tgz",
+      "integrity": "sha512-6F73AUE3lm71BISUO19OmlnkFD5WVe4/wA1YivtLZTc1RU3eUYJLYxhDfaH3P77+ycDppQ2yCgemLRaA4A8mNQ==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-x64": {
+      "version": "2.46.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.46.0.tgz",
+      "integrity": "sha512-yuGVcfepnNL84LGA0GjHzdMIcOzMe0bjPhq/rwPsPN+zu11N+nPR2wV2Bum4U0eQdqYH3iAlMdL5/BEQfuLJww==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/@sentry/cli/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.54.0.tgz",
+      "integrity": "sha512-03bWf+D1j28unOocY/5FDB6bUHtYlm6m6ollVejhg45ZmK9iPjdtxNWbrLsjT1WRym0Tjzowu+A3p+eebYEv0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/react": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-8.54.0.tgz",
+      "integrity": "sha512-42T/fp8snYN19Fy/2P0Mwotu4gcdy+1Lx+uYCNcYP1o7wNGigJ7qb27sW7W34GyCCHjoCCfQgeOqDQsyY8LC9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser": "8.54.0",
+        "@sentry/core": "8.54.0",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x || 19.x"
+      }
+    },
+    "node_modules/@sentry/react-native": {
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/@sentry/react-native/-/react-native-6.15.1.tgz",
+      "integrity": "sha512-uNYjkhi7LUeXe+a3ui3N+sUZ4PbBh/P3Q6Pz5esOQOAEV1N7hxkdnHVic1cVHsirEQvy9rUJPBnja47Va7OpQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/babel-plugin-component-annotate": "3.5.0",
+        "@sentry/browser": "8.54.0",
+        "@sentry/cli": "2.46.0",
+        "@sentry/core": "8.54.0",
+        "@sentry/react": "8.54.0",
+        "@sentry/types": "8.54.0",
+        "@sentry/utils": "8.54.0"
+      },
+      "bin": {
+        "sentry-expo-upload-sourcemaps": "scripts/expo-upload-sourcemaps.js"
+      },
+      "peerDependencies": {
+        "expo": ">=49.0.0",
+        "react": ">=17.0.0",
+        "react-native": ">=0.65.0"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@sentry/types": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-wztdtr7dOXQKi0iRvKc8XJhJ7HaAfOv8lGu0yqFOFwBZucO/SHnu87GOPi8mvrTiy1bentQO5l+zXWAaMvG4uw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-JL8UDjrsKxKclTdLXfuHfE7B3KbrAPEYP7tMyN/xiO2vsF6D84fjwYyalO0ZMtuFZE6vpSze8ZOLEh6hLnPYsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/@shopify/flash-list": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.7.3.tgz",

package.json

@@ -22,6 +22,7 @@
     "@react-navigation/native": "^7.1.6",
     "@react-navigation/native-stack": "^7.3.10",
     "@react-navigation/stack": "^7.2.10",
+    "@sentry/react-native": "^6.15.1",
     "@shopify/flash-list": "1.7.3",
     "@types/lodash": "^4.17.16",
     "@types/react-native-video": "^5.0.20",

src/screens/SettingsScreen.tsx

@@ -11,7 +11,8 @@ import {
   Alert,
   Platform,
   Dimensions,
-  Image
+  Image,
+  Button
 } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useNavigation } from '@react-navigation/native';
@@ -26,6 +27,7 @@ import { useTraktContext } from '../contexts/TraktContext';
 import { useTheme } from '../contexts/ThemeContext';
 import { catalogService, DataSource } from '../services/catalogService';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import * as Sentry from '@sentry/react-native';
 
 const { width } = Dimensions.get('window');
 
@@ -226,6 +228,29 @@ const SettingsScreen: React.FC = () => {
     );
   }, [updateSetting]);
 
+  const handleClearMDBListCache = () => {
+    Alert.alert(
+      "Clear MDBList Cache",
+      "Are you sure you want to clear all cached MDBList data? This cannot be undone.",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Clear",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await AsyncStorage.removeItem('mdblist_cache');
+              Alert.alert("Success", "MDBList cache has been cleared.");
+            } catch (error) {
+              Alert.alert("Error", "Could not clear MDBList cache.");
+              console.error('Error clearing MDBList cache:', error);
+            }
+          }
+        }
+      ]
+    );
+  };
+
   const CustomSwitch = ({ value, onValueChange }: { value: boolean, onValueChange: (value: boolean) => void }) => (
     <Switch
       value={value}
@@ -555,6 +580,28 @@ const SettingsScreen: React.FC = () => {
               />
             </SettingsCard>
 
+            <SettingsCard title="Debugging">
+              <View style={{padding: 10}}>
+                <Button
+                  title="Report a Bug or Suggestion"
+                  onPress={() => Sentry.showFeedbackWidget()}
+                />
+              </View>
+            </SettingsCard>
+
+            {/* MDBList Cache Management */}
+            {mdblistKeySet && (
+              <SettingsCard title="MDBList Cache">
+                <View style={{padding: 10}}>
+                  <Button
+                    title="Clear MDBList Cache"
+                    onPress={handleClearMDBListCache}
+                    color={currentTheme.colors.error}
+                  />
+                </View>
+              </SettingsCard>
+            )}
+
             <View style={styles.versionContainer}>
               <Text style={[styles.versionText, {color: currentTheme.colors.mediumEmphasis}]}>
                 Version 1.0.0