AmazonPersonalizeProvider is not working with the latest version of packages/analytics/src/Analytics.ts

[feyzxf]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Analytics

Amplify Categories

analytics

Environment information

System: OS: macOS 10.15.7 CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz Memory: 90.52 MB / 8.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 16.14.0 - /usr/local/bin/node npm: 8.3.1 - /usr/local/bin/npm Browsers: Chrome: 101.0.4951.64 Safari: 15.4 npmPackages: @angular-devkit/build-angular: ~13.2.3 => 13.2.6 @angular-eslint/builder: ~13.0.1 => 13.0.1 @angular-eslint/eslint-plugin: ~13.0.1 => 13.0.1 @angular-eslint/eslint-plugin-template: ~13.0.1 => 13.0.1 @angular-eslint/template-parser: ~13.0.1 => 13.0.1 @angular/cli: ~13.2.3 => 13.2.6 @angular/common: ~13.2.2 => 13.2.7 @angular/common/http: undefined () @angular/common/http/testing: undefined () @angular/common/testing: undefined () @angular/common/upgrade: undefined () @angular/compiler: ~13.2.2 => 13.2.7 @angular/compiler-cli: ~13.2.2 => 13.2.7 @angular/compiler/testing: undefined () @angular/core: ~13.2.2 => 13.2.7 @angular/core/testing: undefined () @angular/forms: ~13.2.2 => 13.2.7 @angular/language-service: ~13.2.2 => 13.2.7 @angular/platform-browser: ~13.2.2 => 13.2.7 @angular/platform-browser-dynamic: ~13.2.2 => 13.2.7 @angular/platform-browser-dynamic/testing: undefined () @angular/platform-browser/animations: undefined () @angular/platform-browser/testing: undefined () @angular/router: ~13.2.2 => 13.2.7 @angular/router/testing: undefined () @angular/router/upgrade: undefined () @aws-amplify/ui-angular: ^2.4.7 => 2.4.7 @aws-amplify/ui-angular/legacy: undefined () @capacitor/android: 3.5.1 => 3.5.1 @capacitor/app: 1.1.1 => 1.1.1 @capacitor/browser: ^1.0.7 => 1.0.7 @capacitor/cli: 3.5.1 => 3.5.1 @capacitor/core: 3.5.1 => 3.5.1 @capacitor/device: ^1.1.2 => 1.1.2 @capacitor/haptics: 1.1.4 => 1.1.4 @capacitor/ios: 3.5.1 => 3.5.1 @capacitor/keyboard: 1.2.2 => 1.2.2 @capacitor/status-bar: 1.0.8 => 1.0.8 @ionic/angular: ^6.0.0 => 6.1.6 @ionic/angular-toolkit: ^6.0.0 => 6.1.0 @types/jasmine: ~3.6.0 => 3.6.11 @types/jasminewd2: ~2.0.3 => 2.0.10 @types/node: ^12.11.1 => 12.20.52 @typescript-eslint/eslint-plugin: 5.3.0 => 5.3.0 @typescript-eslint/parser: 5.3.0 => 5.3.0 aws-amplify: ^4.3.24 => 4.3.24 eslint: ^7.6.0 => 7.32.0 eslint-plugin-import: 2.22.1 => 2.22.1 eslint-plugin-jsdoc: 30.7.6 => 30.7.6 eslint-plugin-prefer-arrow: 1.2.2 => 1.2.2 example-typescript: 1.0.0 jasmine-core: ~3.8.0 => 3.8.0 (2.8.0) jasmine-spec-reporter: ~5.0.0 => 5.0.2 karma: ~6.3.2 => 6.3.20 karma-chrome-launcher: ~3.1.0 => 3.1.1 karma-coverage: ~2.0.3 => 2.0.3 karma-coverage-coffee-example: 1.0.0 karma-coverage-istanbul-reporter: ~3.0.2 => 3.0.3 karma-jasmine: ~4.0.0 => 4.0.2 karma-jasmine-html-reporter: ^1.5.0 => 1.7.0 memo-parser: 0.2.1 node-example: 1.0.0 protractor: ~7.0.0 => 7.0.0 protractor-example: 1.0.0 rxjs: ~6.6.0 => 6.6.7 (7.5.5) rxjs/ajax: undefined () rxjs/fetch: undefined () rxjs/internal-compatibility: undefined () rxjs/operators: undefined () rxjs/testing: undefined () rxjs/webSocket: undefined () ts-node: ~8.3.0 => 8.3.0 tslib: ^2.2.0 => 2.4.0 (2.3.1, 1.14.1) typescript: ~4.4.4 => 4.4.4 typescript-example: 1.0.0 zone-mix: undefined () zone-node: undefined () zone-testing: undefined () zone.js: ~0.11.4 => 0.11.5 zone.js/async-test: undefined () zone.js/async-test.min: undefined () zone.js/fake-async-test: undefined () zone.js/fake-async-test.min: undefined () zone.js/jasmine-patch: undefined () zone.js/jasmine-patch.min: undefined () zone.js/long-stack-trace-zone: undefined () zone.js/long-stack-trace-zone.min: undefined () zone.js/mocha-patch: undefined () zone.js/mocha-patch.min: undefined () zone.js/proxy: undefined () zone.js/proxy.min: undefined () zone.js/sync-test: undefined () zone.js/sync-test.min: undefined () zone.js/task-tracking: undefined () zone.js/task-tracking.min: undefined () zone.js/webapis-media-query: undefined () zone.js/webapis-media-query.min: undefined () zone.js/webapis-notification: undefined () zone.js/webapis-notification.min: undefined () zone.js/webapis-rtc-peer-connection: undefined () zone.js/webapis-rtc-peer-connection.min: undefined () zone.js/webapis-shadydom: undefined () zone.js/webapis-shadydom.min: undefined () zone.js/wtf: undefined () zone.js/wtf.min: undefined () zone.js/zone-bluebird: undefined () zone.js/zone-bluebird.min: undefined () zone.js/zone-error: undefined () zone.js/zone-error.min: undefined () zone.js/zone-legacy: undefined () zone.js/zone-legacy.min: undefined () zone.js/zone-patch-canvas: undefined () zone.js/zone-patch-canvas.min: undefined () zone.js/zone-patch-cordova: undefined () zone.js/zone-patch-cordova.min: undefined () zone.js/zone-patch-electron: undefined () zone.js/zone-patch-electron.min: undefined () zone.js/zone-patch-fetch: undefined () zone.js/zone-patch-fetch.min: undefined () zone.js/zone-patch-jsonp: undefined () zone.js/zone-patch-jsonp.min: undefined () zone.js/zone-patch-message-port: undefined () zone.js/zone-patch-message-port.min: undefined () zone.js/zone-patch-promise-test: undefined () zone.js/zone-patch-promise-test.min: undefined () zone.js/zone-patch-resize-observer: undefined () zone.js/zone-patch-resize-observer.min: undefined () zone.js/zone-patch-rxjs: undefined () zone.js/zone-patch-rxjs-fake-async: undefined () zone.js/zone-patch-rxjs-fake-async.min: undefined () zone.js/zone-patch-rxjs.min: undefined () zone.js/zone-patch-socket-io: undefined () zone.js/zone-patch-socket-io.min: undefined () zone.js/zone-patch-user-media: undefined () zone.js/zone-patch-user-media.min: undefined () npmGlobalPackages: @angular/cli: 10.0.2 @aws-amplify/cli: 7.6.21 @ionic/cli: 6.18.1 cordova-res: 0.15.1 corepack: 0.10.0 native-run: 1.0.0 npm: 8.3.1

Describe the bug

After upgrading aws-amplify to version 4.3.24 the functionaries in this document is not working anymore: https://docs.amplify.aws/lib/analytics/personalize/q/platform/js/

There will be compile error when trying to use the "record" method:

Expected behavior

As described in this document, should be able to call Analytics.record with AmazonPersonalize provider. It works before this update : https://github.com/aws-amplify/amplify-js/commit/9a52c2b6a59bf0d9622a2572f8752b7b419c0817

Reproduction steps

https://docs.amplify.aws/lib/analytics/personalize/q/platform/js/

Code Snippet

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[feyzxf]

hi~ @jamesaucode The compile error is fixed but AmazonPersonalizeProvider is not working. The eventType below need to be allowed as string, otherwise the event is not sending to Amazon Personalize backend.

export interface PersonalizeAnalyticsEvent {
    eventType?: 'Identify' | 'MediaAutoTrack';
    userId?: string;
    properties?: {
        [key: string]: string;
    };
}

[abdallahshaban557]

Hi @feyzxf , I am re-opening this issue so that we can further investigate this!

[ashwinkumar6]

Hi @feyzxf We're working on Ts type fix. Thanks for pointing out the string evenType for the PersonalizeAnalyticsEvent

However, this shouldn't prevent you from using the feature I was able to test the below

import { Analytics, AmazonPersonalizeProvider } from 'aws-amplify';
Analytics.addPluggable(new AmazonPersonalizeProvider());

Analytics.configure({
    AmazonPersonalize: {    
        trackingId: '<my_tracking_id>',
        region: "us-west-2",
    }
});

Analytics.record({
    eventType: 'click',
    userId: 'user1',
    properties:{"itemid": "item1_id"}
}, "AmazonPersonalize")

Can you please check for any errors on the developer console If you're getting a similar error POST https://personalize-events.us-west-2.amazonaws.com/events 403

And On the network tab Message: "User: arn:aws:sts::223123:assumed-role/sample-app-213123-authRole/CognitoIdentityCredentials is not authorized to perform: personalize:PutEvents because no identity-based policy allows the personalize:PutEvents action"

In Which case you will need to a IAM policy to access personalize provider

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "personalize:*"
            ],
            "Resource": "*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "iam:PassRole"
            ],
            "Resource": "*",
            "Condition": {
                "StringEquals": {
                    "iam:PassedToService": "personalize.amazonaws.com"
                }
            }
        }
    ]
}  

You can check if your events are getting added to the AWS Personalize by exporting your data to a S3 bucket and viewing it

[ashwinkumar6]

If it's a different error, could you please provide more details

[feyzxf]

hi~ @ashwinkumar6 i am using ionic 6 + Angular 14 so with the compile error the project cannot be built when running ionic start.

For IAM policy i have already setup before. Actually with aws-amplify v4.3.14 everything works fine.

[ashwinkumar6]

Hi @feyzxf the fix been added in the latest release v4.3.31.