feat: update api error handling

src/views/commits/CommitHistory.vue

@@ -25,7 +25,7 @@
         repositorySetting.getUrl()
       }}</span
       >.<br />
-      The repository does not exist or not visible with provided pesonal access token.
+      {{ failedMessage }}
     </div>
 
     <LoadingImage :loading="loading" @cancel="loading = false" />
@@ -79,6 +79,7 @@ export default defineComponent({
     const loading = ref(false)
 
     const isFailed = ref(false)
+    const failedMessage = ref('')
     const getCommits = async (): Promise<void> => {
       loading.value = true
       const { repositorySetting } = props
@@ -88,7 +89,8 @@ export default defineComponent({
         .then((ch: CommitHistory) => mutations.replace(ch))
         .then(() => false)
         .catch((e: Error) => {
-          logger.error(e)
+          logger.error(e.cause as Error)
+          failedMessage.value = e.message
           return true
         })
         .finally(() => {
@@ -103,6 +105,7 @@ export default defineComponent({
       clearCommits,
       getCommits,
       isFailed,
+      failedMessage,
       openCommitsUrl,
       commits,
       loading,

src/views/issues/GitHubIssue.vue

@@ -33,7 +33,7 @@
         repositorySetting.getUrl()
       }}</span
       >.<br />
-      The repository does not exist or not visible with provided pesonal access token.
+      {{ failedMessage }}
     </div>
 
     <LoadingImage :loading="loading" @cancel="loading = false" />
@@ -88,6 +88,7 @@ export default defineComponent({
 
     const queryState = ref('')
     const isFailed = ref(false)
+    const failedMessage = ref('')
     const getIssues = async (): Promise<void> => {
       loading.value = true
       const { repositorySetting } = props
@@ -98,7 +99,8 @@ export default defineComponent({
         .then((i: Issues) => mutations.replace(i))
         .then(() => false)
         .catch((e: Error) => {
-          logger.error(e)
+          logger.error(e.cause as Error)
+          failedMessage.value = e.message
           return true
         })
         .finally(() => {
@@ -123,6 +125,7 @@ export default defineComponent({
       getIssues,
       queryState,
       isFailed,
+      failedMessage,
       openIssueUrl,
       issues,
       loading,

src/views/pullrequests/GitHubPullRequest.vue

@@ -37,7 +37,7 @@
         repositorySetting.getUrl()
       }}</span
       >.<br />
-      The repository does not exist or not visible with provided pesonal access token.
+      {{ failedMessage }}
     </div>
 
     <LoadingImage :loading="loading" @cancel="loading = false" />
@@ -92,6 +92,7 @@ export default defineComponent({
 
     const queryState = ref('')
     const isFailed = ref(false)
+    const failedMessage = ref('')
     const getPullRequests = async (): Promise<void> => {
       loading.value = true
       const { repositorySetting } = props
@@ -102,7 +103,8 @@ export default defineComponent({
         .then((prs: PullRequests) => mutations.replace(prs))
         .then(() => false)
         .catch((e: Error) => {
-          logger.error(e)
+          logger.error(e.cause as Error)
+          failedMessage.value = e.message
           return true
         })
         .finally(() => {
@@ -127,6 +129,7 @@ export default defineComponent({
       getPullRequests,
       queryState,
       isFailed,
+      failedMessage,
       openPullRequestUrl,
       pullRequests,
       loading,

src/views/releases/GitHubRelease.vue

@@ -37,7 +37,7 @@
         repositorySetting.getUrl()
       }}</span
       >.<br />
-      The repository does not exist or not visible with provided pesonal access token.
+      {{ failedMessage }}
     </div>
 
     <LoadingImage :loading="loading" @cancel="loading = false" />
@@ -91,6 +91,7 @@ export default defineComponent({
     const loading = ref(false)
 
     const isFailed = ref(false)
+    const failedMessage = ref('')
     const getReleases = async (): Promise<void> => {
       loading.value = true
       const { repositorySetting } = props
@@ -100,7 +101,8 @@ export default defineComponent({
         .then((r: Releases) => mutations.replace(r))
         .then(() => false)
         .catch((e: Error) => {
-          logger.error(e)
+          logger.error(e.cause as Error)
+          failedMessage.value = e.message
           return true
         })
         .finally(() => {
@@ -124,6 +126,7 @@ export default defineComponent({
       clearReleases,
       getReleases,
       isFailed,
+      failedMessage,
       openReleaseUrl,
       releases,
       loading,

tests/unit/views/commits/CommitHistory.spec.ts

@@ -1,3 +1,4 @@
+import { GitHubAccessError } from '@/application/domain/interface/githubAccessor'
 import {
   Account,
   Commit,
@@ -122,7 +123,8 @@ describe('CommitHistory.vue', () => {
   })
 
   it('fails to get commits', async () => {
-    const err = new Error('error')
+    const cause = new Error('cause')
+    const err = new GitHubAccessError('error', { cause: cause })
     const supplier = () => {
       throw err
     }
@@ -150,7 +152,7 @@ describe('CommitHistory.vue', () => {
       .then(() => nextTick())
 
     // then: error mock is called
-    expect(errorMock).toHaveBeenCalledWith(err)
+    expect(errorMock).toHaveBeenCalledWith(cause)
   })
 
   it('opens commits url (repository name)', async () => {

tests/unit/views/issues/GitHubIssue.spec.ts

@@ -1,3 +1,4 @@
+import { GitHubAccessError } from '@/application/domain/interface/githubAccessor'
 import { Account, GitHubUrl, Issue, Issues } from '@/application/domain/model/github'
 import { RepositorySetting } from '@/application/domain/model/githubRepository'
 import { GetIssuesUseCase, GetIssuesUseCaseFactory } from '@/application/usecase/githubRepository'
@@ -158,7 +159,8 @@ describe('GitHubIssue.vue', () => {
   })
 
   it('fails to get issues', async () => {
-    const err = new Error('error')
+    const cause = new Error('cause')
+    const err = new GitHubAccessError('error', { cause: cause })
     const supplier = () => {
       throw err
     }
@@ -185,7 +187,7 @@ describe('GitHubIssue.vue', () => {
       .then(() => nextTick())
 
     // then: error mock is called
-    expect(errorMock).toHaveBeenCalledWith(err)
+    expect(errorMock).toHaveBeenCalledWith(cause)
   })
 
   it('opens issues url (repository name)', async () => {

tests/unit/views/pullrequests/GitHubPullRequest.spec.ts

@@ -1,3 +1,4 @@
+import { GitHubAccessError } from '@/application/domain/interface/githubAccessor'
 import {
   Account,
   GitHubUrl,
@@ -181,7 +182,8 @@ describe('GitHubPullRequest.vue', () => {
   })
 
   it('fails to get PRs', async () => {
-    const err = new Error('error')
+    const cause = new Error('cause')
+    const err = new GitHubAccessError('error', { cause: cause })
     const supplier = () => {
       throw err
     }
@@ -208,7 +210,7 @@ describe('GitHubPullRequest.vue', () => {
       .then(() => nextTick())
 
     // then: error mock is called
-    expect(errorMock).toHaveBeenCalledWith(err)
+    expect(errorMock).toHaveBeenCalledWith(cause)
   })
 
   it('opens pull requests url (repository name)', async () => {

tests/unit/views/releases/GitHubRelease.spec.ts

@@ -1,3 +1,4 @@
+import { GitHubAccessError } from '@/application/domain/interface/githubAccessor'
 import { Account, GitHubUrl, Release, Releases } from '@/application/domain/model/github'
 import { RepositorySetting } from '@/application/domain/model/githubRepository'
 import {
@@ -146,7 +147,8 @@ describe('GitHubRelease.vue', () => {
   })
 
   it('fails to get releases', async () => {
-    const err = new Error('error')
+    const cause = new Error('cause')
+    const err = new GitHubAccessError('error', { cause: cause })
     const supplier = () => {
       throw err
     }
@@ -174,7 +176,7 @@ describe('GitHubRelease.vue', () => {
       .then(() => nextTick())
 
     // then: error mock is called
-    expect(errorMock).toHaveBeenCalledWith(err)
+    expect(errorMock).toHaveBeenCalledWith(cause)
   })
 
   it('opens release url (repository name)', async () => {