chore: initial work to add more proper error handling

In this commit I wanted to use `require` to import the `.github/ISSUE_TEMPLATE` in order to include
the file contents.

However, despite doing a lot of research and trying my best to figure out the METRO bundler, I
cannot seem to get this working as-expected. I keep getting a "SHA-1 for file is not computed"
error. According to this thread:

facebook/metro#330

One potential solution is to patch metro in order to generate the SHA. However, I don't want to
patch metro, that admittedly feels a bit flaky as a solution.

In the next commit we'll revert the metro changes and use the GH API to get the bug report file
contents instead

metro.config.js

@@ -4,6 +4,15 @@
  *
  * @format
  */
+const path = require('path');
+const extraNodeModules = {
+  githubIssues: path.resolve(__dirname + '/.github/ISSUE_TEMPLATE'),
+};
+const watchFolders = [path.resolve(__dirname + '/.github/ISSUE_TEMPLATE')];
+
+// get defaults assetExts array
+const defaultAssetExts = require('metro-config/src/defaults/defaults')
+  .assetExts;
 
 module.exports = {
   transformer: {
@@ -14,4 +23,12 @@ module.exports = {
       },
     }),
   },
+  resolver: {
+    extraNodeModules,
+    assetExts: [
+      ...defaultAssetExts, // <- array spreading defaults
+      'md',
+    ],
+  },
+  watchFolders,
 };

package.json

@@ -41,6 +41,7 @@
     "dayjs": "^1.8.33",
     "i18next": "^19.8.4",
     "isomorphic-git": "https://github.com/crutchcorn/isomorphic-git#build",
+    "new-github-issue-url": "^0.2.1",
     "query-string": "^6.13.1",
     "react": "16.13.1",
     "react-content-loader": "^5.1.0",

src/components/error-prompt/error-prompt.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {ErrorMessageBox} from '@components/error-message-box';
+import {View} from 'react-native';
+import {SharkButton} from '@components/shark-button';
+import {DynamicStyleSheet, useDynamicValue} from 'react-native-dynamic';
+import {theme} from '@constants';
+import {ErrorPromptProps, openGitHubIssue} from '@services';
+
+export const ErrorPrompt = (props: ErrorPromptProps) => {
+  const {explainMessage} = props;
+  const styles = useDynamicValue(dynamicStyles);
+
+  return (
+    // TODO: Create translation for buttons
+    <View>
+      <ErrorMessageBox message={explainMessage} />
+      <SharkButton
+        style={styles.githubButton}
+        type={'primary'}
+        onPress={() => openGitHubIssue(props)}
+        icon={'github'}
+        text={'Create issue'}
+      />
+    </View>
+  );
+};
+
+const dynamicStyles = new DynamicStyleSheet({
+  githubButton: {
+    backgroundColor: theme.colors.label_high_emphasis,
+  },
+});

src/components/error-prompt/index.ts

@@ -0,0 +1 @@
+export * from './error-prompt';

src/constants/repo-config.ts

@@ -0,0 +1,4 @@
+export const RepoConfig = {
+  owner: 'oceanbit-dev',
+  name: 'GitShark',
+};

src/services/github/base-request.ts

@@ -16,7 +16,8 @@ export const baseRequest = <T = any>({
   return (fetch(`${GHBase}${path}`, {
     method,
     headers: {
-      Authorization: `token ${gh_token}`,
+      ...(gh_token ? {Authorization: `token ${gh_token}`} : {}),
+      Accept: 'application/vnd.github.v3+json',
     },
   }) as any) as ResponseType<T>;
 };

src/services/github/index.ts

@@ -1,2 +1,3 @@
 export * from './get-current-user';
 export * from './get-current-user-emails';
+export * from './open-issue';

src/services/github/open-issue.ts

@@ -0,0 +1,30 @@
+import newGithubIssueUrl from 'new-github-issue-url';
+import {Linking} from 'react-native';
+import {RepoConfig} from '@constants/repo-config';
+const bugReport = require('githubIssues/bug_report.md');
+
+export interface ErrorPromptProps {
+  // EG: "An error occured while loading staged files."
+  explainMessage: string;
+  // EG: undefined is not a function
+  errorMessage: string;
+  // EG: "_callee2$@http://localhost:8081/ind..."
+  callStack: string;
+}
+
+export function openGitHubIssue(err: ErrorPromptProps) {
+  const body = bugReport
+    .replace(
+      '{{Put the simple error code here}}',
+      `**${err.explainMessage}**: ${err.errorMessage}`,
+    )
+    .replace('{{Put the stack trace here}}', err.callStack);
+
+  const url = newGithubIssueUrl({
+    user: RepoConfig.owner,
+    repo: RepoConfig.name,
+    body,
+  });
+
+  return Linking.openURL(url);
+}

src/store/debug.ts

@@ -1 +1,2 @@
 export const logStore = false;
+export const throwError = true;

src/store/gitLogSlice.ts

@@ -1,7 +1,7 @@
 import {createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
 import {gitLog, GitLogCommit, gitCommitToDBMapper} from '@services';
 import {Repo} from '@entities';
-import {logStore} from './debug';
+import {logStore, throwError} from './debug';
 import {getSerializedErrorStr, PayloadSerializedError} from '@types';
 
 interface StoreGitLogPayload {
@@ -28,6 +28,7 @@ export const getGitLog = createAsyncThunk(
   'commits/getGitLog',
   async (_, {dispatch, getState}) => {
     logStore && console.log('store - getGitLog');
+    if (throwError) throw Error('This is a test error code');
 
     const {repository} = getState() as any;
     const repo = repository.repo;

src/views/repository-history/repository-history.ui.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {CommitList} from '@components/commit-list';
 import {HistoryBranchDropdown} from './components/history-branch-dropdown';
 import {OverlayDropdownContent} from '@components/overlay-dropdown-content';
 import {RepositoryHeader} from '@components/repository-header';
 import {ReduxRepo} from '@entities';
 import {GitLogCommit} from '@services';
 import {useTranslation} from 'react-i18next';
+import {ErrorPrompt} from '@components/error-prompt';
 
 interface RepositoryHistoryUIProps {
   commits: any[];
@@ -32,10 +33,11 @@ export const RepositoryHistoryUI = ({
   const bottomLayer = React.useMemo(() => {
     if (error) {
       return (
-        <View>
-          <Text>{t('commitLogErrStr')}</Text>
-          <Text>{error}</Text>
-        </View>
+        <ErrorPrompt
+          explainMessage={t('commitLogErrStr')}
+          errorMessage={error}
+          callStack={error}
+        />
       );
     }
 

yarn.lock

@@ -11102,6 +11102,11 @@ neo-async@^2.6.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+new-github-issue-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz#e17be1f665a92de465926603e44b9f8685630c1d"
+  integrity sha512-md4cGoxuT4T4d/HDOXbrUHkTKrp/vp+m3aOA7XXVYwNsUNMK49g3SQicTSeV5GIz/5QVGAeYRAOlyp9OvlgsYA==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"