Show toast when failing to open external link

- toast contains url
- can be copied or clicked

gitbutler-ui/src/lib/components/CommitCard.svelte

@@ -7,11 +7,11 @@
 	import TimeAgo from '$lib/components/TimeAgo.svelte';
 	import { draggable } from '$lib/dragging/draggable';
 	import { draggableCommit, nonDraggable } from '$lib/dragging/draggables';
+	import { openExternalUrl } from '$lib/utils/url';
 	import { filesToFileTree } from '$lib/vbranches/filetree';
 	import { Ownership } from '$lib/vbranches/ownership';
 	import { listRemoteCommitFiles } from '$lib/vbranches/remoteCommits';
 	import { LocalFile, RemoteCommit, Commit, RemoteFile } from '$lib/vbranches/types';
-	import { open } from '@tauri-apps/api/shell';
 	import { writable, type Writable } from 'svelte/store';
 	import { slide } from 'svelte/transition';
 
@@ -122,7 +122,7 @@
 						kind="outlined"
 						icon="open-link"
 						on:click={() => {
-							if (commitUrl) open(commitUrl);
+							if (commitUrl) openExternalUrl(commitUrl);
 						}}>Open commit</Button
 					>
 				</div>

gitbutler-ui/src/lib/components/InfoMessage.svelte

@@ -52,9 +52,7 @@
 			{#if title}
 				<div class="info-message__title text-base-13 text-semibold">{title}</div>
 			{/if}
-			<div class="info-message__text text-base-body-12">
+			<div class="info-message__text text-base-body-12"><slot /></div>
-				<slot />
-			</div>
 		</div>
 		{#if primary || secondary}
 			<div class="info-message__actions">
@@ -88,6 +86,9 @@
 		flex-direction: column;
 		gap: var(--space-12);
 	}
+	.info-message__text {
+		word-break: break-all;
+	}
 	.info-message__content {
 		display: flex;
 		flex-direction: column;

gitbutler-ui/src/lib/components/Link.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '$lib/components/Icon.svelte';
-	import { open } from '@tauri-apps/api/shell';
+	import { openExternalUrl } from '$lib/utils/url';
 	import { onMount } from 'svelte';
 
 	let classes = '';
@@ -32,9 +32,9 @@
 		class:disabled
 		on:click={(e) => {
 			if (href && isExternal) {
-				open(href);
 				e.preventDefault();
 				e.stopPropagation();
+				openExternalUrl(href);
 			}
 		}}
 	>

gitbutler-ui/src/lib/notifications/ToastController.svelte

@@ -4,7 +4,14 @@
 <script lang="ts">
 	import InfoMessage from '$lib/components/InfoMessage.svelte';
 	import { dismissToast, toastStore } from '$lib/notifications/toasts';
+	import { marked } from 'marked';
 	import { slide } from 'svelte/transition';
+
+	var renderer = new marked.Renderer();
+	renderer.link = function (href, title, text) {
+		if (!title) title = text;
+		return '<a target="_blank" href="' + href + '" title="' + title + '">' + text + '</a>';
+	};
 </script>
 
 <div class="toast-controller">
@@ -15,7 +22,7 @@
 				style={toast.style ?? 'neutral'}
 				secondary="Dismiss"
 				on:secondary={() => dismissToast(toast.id)}
-				shadow>{toast.message}</InfoMessage
+				shadow>{@html marked.parse(toast.message, { renderer })}</InfoMessage
 			>
 		</div>
 	{/each}

gitbutler-ui/src/lib/stores/user.ts

@@ -3,7 +3,7 @@ import { resetSentry, setSentryUser } from '$lib/analytics/sentry';
 import { getCloudApiClient, type User } from '$lib/backend/cloud';
 import { invoke } from '$lib/backend/ipc';
 import { sleep } from '$lib/utils/sleep';
-import { open } from '@tauri-apps/api/shell';
+import { openExternalUrl } from '$lib/utils/url';
 import { BehaviorSubject, Observable, Subject, merge, shareReplay } from 'rxjs';
 
 export class UserService {
@@ -49,7 +49,7 @@ export class UserService {
 		this.loading$.next(true);
 		try {
 			const token = await this.cloud.login.token.create();
-			open(token.url);
+			openExternalUrl(token.url);
 
 			// Assumed min time for login flow
 			await sleep(4000);

gitbutler-ui/src/lib/utils/url.ts

@@ -0,0 +1,19 @@
+import { showToast } from '$lib/notifications/toasts';
+import { posthog } from 'posthog-js';
+
+export function openExternalUrl(href: string) {
+	try {
+		open(href);
+	} catch (e) {
+		if (typeof e == 'string' || e instanceof String) {
+			// TODO: Remove if/when we've resolved all external URL problems.
+			posthog.capture('Link Error', { href, message: e });
+
+			const message = 'Failed to open link in external browser: <br />' + href;
+			showToast({ title: 'External URL error', message, style: 'error' });
+		}
+
+		// Rethrowing for sentry and posthog
+		throw e;
+	}
+}

gitbutler-ui/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import '../styles/main.postcss';
 
 	import ShareIssueModal from '$lib/components/ShareIssueModal.svelte';
+	import ToastController from '$lib/notifications/ToastController.svelte';
 	import { SETTINGS_CONTEXT, loadUserSettings } from '$lib/settings/userSettings';
 	import * as events from '$lib/utils/events';
 	import * as hotkeys from '$lib/utils/hotkeys';
@@ -49,3 +50,4 @@
 </div>
 <Toaster />
 <ShareIssueModal bind:this={shareIssueModal} user={$user$} {cloud} />
+<ToastController />