Fixing NotificationsList on Service Worker #8686
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
LGTM |
There was a problem hiding this comment.
@vishwansh01 the logic looks, just some suggestions on readability
|
@vishwansh01 can you update the status here? |
|
Hey @bodhish, Since @vishwansh01 hasn’t responded to the requested changes on the PR, can I create a new PR for this issue if he remains inactive? |
|
@vishwansh01 will you be working on this issue? |
|
@bodhish yes I am working |
|
@vishwansh01 fix the linting errors |
|
👋 Hi, @vishwansh01, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
857248e to
7e15e3c
Compare
|
👋 Hi, @vishwansh01, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
|
@vishwansh01 let me know when its up for review. |
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
WalkthroughThe changes in the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (2)
src/components/Notifications/NotificationsList.tsx (2)
264-266: Add user feedback for service worker unavailability.The early return when service worker is unavailable is good, but users should be informed why the subscription functionality isn't working.
if (!navigator.serviceWorker) { + Warn({ + msg: t("push_notifications_not_supported"), + }); return; }
Line range hint
441-458: Enhance error handling in initialSubscriptionState.The current try-catch block could provide more specific error handling and user feedback.
const intialSubscriptionState = async () => { try { const res = await request(routes.getUserPnconfig, { pathParams: { username: username }, }); + if (!navigator.serviceWorker) { + setIsSubscribed("NotSupported"); + return; + } const reg = await navigator.serviceWorker.ready; + if (!reg.pushManager) { + setIsSubscribed("NotSupported"); + return; + } const subscription = await reg.pushManager.getSubscription(); if (!subscription && !res.data?.pf_endpoint) { setIsSubscribed("NotSubscribed"); } else if (subscription?.endpoint === res.data?.pf_endpoint) { setIsSubscribed("SubscribedOnThisDevice"); } else { setIsSubscribed("SubscribedOnAnotherDevice"); } } catch (error) { + console.error('Failed to initialize subscription state:', error); Sentry.captureException(error); + setIsSubscribed("Error"); } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (1)
src/components/Notifications/NotificationsList.tsx(2 hunks)
| if (!navigator.serviceWorker) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add specific handling for iOS Chrome browser.
Since the PR aims to fix issues with Chrome Mobile iOS, we should add specific detection and handling for this browser where service workers are not supported.
+const isIOSChrome = /CriOS/i.test(navigator.userAgent);
+
+if (isIOSChrome) {
+ Warn({
+ msg: t("push_notifications_not_supported_ios_chrome"),
+ });
+ return;
+}
if (!navigator.serviceWorker) {
return;
}Committable suggestion skipped: line range outside the PR's diff.
| if (reg.pushManager !== null && reg.pushManager !== undefined) { | ||
| setIsSubscribing(true); | ||
| reg.pushManager | ||
| .getSubscription() | ||
| .then(function (subscription) { | ||
| subscription | ||
| ?.unsubscribe() | ||
| .then(async function (_successful) { | ||
| const data = { | ||
| pf_endpoint: "", | ||
| pf_p256dh: "", | ||
| pf_auth: "", | ||
| }; | ||
| await request(routes.updateUserPnconfig, { | ||
| pathParams: { username: username }, | ||
| body: data, | ||
| }); | ||
| setIsSubscribed("NotSubscribed"); | ||
| setIsSubscribing(false); | ||
| }) | ||
| .catch(function (_e) { | ||
| Error({ | ||
| msg: t("unsubscribe_failed"), | ||
| }); | ||
| }); | ||
| }); | ||
| }) | ||
| .catch(function (_e) { | ||
| Error({ msg: t("subscription_error") }); | ||
| }); | ||
| }) | ||
| .catch(function (_e) { | ||
| Error({ msg: t("subscription_error") }); | ||
| }); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve error handling in unsubscribe function.
While the null checks for pushManager are good, the error handling can be improved:
- The deeply nested promise chain makes error handling complex
- Error details are not logged
- Null subscription case isn't handled explicitly
Consider refactoring to async/await for better error handling:
- navigator.serviceWorker.ready
- .then(function (reg) {
- if (reg.pushManager !== null && reg.pushManager !== undefined) {
- setIsSubscribing(true);
- reg.pushManager
- .getSubscription()
- .then(function (subscription) {
- subscription
- ?.unsubscribe()
- .then(async function (_successful) {
- const data = {
- pf_endpoint: "",
- pf_p256dh: "",
- pf_auth: "",
- };
- await request(routes.updateUserPnconfig, {
- pathParams: { username: username },
- body: data,
- });
- setIsSubscribed("NotSubscribed");
- setIsSubscribing(false);
- })
- .catch(function (_e) {
- Error({
- msg: t("unsubscribe_failed"),
- });
- });
- })
- .catch(function (_e) {
- Error({ msg: t("subscription_error") });
- });
- }
- })
- .catch(function (_e) {
- Sentry.captureException(_e);
- });
+ try {
+ const reg = await navigator.serviceWorker.ready;
+ if (!reg.pushManager) {
+ throw new Error('Push manager not available');
+ }
+
+ setIsSubscribing(true);
+ const subscription = await reg.pushManager.getSubscription();
+
+ if (!subscription) {
+ setIsSubscribed("NotSubscribed");
+ return;
+ }
+
+ await subscription.unsubscribe();
+
+ const data = {
+ pf_endpoint: "",
+ pf_p256dh: "",
+ pf_auth: "",
+ };
+
+ await request(routes.updateUserPnconfig, {
+ pathParams: { username: username },
+ body: data,
+ });
+
+ setIsSubscribed("NotSubscribed");
+ } catch (error) {
+ Sentry.captureException(error);
+ Error({
+ msg: t(error.message === 'Push manager not available'
+ ? "push_notifications_not_supported"
+ : "unsubscribe_failed"
+ ),
+ });
+ } finally {
+ setIsSubscribing(false);
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (reg.pushManager !== null && reg.pushManager !== undefined) { | |
| setIsSubscribing(true); | |
| reg.pushManager | |
| .getSubscription() | |
| .then(function (subscription) { | |
| subscription | |
| ?.unsubscribe() | |
| .then(async function (_successful) { | |
| const data = { | |
| pf_endpoint: "", | |
| pf_p256dh: "", | |
| pf_auth: "", | |
| }; | |
| await request(routes.updateUserPnconfig, { | |
| pathParams: { username: username }, | |
| body: data, | |
| }); | |
| setIsSubscribed("NotSubscribed"); | |
| setIsSubscribing(false); | |
| }) | |
| .catch(function (_e) { | |
| Error({ | |
| msg: t("unsubscribe_failed"), | |
| }); | |
| }); | |
| }); | |
| }) | |
| .catch(function (_e) { | |
| Error({ msg: t("subscription_error") }); | |
| }); | |
| }) | |
| .catch(function (_e) { | |
| Error({ msg: t("subscription_error") }); | |
| }); | |
| } | |
| try { | |
| const reg = await navigator.serviceWorker.ready; | |
| if (!reg.pushManager) { | |
| throw new Error('Push manager not available'); | |
| } | |
| setIsSubscribing(true); | |
| const subscription = await reg.pushManager.getSubscription(); | |
| if (!subscription) { | |
| setIsSubscribed("NotSubscribed"); | |
| return; | |
| } | |
| await subscription.unsubscribe(); | |
| const data = { | |
| pf_endpoint: "", | |
| pf_p256dh: "", | |
| pf_auth: "", | |
| }; | |
| await request(routes.updateUserPnconfig, { | |
| pathParams: { username: username }, | |
| body: data, | |
| }); | |
| setIsSubscribed("NotSubscribed"); | |
| } catch (error) { | |
| Sentry.captureException(error); | |
| Error({ | |
| msg: t(error.message === 'Push manager not available' | |
| ? "push_notifications_not_supported" | |
| : "unsubscribe_failed" | |
| ), | |
| }); | |
| } finally { | |
| setIsSubscribing(false); | |
| } |
|
👋 Hi, @vishwansh01, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
|
closing in favor of #8935 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Bug Fixes
New Features
Improvements