Add screens for opting into Sentry error tracking

Gemfile.lock

@@ -7,17 +7,17 @@ GEM
     artifactory (3.0.15)
     atomos (0.1.3)
     aws-eventstream (1.1.0)
-    aws-partitions (1.421.0)
-    aws-sdk-core (3.111.2)
+    aws-partitions (1.426.0)
+    aws-sdk-core (3.112.0)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.239.0)
       aws-sigv4 (~> 1.1)
       jmespath (~> 1.0)
-    aws-sdk-kms (1.41.0)
-      aws-sdk-core (~> 3, >= 3.109.0)
+    aws-sdk-kms (1.42.0)
+      aws-sdk-core (~> 3, >= 3.112.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.87.0)
-      aws-sdk-core (~> 3, >= 3.109.0)
+    aws-sdk-s3 (1.88.0)
+      aws-sdk-core (~> 3, >= 3.112.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.1)
     aws-sigv4 (1.2.2)
@@ -36,7 +36,7 @@ GEM
       unf (>= 0.0.5, < 1.0.0)
     dotenv (2.7.6)
     emoji_regex (3.2.1)
-    excon (0.78.1)
+    excon (0.79.0)
     faraday (1.3.0)
       faraday-net_http (~> 1.0)
       multipart-post (>= 1.2, < 3)
@@ -47,8 +47,8 @@ GEM
     faraday-net_http (1.0.1)
     faraday_middleware (1.0.0)
       faraday (~> 1.0)
-    fastimage (2.2.1)
-    fastlane (2.172.0)
+    fastimage (2.2.2)
+    fastlane (2.174.0)
       CFPropertyList (>= 2.3, < 4.0.0)
       addressable (>= 2.3, < 3.0.0)
       artifactory (~> 3.0)
@@ -107,7 +107,7 @@ GEM
       webrick
     google-apis-iamcredentials_v1 (0.1.0)
       google-apis-core (~> 0.1)
-    google-apis-storage_v1 (0.1.0)
+    google-apis-storage_v1 (0.2.0)
       google-apis-core (~> 0.1)
     google-cloud-core (1.5.0)
       google-cloud-env (~> 1.0)
@@ -123,7 +123,7 @@ GEM
       google-cloud-core (~> 1.2)
       googleauth (~> 0.9)
       mini_mime (~> 1.0)
-    googleauth (0.15.0)
+    googleauth (0.15.1)
       faraday (>= 0.17.3, < 2.0)
       jwt (>= 1.4, < 3.0)
       memoist (~> 0.16)

index.js

@@ -4,14 +4,8 @@ import TrackPlayer from 'react-native-track-player';
 import App from './src/components/App';
 import { name as appName } from './app.json';
 import PlaybackService from './src/utility/PlaybackService';
-import * as Sentry from '@sentry/react-native';
-import { SENTRY_DSN } from '@env';
-
-if (SENTRY_DSN) {
-    Sentry.init({
-        dsn: SENTRY_DSN
-    });
-}
+import { setupSentry } from 'utility/Sentry';
 
+setupSentry();
 AppRegistry.registerComponent(appName, () => App);
 TrackPlayer.registerPlaybackService(() => PlaybackService);

package.json

@@ -28,8 +28,9 @@
     "fuse.js": "^6.4.6",
     "i18n-js": "^3.8.0",
     "lodash": "^4.17.20",
-    "react": "^16.13.1",
+    "react": "16.13.1",
     "react-native": "^0.63.4",
+    "react-native-collapsible": "^1.5.3",
     "react-native-dotenv": "^2.5.1",
     "react-native-fast-image": "^8.3.4",
     "react-native-gesture-handler": "^1.9.0",
@@ -48,8 +49,8 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/runtime": "^7.12.13",
+    "@babel/core": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/i18n-js": "^3.8.0",
     "@types/jest": "^26.0.20",
@@ -64,7 +65,7 @@
     "eslint": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.65.0",
+    "metro-react-native-babel-preset": "^0.59.0",
     "react-test-renderer": "^17.0.1",
     "typescript": "^4.1.3"
   },

src/components/App.tsx

@@ -11,11 +11,12 @@ import {
 } from '@react-navigation/native';
 import { useColorScheme } from 'react-native';
 import { ColorSchemeContext, themes } from './Colors';
+import ErrorReportingAlert from 'utility/ErrorReportingAlert';
 
 export default function App(): JSX.Element {
     const colorScheme = useColorScheme();
+    // const colorScheme = 'dark';
     const theme = themes[colorScheme || 'light'];
-    // const theme = 'dark';
 
     useEffect(() => {
         async function setupTrackPlayer() {

src/components/Colors.ts

@@ -16,7 +16,7 @@ function generateStyles(scheme: ColorSchemeName) {
             color: scheme === 'dark' ? '#ffffff88' : '#00000088',
         },
         view: {
-            backgroundColor: scheme === 'dark' ? '#111' : '#eee',
+            backgroundColor: scheme === 'dark' ? '#111' : '#f6f6f6',
         },
         border: {
             borderColor: scheme === 'dark' ? '#262626' : '#ddd',
@@ -43,6 +43,9 @@ function generateStyles(scheme: ColorSchemeName) {
         sectionHeading: {
             backgroundColor: scheme === 'dark' ? '#111' : '#eee',
             borderColor: scheme === 'dark' ? '#333' : '#ddd',
+        },
+        stackHeader: {
+            color: scheme === 'dark' ? 'white' : 'black'
         }
     });
 }

src/custom.d.ts

@@ -3,3 +3,7 @@ declare module '*.svg' {
     const content: React.FC<SvgProps>;
     export default content;
 }
+
+declare module '@env' {
+    export const SENTRY_DSN: string;
+}

src/localisation/lang/en/locale.json

@@ -24,5 +24,19 @@
     "setting-cache": "Cache",
     "setting-cache-description": "If you have updated your Jellyfin library, but the app is holding on to cached assets, you can forcefully clear the cache using this button. This will force the app to fetch the library from scratch.",
     "reset-cache": "Reset Cache",
-    "recent-albums": "Recent Albums"
+    "recent-albums": "Recent Albums",
+    "error-reporting": "Error Reporting",
+    "error-reporting-description": "During use of this app, you may encounter errors. Reporting these errors helps in creating a more secure and stable app experience.",
+    "error-reporting-rationale": "When you enable error reporting, every time an error occurs, a report is automatically created and sent to a server, along with helpful debugging information such as devices, versions and the specific error.",
+    "why-use-tracking": "Why use tracking?",
+    "why-use-tracking-description": "Tracking helps speed up development for this app by reporting weird edge cases and oversights. This helps make the app more stable and robust, thus increasing the app experience for everyone.",
+    "what-data-is-gathered": "What data is gathered?",
+    "what-data-is-gathered-description": "We log the error, device type, OS version, app version and device id. No application state is sent in any error reporting. The device id is a unique hash that can be reset in your device settings, and we cannot deduce any personal information from this identifier.",
+    "where-is-data-stored": "Where is data stored?",
+    "where-is-data-stored-description": "The Sentry backend is self-hosted on our own infrastructure. No-one but us has access to the servers, databases, application and data logs, least of all any Sentry staff. The infrastructure is hosted in the European Union.",
+    "enable-error-reporting": "Do you want to enable error reporting?",
+    "enable-error-reporting-description": "This helps improve the app experience by sending crash and error reports to us.",
+    "enable": "Enable",
+    "disable": "Disable",
+    "more-info": "More Info"
 }

src/localisation/lang/nl/locale.json

@@ -24,5 +24,19 @@
     "setting-cache": "Cache",
     "setting-cache-description": "Als je Jellyfin bibliotheek geüpdatet hebt, maar de app nog aan elementen uit de cache vasthoudt, kun je de cache geforceerd leegmaken met deze knop. Dit forceert de app om de bibliotheek weer vanaf het begin op te bouwen.",
     "reset-cache": "Leeg Cache",
-    "recent-albums": "Recente Albums"
+    "recent-albums": "Recente Albums",
+    "error-reporting": "Foutmeldingen Rapporteren",
+    "error-reporting-description": "Gedurende het gebruik van deze app kun je tegen fouten aanlopen. Het rapporteren van deze foutmeldingen helpt om een veiligere en stabielere app-ervaring te maken.",
+    "error-reporting-rationale": "Wanneer je foutmeldingen aanzet, wordt er elke keer als je een foutmelding krijgt een automatisch rapport gegenereerd en naar onze server gestuurd. Deze bevat behulpzame informatie, zoals apparaat, versies en de specifieke foutmelding.",
+    "why-use-tracking": "Waarom tracking gebruiken?",
+    "why-use-tracking-description": "Tracking helpt het versnellen van het ontwikkeltempo doordat we beter inzicht hebben op rare gevallen en dingen die we gemist hebben. Dit helpt met het stabieler en veiliger maken van de voor iedereen.",
+    "what-data-is-gathered": "Welke data wordt er verzameld?",
+    "what-data-is-gathered-description": "We loggen de foutmeldingen, je apparaattype, versienummers en een device id. Geen applicatiestaat wordt gedeeld in de rapportage. Het device id is een unieke hash die gereset kan worden in de instellingen van je apparaat. Wij kunnen geen verdere informatie afleiden van deze identifier.",
+    "where-is-data-stored": "Waar wordt de data opgeslagen?",
+    "where-is-data-stored-description": "De Sentry backend wordt door onszelf gehost op onze eigen infrastructuur. Niemand behalve wij heeft toegang tot de servers, databases, applicaties en data logs, en zeker geen Sentry-werknemers. De infrastructuur wordt gehost in de Europese Unie.",
+    "enable-error-reporting": "Wil je foutmeldingen rapporteren?",
+    "enable-error-reporting-description": "Dit helpt de appervaring te verbeteren door ons rapportages te sturen van crashes en andere foutmeldingen.",
+    "enable": "Zet aan",
+    "disable": "Zet uit",
+    "more-info": "Meer informatie"
 }

src/localisation/types.ts

@@ -24,3 +24,17 @@ export type LocaleKeys = 'play-next'
 | 'setting-cache-description'
 | 'reset-cache'
 | 'recent-albums'
+| 'error-reporting'
+| 'error-reporting-description'
+| 'error-reporting-rationale'
+| 'why-use-tracking'
+| 'why-use-tracking-description'
+| 'what-data-is-gathered'
+| 'what-data-is-gathered-description'
+| 'where-is-data-stored'
+| 'where-is-data-stored-description'
+| 'enable-error-reporting'
+| 'enable-error-reporting-description'
+| 'enable'
+| 'disable'
+| 'more-info'

src/screens/Music/index.tsx

@@ -7,17 +7,18 @@ import RecentAlbums from './stacks/RecentAlbums';
 import Search from './stacks/Search';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
 
 const Stack = createStackNavigator<StackParams>();
 
-const navigationOptions = {
-    headerTintColor: THEME_COLOR,
-    headerTitleStyle: { color: 'black' }
-};
-
 function MusicStack() {
+    const defaultStyles = useDefaultStyles();
+
     return (
-        <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={navigationOptions}>
+        <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
             <Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
             <Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />
             <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />

src/screens/Music/types.ts

@@ -70,6 +70,7 @@ export type StackParams = {
     Albums: undefined;
     Album: { id: string, album: Album };
     RecentAlbums: undefined;
+    Search: undefined;
 };
 
 export type NavigationProp = StackNavigationProp<StackParams>; 

src/screens/Settings/components/Cache.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import TrackPlayer from 'react-native-track-player';
-import { SubHeader } from 'components/Typography';
 import { useDispatch } from 'react-redux';
 import music from 'store/music';
 import { t } from '@localisation';
@@ -12,6 +11,10 @@ const ClearCache = styled(Button)`
     margin-top: 16px;
 `;
 
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function CacheSettings() {
     const dispatch = useDispatch();
     const handleClearCache = useCallback(() => {
@@ -23,10 +26,9 @@ export default function CacheSettings() {
     }, [dispatch]);
 
     return (
-        <>
-            <SubHeader>{t('setting-cache')}</SubHeader>
+        <Container>
             <Text>{t('setting-cache-description')}</Text>
             <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
-        </>
+        </Container>
     );
 }

src/screens/Settings/components/Library.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback } from 'react';
-import { SubHeader } from 'components/Typography';
 import useDefaultStyles from 'components/Colors';
 import { NavigationProp } from '../..';
 import { useTypedSelector } from 'store';
@@ -19,6 +18,10 @@ const Input = styled.TextInput`
     border-radius: 5px;
 `;
 
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function LibrarySettings() {
     const defaultStyles = useDefaultStyles();
     const { jellyfin } = useTypedSelector(state => state.settings);
@@ -26,8 +29,7 @@ export default function LibrarySettings() {
     const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
 
     return (
-        <>
-            <SubHeader>{t('jellyfin-library')}</SubHeader>
+        <Container>
             <InputContainer>
                 <Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
                 <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />
@@ -41,6 +43,6 @@ export default function LibrarySettings() {
                 <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={defaultStyles.input} />
             </InputContainer>
             <Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} />
-        </>
+        </Container>
     );
 }

src/screens/Settings/components/Sentry.tsx

@@ -0,0 +1,124 @@
+import Text from 'components/Text';
+import React, { useEffect, useState } from 'react';
+import { Switch } from 'react-native-gesture-handler';
+import styled, { css } from 'styled-components/native';
+import { isSentryEnabled, setSentryStatus } from 'utility/Sentry';
+import Accordion from 'react-native-collapsible/Accordion';
+import ChevronIcon from 'assets/chevron-right.svg';
+import { THEME_COLOR } from 'CONSTANTS';
+import useDefaultStyles, { DefaultStylesProvider } from 'components/Colors';
+import { t } from '@localisation';
+
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
+const SwitchContainer = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+`;
+
+const HeaderContainer = styled.View<{ isActive?: boolean }>`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0 4px 0;
+
+    ${props => props.isActive && css`
+        background-color: ${THEME_COLOR};
+    `}
+`;
+
+const HeaderText = styled(Text)`
+    font-size: 16px;
+`;
+
+const ContentContainer = styled.View`
+    margin-top: 8px;
+`;
+
+const Label = styled(Text)`
+    font-size: 16px;
+`;
+
+const Chevron = styled(ChevronIcon)<{ isActive?: boolean }>`
+    width: 14px;
+    height: 14px;
+    transform: rotate(-90deg);
+
+    ${props => props.isActive && css`
+        transform: rotate(90deg);
+    `}
+`;
+
+type Question = { title: string, content: string };
+
+const questions: Question[] = [
+    {
+        title: t('why-use-tracking'),
+        content: t('why-use-tracking-description')
+    },
+    {
+        title: t('what-data-is-gathered'),
+        content: t('what-data-is-gathered-description')
+    },
+    {
+        title: t('where-is-data-stored'),
+        content: t('where-is-data-stored-description')
+    }
+];
+
+function renderHeader(question: Question, index: number, isActive: boolean) {
+    return (
+        <HeaderContainer>
+            <HeaderText>{question.title}</HeaderText>
+            <DefaultStylesProvider>
+                {styles =>
+                    <Chevron fill={styles.text.color} isActive={isActive} />
+                }
+            </DefaultStylesProvider>
+        </HeaderContainer>
+    );
+}
+
+function renderContent(question: Question) {
+    return (
+        <ContentContainer>
+            <Text>{question.content}</Text>
+        </ContentContainer>
+    );
+}
+
+export default function Sentry() {
+    const defaultStyles = useDefaultStyles();
+    const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
+    const [activeSections, setActiveSections] = useState<number[]>([]);
+
+    const toggleSwitch = () => setReporting(previousState => !previousState);
+
+    useEffect(() => {
+        setSentryStatus(isReportingEnabled);
+    });
+
+    return (
+        <Container>
+            <Text>{t('error-reporting-description')}</Text>
+            <Text />
+            <Text>{t('error-reporting-rationale')}</Text>
+            <SwitchContainer>
+                <Label>{t('error-reporting')}</Label>
+                <Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
+            </SwitchContainer>
+            <Accordion
+                sections={questions}
+                renderHeader={renderHeader}
+                renderContent={renderContent}
+                activeSections={activeSections}
+                onChange={setActiveSections}
+                underlayColor={defaultStyles.activeBackground.backgroundColor}
+            />
+        </Container>
+    );
+}

src/screens/Settings/index.tsx

@@ -1,23 +1,46 @@
-import React from 'react';
-import { View, SafeAreaView, ScrollView } from 'react-native';
+import React, { useCallback } from 'react';
+import { SafeAreaView, ScrollView } from 'react-native';
 import Library from './components/Library';
 import Cache from './components/Cache';
 import useDefaultStyles from 'components/Colors';
-import { Header } from 'components/Typography';
 import { t } from '@localisation';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import ListButton from 'components/ListButton';
+import { THEME_COLOR } from 'CONSTANTS';
+import Sentry from './components/Sentry';
+
+export function SettingsList() {
+    const navigation = useNavigation();
+    const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
+    const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
+    const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
+
+    return (
+        <ScrollView>
+            <SafeAreaView>
+                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
+                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
+                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
+            </SafeAreaView>
+        </ScrollView>
+    );
+}
+
+const Stack = createStackNavigator();
 
 export default function Settings() {    
     const defaultStyles = useDefaultStyles();
 
     return (
-        <ScrollView>
-            <SafeAreaView>
-                <View style={{ padding: 20 }}>
-                    <Header style={defaultStyles.text}>{t('settings')}</Header>
-                    <Library />
-                    <Cache />
-                </View>
-            </SafeAreaView>
-        </ScrollView>
+        <Stack.Navigator initialRouteName="SettingList"  screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
+            <Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
+            <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />
+            <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
+            <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
+        </Stack.Navigator>
     );
 }

src/screens/index.tsx

@@ -15,6 +15,8 @@ import Onboarding from './Onboarding';
 import TrackPopupMenu from './modals/TrackPopupMenu';
 import { ModalStackParams } from './types';
 import { t } from '@localisation';
+import ErrorReportingAlert from 'utility/ErrorReportingAlert';
+import ErrorReportingPopup from './modals/ErrorReportingPopup';
 
 const Stack = createStackNavigator<ModalStackParams>();
 const Tab = createBottomTabNavigator();
@@ -48,6 +50,8 @@ function Screens() {
     }
 
     return (
+        <>
+            <ErrorReportingAlert />
             <Tab.Navigator
                 screenOptions={({ route }) => ({
                     tabBarIcon: function TabBarIcon({ color, size }) {
@@ -69,6 +73,7 @@ function Screens() {
                 <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
                 <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
             </Tab.Navigator>
+        </>
     );
 }
 
@@ -88,6 +93,7 @@ export default function Routes() {
             <Stack.Screen name="Screens" component={Screens} />
             <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
             <Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} />
+            <Stack.Screen name="ErrorReporting" component={ErrorReportingPopup} />
         </Stack.Navigator>
     );
 }

src/screens/modals/ErrorReportingPopup.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import Sentry from 'screens/Settings/components/Sentry';
+
+export default function ErrorReportingPopup() {
+    return (
+        <Modal fullSize={false}>
+            <Sentry />
+        </Modal>
+    );
+}

src/store/settings/actions.ts

@@ -3,3 +3,4 @@ import { createAction } from '@reduxjs/toolkit';
 export const setJellyfinCredentials = createAction<{ access_token: string, user_id: string, uri: string, deviced_id: string; }>('SET_JELLYFIN_CREDENTIALS');
 export const setBitrate = createAction<number>('SET_BITRATE');
 export const setOnboardingStatus = createAction<boolean>('SET_ONBOARDING_STATUS');
+export const setReceivedErrorReportingAlert = createAction<void>('SET_RECEIVED_ERROR_REPORTING_ALERT');

src/store/settings/index.ts

@@ -1,5 +1,5 @@
 import { createReducer } from '@reduxjs/toolkit';
-import { setBitrate, setJellyfinCredentials, setOnboardingStatus } from './actions';
+import { setReceivedErrorReportingAlert, setBitrate, setJellyfinCredentials, setOnboardingStatus } from './actions';
 
 interface State {
     jellyfin?: {
@@ -10,11 +10,13 @@ interface State {
     }
     bitrate: number;
     isOnboardingComplete: boolean;
+    hasReceivedErrorReportingAlert: boolean;
 }
 
 const initialState: State = {
     bitrate: 140000000,
     isOnboardingComplete: false,
+    hasReceivedErrorReportingAlert: false,
 };
 
 const settings = createReducer(initialState, {
@@ -29,6 +31,10 @@ const settings = createReducer(initialState, {
     [setOnboardingStatus.type]: (state, action) => ({
         ...state,
         isOnboardingComplete: action.payload,
+    }),
+    [setReceivedErrorReportingAlert.type]: (state) => ({
+        ...state,
+        hasReceivedErrorReportingAlert: true,
     })
 });
 

src/utility/ErrorReportingAlert.ts

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import { Alert } from 'react-native';
+import { useTypedSelector } from 'store';
+import { t } from '@localisation';
+import { setReceivedErrorReportingAlert } from 'store/settings/actions';
+import { setSentryStatus } from './Sentry';
+import { useNavigation } from '@react-navigation/native';
+import { useDispatch } from 'react-redux';
+
+/**
+ * This will send out an alert message asking the user if they want to enable
+ * error reporting.
+ */
+export default function ErrorReportingAlert() {
+    const { hasReceivedErrorReportingAlert } = useTypedSelector(state => state.settings);
+    const navigation = useNavigation();
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        // Only send out alert if we haven't done so ever
+        if (!hasReceivedErrorReportingAlert) {
+            // Generate the alert
+            Alert.alert(
+                t('enable-error-reporting'),
+                t('enable-error-reporting-description'),
+                [
+                    {
+                        text: t('enable'),
+                        style: 'default',
+                        onPress: () => {
+                            setSentryStatus(true);
+                        }
+                    },
+                    {
+                        text: t('disable'),
+                        style: 'destructive',
+                        onPress: () => {
+                            setSentryStatus(false);
+                        }
+                    },
+                    {
+                        text: t('more-info'),
+                        style: 'cancel',
+                        onPress: () => {
+                            navigation.navigate('ErrorReporting');
+                        }
+                    }
+                ]
+            );
+
+            // Store the flag that we have sent out the alert, so that we don't
+            // have to do so anymore in the future.
+            dispatch(setReceivedErrorReportingAlert());
+        }
+        
+    }, []);
+
+    return null;
+}

src/utility/Sentry.ts

@@ -0,0 +1,50 @@
+import { SENTRY_DSN } from '@env';
+import AsyncStorage from '@react-native-community/async-storage';
+import * as Sentry from '@sentry/react-native';
+
+const SENTRY_ASYNC__ITEM_STRING = 'sentry_enabled';
+export let isSentryEnabled = false;
+
+/**
+ * Setup Sentry based on what value is stored in AsyncStorage. 
+ */
+export async function setupSentry(): Promise<void> {
+    // First, we'll retrieve the user settings. This delays Sentry being active
+    // slightly, at the bonus of acutally being able to send off reports for
+    // start-up stuff.
+    isSentryEnabled = (await AsyncStorage.getItem(SENTRY_ASYNC__ITEM_STRING)) === 'true';
+
+    // Make sure the DSN is actually set, in order to prevent weird erros.
+    if (SENTRY_DSN) {
+        Sentry.init({
+            dsn: SENTRY_DSN,
+            // Before we send any event, check whether the Sentry SDK should be
+            // enabled based on user settings.
+            beforeSend(event) {
+                // If so, pass off the event to the back-end
+                if (isSentryEnabled) {
+                    return event;
+                }
+
+                // If not, don't sent a thing
+                return null;
+            }
+        });
+    }
+}
+
+/**
+ * Helper function to enable or disable the Sentry SDK for this app.
+ */
+export async function setSentryStatus(isEnabled: boolean): Promise<void> {
+    // GUARD: If nothing's changed, change nothing
+    if (isEnabled === isSentryEnabled) {
+        return;
+    }
+
+    // First, store the value in Async Storage
+    await AsyncStorage.setItem(SENTRY_ASYNC__ITEM_STRING, isEnabled.toString());
+
+    // Then, assign it to the variable
+    isSentryEnabled = isEnabled;
+}