feat: recovery page when local gateway is unreachable #1125

whizzzkid · 2022-12-23T09:31:15Z

Addresses: #1090

In this PR:

Recovery mechanism for URLs that are not reachable because the node is offline.
Adds a button to redirect to public url.
Refactor
Recovery Page UX

Screenshot:

Recovery Process:

recovery_companion_2x.mp4

Auto-Reload:

recovery_auto-reload.mp4

whizzzkid

explainers.

whizzzkid · 2022-12-29T11:14:57Z

add-on/manifest.common.json

@@ -33,7 +33,10 @@
    "icons/png/ipfs-logo-off_38.png",
    "icons/png/ipfs-logo-off_128.png",
    "icons/ipfs-logo-on.svg",
-    "icons/ipfs-logo-off.svg"
+    "icons/ipfs-logo-off.svg",


I am not sure how this is persisted on CI, locally this gets overwritten.

@whizzzkid This file is a template used for generating final add-on/manifest.json for specific runtime: firefox, chromium, or brave (production brave used chromium, but we need this for local testing).

Generation happens in ci/update-manifest.sh (triggered during build with some env vars). It was way more complex in the past when we had beta channels, we could simplify build pipeline these days, but did not bother since it works fine.

whizzzkid · 2022-12-29T11:15:45Z

add-on/src/lib/ipfs-request.js

+      if (!state.connected && request.type === 'main_frame' && sameGateway(request.url, state.gwURL)) {
+        const publicUri = ipfsPathValidator.resolveToPublicUrl(request.url, state.pubGwURLString)
+        return { redirectUrl: `${dropSlash(runtimeRoot)}${recoveryPagePath}#${publicUri}` }
+      }


once we know we're not connected we can load the recovery page and append the public URI as a hash

whizzzkid · 2022-12-29T11:17:31Z

add-on/src/lib/state.js

+  Object.defineProperty(state, 'connected', {
+    // TODO: make quick fetch to confirm it works?
+    get: function () { return this.peerCount > offlinePeerCount + 1 }
+  })
+  Object.defineProperty(state, 'nodeActive', {
+    // TODO: make quick fetch to confirm it works?
+    get: function () { return this.peerCount !== offlinePeerCount }
+  })


Implemented the missing TODOs, will move this to a proper class later.

whizzzkid · 2023-01-05T09:26:04Z

@juliaxbow implemented v0 design, I think it's good enough for now, we can tweak the design more after we have more clarity in #1090

lidel

Thank you @whizzzkid, this is a nice quality of life improvement.

Before we merge:

add regression tests
- I think a simple modifyRequest.onBeforeRequest test in test/functional/lib/ipfs-request-gateway-redirect.test.js should suffice – we want somehting to guard the behavior so it does not break during future refactors.
- Feel free to add E2E that tests behavior of recovery page if you have time.
address minor bugs / cosmetic changes to the presentation suggested below
refine design to follow suggestion / mockup from Improve UX when localhost gateway is offline #1090 (comment) ✨

add-on/src/lib/ipfs-request.js

add-on/src/lib/helpers.js

lidel · 2023-01-11T15:07:58Z

add-on/src/landing-pages/welcome/page.js

-      ${logo({ path: logoPath, size: logoSize, isIpfsOnline: isIpfsOnline })}
-      <p class="montserrat mt3 mb0 f2">${i18n.getMessage('page_landingWelcome_logo_title')}</p>
+      ${renderLogo(isIpfsOnline)}
+      ${showTitle ? `<p class="montserrat mt3 mb0 f2">${i18n.getMessage('page_landingWelcome_logo_title')}</p>` : ''}


HTML is not rendered properly:

Thanks for checking, fixed!

add-on/src/recovery/recovery.html

add-on/_locales/en/messages.json

add-on/src/recovery/recovery.js

add-on/_locales/en/messages.json

add-on/src/recovery/recovery.js

lidel · 2023-01-11T16:43:52Z

add-on/src/lib/state.js

+  Object.defineProperty(state, 'connected', {
+    // TODO: make quick fetch to confirm it works?
+    get: function () { return this.peerCount > offlinePeerCount + 1 }
+  })


This + 1 will cause bugs when your local node is running, but your internet connection goes down. Imagine you opened something, it got cached on your IPFS node, then you shut down your laptop, go to a place without iternet and you opened laptop and restarted browser and there is a tab with localhost gateway URL.

User should be able to browse IPFS resources cached on their IPFS node when WAN is down, but due to peerCount > 0 requirement here Companion will show recovery page, forbidding them from leveraging IPFS cache.

Mind removing this and only triggering recovery when peerCount === offlinePeerCount?

you're right I did not think about that.

lidel · 2023-01-11T16:51:21Z

add-on/src/lib/state.js

+    // TODO: make quick fetch to confirm it works?
+    get: function () { return this.peerCount > offlinePeerCount + 1 }
+  })
+  Object.defineProperty(state, 'nodeActive', {


Do you know if things defined via Object.defineProperty will survive postMessage serialization present in places where we use browser.runtime.connect ?

I vaguely remember that we did not do getters like this in the past because it did not survive serialization (maybe browser fixed it these days?). That is why we read peerCount field directly (without getters) and compare it to offlinePeerCount const.

By adding these getters here, we are having two ways of doing online check in the codebase, which over time leads to errors.

My suggestion is to remove these Object.defineProperty to keep this PR scope small, and if you want to add them, do that in separate PR that also refactors all places which act on peerCount (if possible, but I feel it may not be worth the work).

It looks like it does: https://github.com/ipfs/ipfs-companion/pull/1125/files#diff-cf4a768af4d2baab2a1c0a5862f50af6239b155754f4a9ea90b43e465f115d88R148

I need this to validate if we need to recover the client. However I didn't want to touch too much of this, I'm just trying to follow the adjacent code pattern. I created #1129 to tackle this again in the future.

Co-authored-by: Marcin Rataj <lidel@lidel.org>

whizzzkid · 2023-01-13T07:13:47Z

@lidel addressed your concerns, here is the new UI, cc: @juliaxbow

* main: feat: add telemetry to companion (#1117) chore: update PRIVACY-POLICY.md (#1137)

whizzzkid · 2023-01-31T02:37:20Z

add-on/src/recovery/recovery.js

+app.use(createWelcomePageStore(i18n, runtime))
+// Register our single route
+app.route('*', (state) => {
+  browser.runtime.sendMessage({ telemetry: { trackView: 'recovery' } })


@SgtPooki added view for recovery pages.

lidel

@whizzzkid thanks!
Code lgtm, but before we merge, the layout needs a few final touches to match aesthetic proposed by Julia:

Current state	Original mockup

We've added some more text, so I propose balancing things by moving some content to the left side:

left side: remove companion cube, name and version, and instead show ⚠️ icon and the first header there
- Note we already have nice orange icon for this on the welcome screen, when node is offline, just reuse it:
remove topbar (it is redundant if we have left panel)
fix css of links: they should not have underline, and should not be purple when :visited
fix css of the green button (round radius, padding, color

whizzzkid · 2023-02-03T06:38:31Z

@lidel

wasn't the mockup: Improve UX when localhost gateway is offline #1090 (comment) (with header?) I removed the header now.
Fixed other asks.

lidel

Thank you @whizzzkid, we've ended up with a really user-friendly interface! ❤️

Some notes:

I meant Improve UX when localhost gateway is offline #1090 (comment) because the top bar is only present in Options page. Welcome screen, which has the split design, does not have it and we should keep things minimalistic.
I've shortened info text and applied same link style as on Welcome page.
Let's ship it. Merging.
(thoughts on follow-up work) We can refine user experience further by showing a similar screen when a remote HTTP server fails, but it is a domain name with DNSLink, or the URL that is a public gateway. Currently, we just silently retry via local gateway, but showing intermediate page like this would be a better UX (removes surprising behavior and bugs, allows us to educate user about the value of IPFS around making websites more robust and immune to DoS or censorship).

add-on/_locales/en/messages.json

add-on/src/recovery/recovery.js

add-on/_locales/en/messages.json

whizzzkid added 9 commits December 23, 2022 02:29

Adding recovery options

b9232a1

fixing packages

3ac7e12

hooking components

5103b60

reverting changes

3a53c02

adding additional state prop getters

3256407

Adding hookup for local gateway down.

fb301e0

Refactor

df31834

Marking recovery page as accessible

a3feda0

unnecessary logging

e389d45

whizzzkid commented Dec 29, 2022

View reviewed changes

lint

133ca93

whizzzkid marked this pull request as ready for review December 29, 2022 11:26

whizzzkid requested review from lidel, meandavejustice and a team as code owners December 29, 2022 11:26

whizzzkid added 3 commits December 29, 2022 14:32

Fixing UI + encdec URIs

cd5f4bf

Making page recover if node is online.

03c14c6

Merge branch 'main' into feat/recover-client

23412e4

juliaxbow mentioned this pull request Jan 4, 2023

Improve UX when localhost gateway is offline #1090

Closed

Refactor + Implement Design Change

a438c19

whizzzkid mentioned this pull request Jan 6, 2023

feat: track intercepted URL count (app usage) #1127

Open

3 tasks

lidel requested changes Jan 11, 2023

View reviewed changes

whizzzkid and others added 7 commits January 12, 2023 19:08

Merge branch 'main' into feat/recover-client

0561ea3

Update add-on/src/lib/ipfs-request.js

e31cbbf

Co-authored-by: Marcin Rataj <lidel@lidel.org>

Update add-on/_locales/en/messages.json

0561045

Co-authored-by: Marcin Rataj <lidel@lidel.org>

Update add-on/src/recovery/recovery.js

4a139d8

Co-authored-by: Marcin Rataj <lidel@lidel.org>

Update add-on/_locales/en/messages.json

5ce8b18

Co-authored-by: Marcin Rataj <lidel@lidel.org>

Update add-on/_locales/en/messages.json

baad760

Co-authored-by: Marcin Rataj <lidel@lidel.org>

Update add-on/src/recovery/recovery.html

4ff97b6

Co-authored-by: Marcin Rataj <lidel@lidel.org>

whizzzkid added 2 commits January 12, 2023 23:38

lint

2ea33c2

feat: Adding regression test

4c5642b

whizzzkid requested a review from lidel January 13, 2023 07:14

whizzzkid added 5 commits January 18, 2023 16:39

Merge branch 'main' into feat/recover-client

20f71b6

Merge branch 'main' into feat/recover-client

414df96

Merge branch 'main' into feat/recover-client

c6e6dc5

Merge branch 'main' into feat/recover-client

c7e6956

* main: feat: add telemetry to companion (#1117) chore: update PRIVACY-POLICY.md (#1137)

feat: ✨ Add telemetry for recovery mechanism

ba6e573

whizzzkid commented Jan 31, 2023

View reviewed changes

lidel requested changes Jan 31, 2023

View reviewed changes

whizzzkid added 3 commits February 2, 2023 22:18

Merge branch 'main' into feat/recover-client

0ca8d4a

fix(ux): 🗑️ getting rid of header, companion logo and additional text.

2d8f803

fix(ux): 💄 Fixing CSS

97be393

whizzzkid requested a review from lidel February 3, 2023 07:09

fix: 🚨 fix lint

3e76bf8

lidel approved these changes Feb 3, 2023

View reviewed changes

style: adjust text and css

6f53132

lidel merged commit a74fbb3 into main Feb 3, 2023

lidel deleted the feat/recover-client branch February 3, 2023 13:52

lidel changed the title ~~feat: recover client if localhost is unreachable~~ feat: recovery page when local gateway is unreachable Feb 3, 2023

This was referenced Feb 8, 2023

chore(fix/release-please): release ipfs-companion 2.22.0 #1150

Closed

chore(fix/release-please): release ipfs-companion 2.22.0 [demo-only-don't-merge] #1151

Closed

This was referenced Feb 15, 2023

chore(main): release ipfs-companion 2.22.0 #1157

Merged

chore(main): release ipfs-companion 2.23.0 #1159

Closed

This was referenced Feb 22, 2023

Redirect to local gateway not working #1162

Closed

fix(recovery): 🐛 false-positive for non-gateway URLs #1163

Merged

lidel mentioned this pull request Jun 20, 2023

[MV3 Beta Bug] Automatic mode does not work automatically on Brave or Chrome #1204

Closed

github-actions bot mentioned this pull request Sep 21, 2023

chore(main): release 3.0.1 #1288

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: recovery page when local gateway is unreachable #1125

feat: recovery page when local gateway is unreachable #1125

whizzzkid commented Dec 23, 2022 •

edited

Loading

whizzzkid left a comment

whizzzkid Dec 29, 2022

lidel Jan 11, 2023

whizzzkid Dec 29, 2022

whizzzkid Dec 29, 2022

whizzzkid commented Jan 5, 2023

lidel left a comment •

edited by whizzzkid

Loading

lidel Jan 11, 2023

whizzzkid Jan 13, 2023

lidel Jan 11, 2023

whizzzkid Jan 13, 2023

lidel Jan 11, 2023

whizzzkid Jan 13, 2023

whizzzkid commented Jan 13, 2023

whizzzkid Jan 31, 2023

lidel left a comment •

edited by whizzzkid

Loading

whizzzkid commented Feb 3, 2023 •

edited

Loading

lidel left a comment •

edited

Loading

feat: recovery page when local gateway is unreachable #1125

feat: recovery page when local gateway is unreachable #1125

Conversation

whizzzkid commented Dec 23, 2022 • edited Loading

whizzzkid left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whizzzkid commented Jan 5, 2023

lidel left a comment • edited by whizzzkid Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whizzzkid commented Jan 13, 2023

Choose a reason for hiding this comment

lidel left a comment • edited by whizzzkid Loading

Choose a reason for hiding this comment

whizzzkid commented Feb 3, 2023 • edited Loading

lidel left a comment • edited Loading

Choose a reason for hiding this comment

whizzzkid commented Dec 23, 2022 •

edited

Loading

lidel left a comment •

edited by whizzzkid

Loading

lidel left a comment •

edited by whizzzkid

Loading

whizzzkid commented Feb 3, 2023 •

edited

Loading

lidel left a comment •

edited

Loading