Update troubleshooting steps and add link to guide

Author: dlon

desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx

@@ -12,8 +12,10 @@ import {
   InconsistentVersionNotificationProvider,
   LockdownModeNotificationProvider,
   ReconnectingNotificationProvider,
+  TroubleshootStep,
   UnsupportedVersionNotificationProvider,
 } from '../../shared/notifications';
+import { ExternalLink } from './ExternalLink';
 import { RoutePath } from '../../shared/routes';
 import { useAppContext } from '../context';
 import { useSplitTunnelingSupported } from '../features/split-tunneling/hooks';
@@ -347,7 +349,18 @@ function NotificationActionWrapper({
         <ModalMessage>{action.troubleshoot?.details}</ModalMessage>
         <ModalMessage>
           <ModalMessageList>
-            {action.troubleshoot?.steps.map((step) => <li key={step}>{step}</li>)}
+            {action.troubleshoot?.steps.map((step: TroubleshootStep) =>
+              typeof step === 'string' ? (
+                <li key={step}>{step}</li>
+              ) : (
+                <li key={step['aria-label']}>
+                  <ExternalLink variant="labelTinySemiBold" to={step.to}>
+                    <ExternalLink.Text>{step['aria-label']}</ExternalLink.Text>
+                    <ExternalLink.Icon icon="external" />
+                  </ExternalLink>
+                </li>
+              ),
+            )}
           </ModalMessageList>
         </ModalMessage>
         <ModalMessage>

desktop/packages/mullvad-vpn/src/shared/constants/urls.ts

@@ -4,6 +4,7 @@ export const urls = {
   purchase: 'https://mullvad.net/account/',
   faq: 'https://mullvad.net/help/tag/mullvad-app/',
   privacyGuide: 'https://mullvad.net/help/first-steps-towards-online-privacy/',
+  splitTunnelGuide: 'https://mullvad.net/help/split-tunneling-with-the-mullvad-app#known-issues',
   download: 'https://mullvad.net/download/vpn/',
   removingOpenVpnBlog: 'https://mullvad.net/blog/removing-openvpn-15th-january-2026',
 } as const;

desktop/packages/mullvad-vpn/src/shared/notifications/error.tsx

@@ -2,7 +2,7 @@ import { sprintf } from 'sprintf-js';
 
 import { InternalLink } from '../../renderer/components/InternalLink';
 import { formatHtml } from '../../renderer/lib/html-formatter';
-import { strings } from '../constants';
+import { strings, urls } from '../constants';
 import {
   AuthFailedError,
   ErrorStateCause,
@@ -87,26 +87,18 @@ export class ErrorNotificationProvider
             subtitle: [
               {
                 key: 'split-tunneling-failed-subtitle',
-                content: formatHtml(
-                  sprintf(
-                    // TRANSLATORS: Label for the in-app banner when the app encountered an error
-                    // TRANSLATORS: and will block network traffic until the error is resolved.
-                    messages.pgettext(
-                      'in-app-notifications',
-                      'Failed to start %(splitTunneling)s. <a>Please send a problem report.</a> To unblock network traffic, disable split tunneling.',
-                    ),
-                    { splitTunneling: strings.splitTunneling.toLowerCase() },
+                content: sprintf(
+                  // TRANSLATORS: Label for the in-app banner when the app encountered an error
+                  // TRANSLATORS: and will block network traffic until the error is resolved.
+                  messages.pgettext(
+                    'in-app-notifications',
+                    'Failed to start %(splitTunneling)s. To unblock network traffic, disable split tunneling.',
                   ),
-                  {
-                    a: (value) => (
-                      <InternalLink to={RoutePath.problemReport} variant="labelTinySemiBold">
-                        <InternalLink.Text>{value}</InternalLink.Text>
-                      </InternalLink>
-                    ),
-                  },
+                  { splitTunneling: strings.splitTunneling.toLowerCase() },
                 ),
               },
             ],
+            action: this.getActions(this.context.tunnelState.details) ?? undefined,
           };
         } else {
           subtitle = `${subtitle} ${sprintf(
@@ -367,12 +359,15 @@ export class ErrorNotificationProvider
             'Unable to communicate with Mullvad kernel driver.',
           ),
           steps: [
-            messages.pgettext('troubleshoot', 'Try reconnecting.'),
             messages.pgettext(
               'troubleshoot',
               'If you have installed another VPN then try to uninstall that.',
             ),
             messages.pgettext('troubleshoot', 'Try restarting your device.'),
+            {
+              'aria-label': messages.pgettext('troubleshoot', 'Read our troubleshooting guide'),
+              to: urls.splitTunnelGuide,
+            },
           ],
         },
       };

desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts

@@ -21,9 +21,13 @@ export type SystemNotificationAction =
       };
     };
 
+export type TroubleshootStep =
+  | string
+  | Pick<ExternalLinkProps, 'to' | 'onClick' | 'aria-label' | 'withAuth'>;
+
 export interface InAppNotificationTroubleshootInfo {
   details: string;
-  steps: string[];
+  steps: TroubleshootStep[];
   buttons?: Array<InAppNotificationTroubleshootButton>;
 }