Merge pull request #4540 from stocaaro/main

feat: Add PubSub Hub Connection state monitoring instructions

src/fragments/lib/graphqlapi/js/subscribe-data.mdx

@@ -40,7 +40,7 @@ Amplify.configure({
 
 ### Subscription connection status updates
 
-Now that your application is setup and using subscriptions, you may want to know when the subscription is finally up and running, or reflect to your users when the subscription isn't healthy. You can monitor the connection state for changes via Hub.
+Now that your application is setup and using subscriptions, you may want to know when the subscription is finally established, or reflect to your users when the subscription isn't healthy. You can monitor the connection state for changes via Hub.
 
 ```typescript
 import { CONNECTION_STATE_CHANGE, ConnectionState } from '@aws-amplify/pubsub';

src/fragments/lib/pubsub/js/subunsub.mdx

@@ -56,4 +56,25 @@ const sub1 = PubSub.subscribe('myTopicA').subscribe({
 
 sub1.unsubscribe();
 // You will no longer get messages for 'myTopicA'
-```
+```
+
+## Subscription connection status updates
+
+Now that your application is setup and using pubsub subscriptions, you may want to know when the subscription is finally established, or reflect to your users when the subscription isn't healthy. You can monitor the connection state for changes via Hub.
+
+```typescript
+import { CONNECTION_STATE_CHANGE, ConnectionState } from '@aws-amplify/pubsub';
+import { Hub } from 'aws-amplify';
+
+Hub.listen('pubsub', (data: any) => {
+  const { payload } = data;
+  if (payload.event === CONNECTION_STATE_CHANGE) {
+    const connectionState = payload.data.connectionState as ConnectionState;
+    console.log(connectionState);
+  }
+});
+```
+
+import jsConnectionStates from '/src/fragments/lib/pubsub/js/connection-states.mdx';
+
+<Fragments fragments={{ js: jsConnectionStates }} />