Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[No QA] Improve logging for Pusher error event. Avoid unnecessary reauthentication. Update Pusher. #8635

Merged
merged 11 commits into from
Apr 23, 2022

Conversation

marcaaron
Copy link
Contributor

@marcaaron marcaaron commented Apr 13, 2022

Details

  • Improve logging for Pusher
  • Stop triggering re-authentication when we handle a Pusher error event
  • Pusher error events are not related to authentication and trigger when there are issues with websockets

Fixed Issues

$ #8683

Tests

  1. Sign into NewDot and grep JS logs for 'pusher'
  2. Manually break your authToken somehow e.g.
diff --git a/src/libs/Network/NetworkStore.js b/src/libs/Network/NetworkStore.js
index c0973fa50..c1cb1ff96 100644
--- a/src/libs/Network/NetworkStore.js
+++ b/src/libs/Network/NetworkStore.js
@@ -11,6 +11,8 @@ let hasReadRequiredData = false;
 let isAuthenticating = false;
 let isOffline = false;

+window.borkToken = () => authToken = 'piza';
+
 /**
  * @param {Boolean} val
  */
  1. Go offline by shutting wifi off and wait about 15-30 seconds
  2. Turn wifi back on
  3. Verify that the logs show and that we are successfully connected to Pusher and the channels
    2022-04-18_12-57-24
  • Verify that no errors appear in the JS console

PR Reviewer Checklist

  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the steps for local testing are in the Tests section
    • I verified the steps for Staging and/or Production testing are in the QA steps section
    • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
    • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified tests pass on all platforms & I tested again on:
    • iOS / native
    • Android / native
    • iOS / Safari
    • Android / Chrome
    • MacOS / Chrome
    • MacOS / Desktop
  • I verified there are no console errors (if there’s a console error not related to the PR, report it or open an issue for it to be fixed)
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
    • I verified that comments were added to code that is not self explanatory
    • I verified that any new or modified comments were clear, correct English, and explained “why” the code was doing something instead of only explaining “what” the code was doing.
    • I verified any copy / text shown in the product was added in all src/languages/* files
    • I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
    • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named “index.js”. All platform-specific files are named for the platform the code supports as outlined in the README.
    • I verified the JSDocs style guidelines (in STYLE.md) were followed
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I verified that this PR follows the guidelines as stated in the Review Guidelines
  • I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
  • I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
  • If a new component is created I verified that:
    • A similar component doesn't exist in the codebase
    • All props are defined accurately and each prop has a /** comment above it */
    • Any functional components have the displayName property
    • The file is named correctly
    • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
    • The only data being stored in the state is data necessary for rendering and nothing else
    • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
    • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
    • All JSX used for rendering exists in the render method
    • The component has the minimum amount of code necessary for its purpose and it is broken down into smaller components in order to separate concerns and functions
  • If a new CSS style is added I verified that:
    • A similar style doesn’t already exist
    • The style can’t be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
  • If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
  • If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.

QA Steps

No QA

  • Verify that no errors appear in the JS console

Screenshots

Web

Mobile Web

Desktop

iOS

Android

@marcaaron marcaaron self-assigned this Apr 13, 2022
@marcaaron marcaaron changed the title [WIP] Fix Pusher Custom authorizer callback() using wrong method signature [WIP] Improve logging for Pusher error event. Avoid unnecessary reauthentication. Apr 18, 2022
@marcaaron marcaaron changed the title [WIP] Improve logging for Pusher error event. Avoid unnecessary reauthentication. [No QA] Improve logging for Pusher error event. Avoid unnecessary reauthentication. Apr 18, 2022
@marcaaron marcaaron changed the title [No QA] Improve logging for Pusher error event. Avoid unnecessary reauthentication. [No QA] Improve logging for Pusher error event. Avoid unnecessary reauthentication. Update Pusher. Apr 18, 2022

reject(status);
channel.bind('pusher:subscription_error', (data) => {
const {type, error, status} = data;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The signature of this error event has changed. Previously we were throwing an error that could be caught by any caller of Pusher.subscribe(). This can be an AuthError and then would get thrown with a reject(undefined). So, this change gives us a bit more information about what went wrong. I think for the most part this would be an AuthError (what would happen when the callback() in the custom authorizer returns an error).

Log.hmmm('[PusherConnectionManager] WebSocketError', {error});
} else {
Log.alert(`${CONST.ERROR.ENSURE_BUGBOT} [PusherConnectionManager] Unknown error event`, {error});
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this stuff is a little redundant, but I'm enumerating these and logging an alert so we can clearly document all the errors that can possibly happen.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great addition

Log.info('[PusherConnectionManager] Unhandled error: ', false, {channelName});
callback(error, {auth: ''});
Log.hmmm('[PusherAuthorizer] Unhandled error: ', {channelName, error});
callback(new Error('Push_Authenticate request failed'), {auth: ''});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not re-throwing this error because the error that can show up in a catch doesn't really offer much information about why the request failed anyway. It could have:

  • run out of retries
  • server returned 403 Forbidden header (which we can't tell from the JS)
    • User doesn't have access to a report
    • Channel name isn't valid
    • etc...

@@ -318,7 +318,14 @@ function subscribeToUserEvents() {
}, false,
() => {
NetworkConnection.triggerReconnectionCallbacks('pusher re-subscribed to private user channel');
});
})
.catch((error) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needed a catch as it was causing an unhandled promise rejection.

@marcaaron marcaaron marked this pull request as ready for review April 18, 2022 23:38
@marcaaron marcaaron requested a review from a team as a code owner April 18, 2022 23:38
@melvin-bot melvin-bot bot requested review from techievivek and removed request for a team April 18, 2022 23:38
@@ -16,16 +17,20 @@ function init() {
}));

/**
* Events that happen on the pusher socket are used to determine if the app is online or offline.
* The offline setting is stored in Onyx so the rest of the app has access to it.
*
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this as it is not accurate. The events are not used to determine online/offline status.

@techievivek
Copy link
Contributor

While testing this locally I can see that after disconnecting once I reconnect it doesn't throw any more error and the last command that it executes on server was Push_Authenticate. So I am thinking this is working as expected but I am not able to see the info logs on my console.

@marcaaron
Copy link
Contributor Author

I am not able to see the info logs on my console.

Is Verbose level turned on in Chrome JS console?

2022-04-20_10-43-14

techievivek
techievivek previously approved these changes Apr 20, 2022
Copy link
Contributor

@techievivek techievivek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh thanks, it works as expected now. For code, I think it will be better if someone else with experience writing code related to pusher can look into it because this is definitely a good upgrade over what we already had. As part of my review, it looked good to me.

@marcaaron
Copy link
Contributor Author

For code, I think it will be better if someone else with experience writing code related to pusher can look into it because this is definitely a good upgrade over what we already had. As part of my review, it looked good to me.

Good call. I will ask for some help!

switch (eventName) {
case 'error':
Log.info('[PusherConnectionManager] error event', false, {error: data});
Session.reauthenticatePusher();
if (error && error.type === 'PusherError' && error.data.code === 1006) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB question, we are guaranteed to have the data field be present with code defined?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(given an error event name)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah good catch. I think it's probably unsafe to assume that.

Session.reauthenticatePusher();
if (error && error.type === 'PusherError' && error.data.code === 1006) {
Log.hmmm('[PusherConnectionManager] Channels Error 1006', {error});
} else if (error && error.type === 'PusherError' && error.data.code === 4201) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a place where these seemingly-arbituary integer error codes are referenced?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(aka could we add this as a comment to reference?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think I can do that.

johnmlee101
johnmlee101 previously approved these changes Apr 20, 2022
Copy link
Contributor

@johnmlee101 johnmlee101 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, just a few open questions

johnmlee101
johnmlee101 previously approved these changes Apr 20, 2022
@marcaaron
Copy link
Contributor Author

Updated 🙃

@marcaaron
Copy link
Contributor Author

Updated

Copy link
Contributor

@Beamanator Beamanator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested with your steps (borked the authToken, killed wifi ~ 20 seconds, reconnected) and saw successful pusher connection after 👍

@marcaaron marcaaron merged commit ad637d3 into main Apr 23, 2022
@marcaaron marcaaron deleted the marcaaron-fixCustomAuthorizer branch April 23, 2022 00:20
@OSBotify
Copy link
Contributor

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @marcaaron in version: 1.1.57-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @chiragsalian in version: 1.1.57-17 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants