In-App event messaging dispatch event does not trigger

ykethan commented 6 months ago

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

Next.js

Amplify APIs

Analytics

Amplify Version

v6

Amplify Categories

analytics, notifications

Backend

None

Environment information

``` System: OS: macOS 14.3.1 CPU: (8) arm64 Apple M1 Memory: 70.13 MB / 16.00 GB Shell: 3.6.1 - /opt/homebrew/bin/fish Binaries: Node: 18.19.0 - ~/.local/share/nvm/v18.19.0/bin/node Yarn: 3.6.4 - ~/.local/share/nvm/v18.19.0/bin/yarn npm: 10.2.3 - ~/.local/share/nvm/v18.19.0/bin/npm pnpm: 7.26.2 - /opt/homebrew/bin/pnpm Browsers: Chrome: 121.0.6167.184 Safari: 17.3.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/ui-react: ^6.1.4 => 6.1.4 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-notifications: ^2.0.12 => 2.0.12 @babel/core: undefined () @babel/runtime: 7.22.5 @edge-runtime/cookies: 4.0.2 @edge-runtime/ponyfill: 2.4.1 @edge-runtime/primitives: 4.0.2 @hapi/accept: undefined () @mswjs/interceptors: undefined () @napi-rs/triples: undefined () @next/font: undefined () @next/react-dev-overlay: undefined () @opentelemetry/api: undefined () @segment/ajv-human-errors: undefined () @types/node: ^20 => 20.10.8 @types/react: ^18 => 18.2.47 @types/react-dom: ^18 => 18.2.18 @vercel/nft: undefined () @vercel/og: 0.5.15 acorn: undefined () amphtml-validator: undefined () anser: undefined () arg: undefined () assert: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^6.0.17 => 6.0.17 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () babel-packages: undefined () browserify-zlib: undefined () browserslist: undefined () buffer: undefined () bytes: undefined () ci-info: undefined () cli-select: undefined () client-only: 0.0.1 comment-json: undefined () compression: undefined () conf: undefined () constants-browserify: undefined () content-disposition: undefined () content-type: undefined () cookie: undefined () cross-spawn: undefined () crypto-browserify: undefined () css.escape: undefined () data-uri-to-buffer: undefined () debug: undefined () devalue: undefined () domain-browser: undefined () edge-runtime: undefined () events: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () get-orientation: undefined () glob: undefined () gzip-size: undefined () http-proxy: undefined () http-proxy-agent: undefined () https-browserify: undefined () https-proxy-agent: undefined () icss-utils: undefined () ignore-loader: undefined () image-size: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () jest-worker: undefined () json5: undefined () jsonwebtoken: undefined () loader-runner: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () micromatch: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () native-url: undefined () neo-async: undefined () next: 14.0.4 => 14.0.4 node-fetch: undefined () node-html-parser: undefined () ora: undefined () os-browserify: undefined () p-limit: undefined () path-browserify: undefined () platform: undefined () postcss-flexbugs-fixes: undefined () postcss-modules-extract-imports: undefined () postcss-modules-local-by-default: undefined () postcss-modules-scope: undefined () postcss-modules-values: undefined () postcss-preset-env: undefined () postcss-safe-parser: undefined () postcss-scss: undefined () postcss-value-parser: undefined () process: undefined () punycode: undefined () querystring-es3: undefined () raw-body: undefined () react: ^18 => 18.2.0 react-builtin: undefined () react-dom: ^18 => 18.2.0 react-dom-builtin: undefined () react-dom-experimental-builtin: undefined () react-experimental-builtin: undefined () react-is: 18.2.0 react-refresh: 0.12.0 react-server-dom-turbopack-builtin: undefined () react-server-dom-turbopack-experimental-builtin: undefined () react-server-dom-webpack-builtin: undefined () react-server-dom-webpack-experimental-builtin: undefined () regenerator-runtime: 0.13.4 sass-loader: undefined () scheduler-builtin: undefined () scheduler-experimental-builtin: undefined () schema-utils: undefined () semver: undefined () send: undefined () server-only: 0.0.1 setimmediate: undefined () shell-quote: undefined () source-map: undefined () stacktrace-parser: undefined () stream-browserify: undefined () stream-http: undefined () string-hash: undefined () string_decoder: undefined () strip-ansi: undefined () superstruct: undefined () tar: undefined () terser: undefined () text-table: undefined () timers-browserify: undefined () tty-browserify: undefined () typescript: ^5 => 5.3.3 ua-parser-js: undefined () unistore: undefined () util: undefined () vm-browserify: undefined () watchpack: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () ws: undefined () zod: undefined () npmGlobalPackages: @aws-amplify/cli: 12.10.1 corepack: 0.22.0 npm: 10.2.3 yarn: 1.22.21 ```

Describe the bug

Created an pinpoint resource with Amplify Gen 2 with a nextjs app

in _app.tsx

import { Amplify } from "aws-amplify";
import config from "../amplifyconfiguration.json";
import {
  initializeInAppMessaging,
  syncMessages,
  dispatchEvent,
} from "aws-amplify/in-app-messaging";
import { withInAppMessaging } from "@aws-amplify/ui-react-notifications";

import "@aws-amplify/ui-react/styles.css";

Amplify.configure(config);

const currentConfig = Amplify.getConfig();

Amplify.configure(
  {
    ...currentConfig,

    Analytics: {
      Pinpoint: {
        appId: config.Analytics.AWSPinpoint.appId,
        region: "us-east-1",
      },
    },
    Notifications: {
      PushNotification: {
        Pinpoint: {
          appId: config.Analytics.AWSPinpoint.appId,
          region: "us-east-1",
        },
      },
    },
  },
  { ssr: true }
);
initializeInAppMessaging();

const App = ({ Component, pageProps }: AppProps) => {
  useEffect(() => {
    console.log(Amplify.getConfig());
    syncMessages();
  }, []);
  return <Component {...pageProps} />;
};

export default withInAppMessaging(App);

index.tsx

import { get } from "aws-amplify/api";
import { Amplify } from "aws-amplify";
import {
  dispatchEvent,
} from "aws-amplify/in-app-messaging";
import { Button, View } from "@aws-amplify/ui-react";
import { record } from "aws-amplify/analytics";

const myFirstEvent = { name: "PURCHASE" };

export default function Home() {
  return (
    <main>
      <View>
        <Button
          onClick={() => {
            record(myFirstEvent);
          }}
        >
          Record Analytics Event
        </Button>
        <Button
          onClick={() => {
            dispatchEvent(myFirstEvent);
          }}
        >
          Send In-App Messaging Event
        </Button>
      </View>
    </main>
  );
}

on running the app do see Analytics event in the network tab but the In-App messaging doesnt seem to do anything. No network errors.

but the app does throw error

assertValidationError.mjs:18 Uncaught (in promise) NoAppId: Missing application id.
    at assertValidationError (webpack-internal:///./node_modules/@aws-amplify/notifications/dist/esm/inAppMessaging/errors/assertValidationError.mjs:18:15)
    at resolveConfig (webpack-internal:///./node_modules/@aws-amplify/notifications/dist/esm/inAppMessaging/providers/pinpoint/utils/resolveConfig.mjs:20:93)
    at fetchInAppMessages (webpack-internal:///./node_modules/@aws-amplify/notifications/dist/esm/inAppMessaging/providers/pinpoint/apis/syncMessages.mjs:63:106)
    at async syncMessages (webpack-internal:///./node_modules/@aws-amplify/notifications/dist/esm/inAppMessaging/providers/pinpoint/apis/syncMessages.mjs:47:22)
assertValidationError @ assertValidationError.mjs:18
resolveConfig @ resolveConfig.mjs:20
fetchInAppMessages @ syncMessages.mjs:63
await in fetchInAppMessages (async)

which is unexpected as Amplify.getConfig() does show the resources

Expected behavior

n/a

Reproduction steps

create a Gen 2 app

add resource


const pinpoint = new CfnApp(apigateway, "Pinpoint", {
name: "myPinpointApp",
});

const mySegment = new CfnSegment(apigateway, "Segment", { applicationId: pinpoint.ref, name: "mySegment", });

new CfnCampaign(apigateway, "MyCampaign", { applicationId: pinpoint.ref, name: "MyCampaign", segmentId: mySegment.attrSegmentId, schedule: { startTime: "IMMEDIATE", frequency: "IN_APP_EVENT", eventFilter: { dimensions: { eventType: { dimensionType: "INCLUSIVE", values: ["PURCHASE"], }, }, filterType: "ENDPOINT", }, },

messageConfiguration: { inAppMessage: { layout: "TOP_BANNER", content: [ { // Define the content of the in-app message bodyConfig: { alignment: "CENTER", body: "This is an example in-app message.", textColor: "#FFFFFF", }, backgroundColor: "#000000", headerConfig: { alignment: "CENTER", header: "Welcome!", textColor: "#FFFFFF", }, // Optionally, define buttons, images, etc. }, ], }, }, });

const pinpointPolicy = new Policy(apigateway, "PinpointPolicy", { policyName: "PinpointPolicy", statements: [ new PolicyStatement({ actions: ["mobiletargeting:UpdateEndpoint", "mobiletargeting:PutEvents"], resources: ["*"], }), ], });

bac.auth.resources.authenticatedUserIamRole.attachInlinePolicy(pinpointPolicy); bac.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy( pinpointPolicy );

bac.addOutput({ Analytics: { AWSPinpoint: { appId: pinpoint.ref, region: "us-east-1", }, }, Notifications: { InAppMessaging: { AWSPinpoint: { appId: pinpoint.ref, region: "us-east-1", }, }, }, });


### Code Snippet

```javascript
// Put your code below this line.

Log output

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

aws-exports.js

"Analytics": {
    "AWSPinpoint": {
      "appId": "",
      "region": "us-east-1"
    }
  },
  "Notifications": {
    "InAppMessaging": {
      "AWSPinpoint": {
        "appId": "",
        "region": "us-east-1"
      }
    }

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

nadetastic commented 6 months ago

HI @ykethan thank you for opening this issue. The issue looks like you have scoped the wrong configuration for InApp messaging and set it up under PushNotifications, which is only supported in ReactNative.

Update you config to the following and let me know if it works


Notifications: {
      InAppMessaging: {
        Pinpoint: {
          appId: config.Analytics.AWSPinpoint.appId,
          region: "us-east-1",
        },
      },
    },

nadetastic commented 6 months ago

Closing out this issue after discussing separately with @ykethan - issue was due to missing start and end time on the Campaign

aws-amplify / amplify-js