Amplify-js: New WARNING coming from Amplify

[alpjor]

Describe the bug
My AWS project uses aws-amplify/auth (1.0.8) and aws-amplify/analyics (1.0.9) and we're getting a new warning message output into our test runs. This is slowing down the test runs quite a but.

 console.warn node_modules/@aws-amplify/core/lib/Logger/ConsoleLogger.js:78
    [WARN] 23:50.92 Hub - WARNING onHubCapsule is Deprecated. Please pass in a callback.

Expected behavior
Since this warning is thrown from within amplify packages, I would assume that the packages need to be updated to no longer throw this warning internally.

Desktop (please complete the following information):

• OS: MacOs
  
  
  
  • command line
  
  

Sample code

import { AnalyticsData } from "./types";

import Analytics from "@aws-amplify/analytics";

const context: { [s: string]: string } = {};

export const addAnalyticsContext = (newContext: { [s: string]: string }) => {
  Object.assign(context, newContext);
};

export const logAnalytics = (analyticsData: AnalyticsData, metrics?: Record<string, number>) => {
  const { name, ...attributes } = analyticsData;
  Analytics.record({ name, attributes: { ...context, ...attributes }, metrics });
};

and

import Auth from "@aws-amplify/auth";
import Analytics from "@aws-amplify/analytics";
import { getClientConfig } from "common/clientConfig";
import { addAnalyticsContext } from "common/analytics";
import { getUserId } from "common/utils/authUtils";

export const analyticsInit = () => {
  const analyticsConfig = getClientConfig().analytics;
  if (analyticsConfig) {
    const authConfig = { identityPoolId: analyticsConfig.identityPoolId, region: analyticsConfig.identityPoolRegion };
    const pinpointConfig = { appId: analyticsConfig.pinpointAppId, region: analyticsConfig.pinpointRegion };
    Auth.configure(authConfig);
    Analytics.configure(pinpointConfig);

    addAnalyticsContext({ beehiveId: getUserId() });
  }
};

[alpjor]

[undefobj]

@alpjor hello this is by design. The functionality you see is an older style of embedding onHubCapsule into your code. To resolve this, please pass in an explicit callback rather than just passing in this as outlined in the docs: https://aws-amplify.github.io/docs/js/hub#working-with-the-api

[alpjor]

No. It's not by design. Please read my whole ticket. I'm not using onHubCapsule, amplify/auth is. This warning spits out thousands of times when we run your code.

On Apr 11, 2019, at 7:17 PM, Richard Threlkeld [e-mail] wrote:

@alpjor hello this is by design. The functionality you see is an older style of embedding onHubCapsule into your code. To resolve this, please pass in an explicit callback rather than just passing in this as outlined in the docs: https://aws-amplify.github.io/docs/js/hub#working-with-the-api

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[jkeys-ecg-nmsu]

@alpjor @undefobj I'm pretty sure internal usage of onHubCapsule is refactored out of the latest releases of Amplify. Have you tried updating to the latest releases?

[alpjor]

@jkeys-ecg-nmsu I have completely blown away node_modules and reinstalled both packages to verify that I am running the latest releases of aws-amplify/auth (1.0.8) and aws-amplify/analyics (1.0.9). The issue persists.

[jkeys-ecg-nmsu]

Those warnings suggest you're using Hub to dispatch on the auth and analytics channels somewhere in your source. What's the stack traces on the protected channel warnings look like?

[alpjor]

Here is the stack:

Here is the src of index.js the 4th line in the stack:

"use strict";
/*
 * Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
 * the License. A copy of the License is located at
 *
 *     http://aws.amazon.com/apache2.0/
 *
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
 * and limitations under the License.
 */
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
var Analytics_1 = require("./Analytics");
exports.AnalyticsClass = Analytics_1.default;
var core_1 = require("@aws-amplify/core");
var logger = new core_1.ConsoleLogger('Analytics');
var startsessionRecorded = false;
var authConfigured = false;
var analyticsConfigured = false;
var _instance = null;
if (!_instance) {
    logger.debug('Create Analytics Instance');
    _instance = new Analytics_1.default();
}
var Analytics = _instance;
core_1.default.register(Analytics);
exports.default = Analytics;
__export(require("./Providers"));
// listen on app state change
var dispatchAppStateEvent = function (event, data) {
    core_1.Hub.dispatch('appState', { event: event, data: data }, 'AppState');
};
if (core_1.Platform.isReactNative) {
    core_1.AppState.addEventListener('change', function (nextAppState) {
        switch (nextAppState) {
            case 'active':
                dispatchAppStateEvent('active', {});
        }
    });
}
// send a session start event if autoSessionRecord is enabled
var autoSessionRecord = function () {
    var config = Analytics.configure();
    startsessionRecorded = true;
    if (config.autoSessionRecord) {
        Analytics.updateEndpoint({}).then(function () {
            Analytics.startSession().catch(function (e) {
                logger.debug('start Session error', e);
            });
        });
    }
    else {
        logger.debug('auto Session record is diasabled');
    }
};
Analytics.onHubCapsule = function (capsule) {
    var channel = capsule.channel, payload = capsule.payload, source = capsule.source;
    logger.debug('on hub capsule ' + channel, payload);
    switch (channel) {
        case 'auth':
            authEvent(payload);
            break;
        case 'storage':
            storageEvent(payload);
            break;
        case 'analytics':
            analyticsEvent(payload);
            break;
        default:
            break;
    }
};
var storageEvent = function (payload) {
    var attrs = payload.attrs, metrics = payload.metrics;
    if (!attrs)
        return;
    Analytics.record({
        name: 'Storage',
        attributes: attrs,
        metrics: metrics
    });
};
var authEvent = function (payload) {
    var event = payload.event;
    if (!event) {
        return;
    }
    switch (event) {
        case 'signIn':
            Analytics.record({
                name: '_userauth.sign_in'
            });
            break;
        case 'signUp':
            Analytics.record({
                name: '_userauth.sign_up'
            });
            break;
        case 'signOut':
            break;
        case 'signIn_failure':
            Analytics.record({
                name: '_userauth.auth_fail'
            });
            break;
        case 'configured':
            authConfigured = true;
            if (authConfigured && analyticsConfigured && !startsessionRecorded) {
                autoSessionRecord();
            }
            break;
    }
};
var analyticsEvent = function (payload) {
    var event = payload.event;
    if (!event)
        return;
    switch (event) {
        case 'configured':
            analyticsConfigured = true;
            if (authConfigured && analyticsConfigured && !startsessionRecorded) {
                autoSessionRecord();
            }
            break;
    }
};
core_1.Hub.listen('auth', Analytics);
core_1.Hub.listen('storage', Analytics);
core_1.Hub.listen('analytics', Analytics);
//# sourceMappingURL=index.js.map

[alpjor]

I can see the Analytics object using Analytics.onHubCapsule

[alpjor]

Here is the stack from the other warning:

the src of analytics.ts is posted above in the statement of the issue.

[jordanranz]

@alpjor, curious if you are using aws-amplify-react?

[jkeys-ecg-nmsu]

@jordanranz Looks like Authenticator.js is still using onHubCapsule.

Authenticator.js

  Authenticator.prototype.onHubCapsule = function (capsule) {
    var channel = capsule.channel,
        payload = capsule.payload,
        source = capsule.source;

    if (channel === 'auth') {
      switch (payload.event) {
        case 'cognitoHostedUI':
          this.handleStateChange('signedIn', payload.data);
          break;

        case 'cognitoHostedUI_failure':
          this.handleStateChange('signIn', null);
          break;

        case 'parsingUrl_failure':
          this.handleStateChange('signIn', null);
          break;

        case 'signOut':
          this.handleStateChange('signIn', null);
          break;

        case 'customGreetingSignOut':
          this.handleStateChange('signIn', null);
          break;

        default:
          break;
      }
    }
  };

[jordanranz]

@jkeys-ecg-nmsu,

I noticed that as well. Looks like the UI components have not yet been refactored for the Hub change. We will prioritize this refactor next week.

[alpjor]

Thanks everyone!

[jordanranz]

@alpjor, I was not able to reproduce this and after reviewing this issue again it seems you are using an old version of @aws-amplify/analytics. This is the root cause of your issue.

The latest version of the analytics package at the time of writing this issue was version 1.2.14.

@jkeys-ecg-nmsu, This component was actually refactored. The name of the function passed in was just kept the same :D