[BUG] Error with CDN build v3.0.5 (on production build error occur, but on development build it works as expected) #9

YasunoriMATSUOKA · 2022-08-19T08:25:09Z

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Open the following html file with browser,
See error

html file's content

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@nemtus/symbol-sdk-openapi-generator-typescript-axios@latest/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nemtus/symbol-sdk-typescript@latest/index.min.js"></script>
  </head>
  <body>
    <script>
      const restApiClient = window.symbolSdkOpenAPIGeneratorTypeScriptAxios;
      const symbolSdk = window.symbolSdk;

      const NODE_DOMAIN = "symbol-test.next-web-technology.com";

      (async () => {
        // epochAdjustment, networkCurrencyMosaicIdの取得のためNetworkRoutesApi.getNetworkPropertiesを呼び出す
        const configurationParameters = {
          basePath: `http://${NODE_DOMAIN}:3000`,
        };
        const configuration = new restApiClient.Configuration(
          configurationParameters
        );
        const networkRoutesApi = new restApiClient.NetworkRoutesApi(
          configuration
        );

        const networkPropertiesDTO = (
          await networkRoutesApi.getNetworkProperties()
        ).data;

        // epochAdjustmentのレスポンス値は文字列でsが末尾に含まれるため除去してnumberに変換する
        const epochAdjustmentOriginal =
          networkPropertiesDTO.network.epochAdjustment;
        if (!epochAdjustmentOriginal) {
          throw Error("epochAdjustment is not found");
        }
        const epochAdjustment = parseInt(
          epochAdjustmentOriginal.replace(/s/g, "")
        );

        // networkCurrencyMosaicIdのレスポンス値はhex文字列で途中に'が含まれるため除去してBigIntに変換する
        const networkCurrencyMosaicIdOriginal =
          networkPropertiesDTO.chain.currencyMosaicId;
        if (!networkCurrencyMosaicIdOriginal) {
          throw Error("networkCurrencyMosaicId is not found");
        }
        const networkCurrencyMosaicId = BigInt(
          networkCurrencyMosaicIdOriginal.replace(/'/g, "")
        );

        // facadeの中に指定するtestnet等のネットワーク名を取得するためNetworkRoutesApi.getNetworkTypeを呼び出す
        const networkTypeDTO = (await networkRoutesApi.getNetworkType()).data;
        if (!networkTypeDTO) {
          throw Error("networkType is not found");
        }
        const networkName = networkTypeDTO.name;

        // ネットワーク名を指定してSDKを初期化
        const facade = new symbolSdk.facade.SymbolFacade(networkName);

        // トランザクションを送信するアカウント関連データを作成
        const privateKey = new symbolSdk.CryptoTypes.PrivateKey(
          "PUT_YOUR_PRIVATE_KEY_HERE"
        );
        const keyPair = new symbolSdk.symbol.KeyPair(privateKey);
        const signerPublicKeyString = keyPair.publicKey.toString();
        const signerAddressString = facade.network
          .publicKeyToAddress(keyPair.publicKey)
          .toString();

        // deadlineの計算(2時間で設定しているが変更可能、ただし遠すぎるとエラーになる。5～6時間くらいにテストネットでは閾値がある？)
        const now = Date.now();
        const deadline = BigInt(
          now - epochAdjustment * 1000 + 2 * 60 * 60 * 1000
        );

        // 送信先アドレス
        const recipientAddressString =
          "TBK7XV2NHC466HZ63XC7RPESLNXFEGCSJ3ZZ2FY";

        // トランザクションのデータ生成
        const transaction = facade.transactionFactory.create({
          type: "transfer_transaction",
          signerPublicKey: signerPublicKeyString,
          deadline,
          recipientAddress: recipientAddressString,
          mosaics: [{ mosaicId: networkCurrencyMosaicId, amount: 1000000n }],
        });

        // 手数料設定 ... 送信先ノードの設定によるが100なら基本的に足りないことはないと思う
        const feeMultiplier = 100;
        transaction.fee.value = BigInt(transaction.size * feeMultiplier);

        // 署名
        const signature = facade.signTransaction(keyPair, transaction);
        transaction.signature = new symbolSdk.symbol.Signature(signature.bytes);

        // 各ネットワーク固有のgenerationHashSeedを設定
        transaction.network.generationHashSeed = facade.network;

        // トランザクションのハッシュを計算 ... トランザクションの承認状態を後でWebSocketで確認する時などに必要
        const hash = facade.hashTransaction(transaction);
        console.log(hash.toString());
        console.log(
          `https://testnet.symbol.fyi/transactions/${hash.toString()}`
        );

        // トランザクション送信時にはこのデータを使う必要あり
        const transactionPayload =
          facade.transactionFactory.constructor.attachSignature(
            transaction,
            signature
          );

        // 1 confirmation以外の場合の設定
        const confirmationHeight = 6; // 6confで確認と見なす場合
        let transactionHeight = 0;
        let blockHeight = 0;
        let finalizedBlockHeight = 0;

        // WebSocketでトランザクション送信時の各種イベントに応じた処理を事前定義しておく必要がある
        const ws = new WebSocket(`wss://${NODE_DOMAIN}:3001/ws`);

        ws.onopen = () => {
          console.log("connection open");
        };

        ws.onclose = () => {
          console.log("connection closed");
        };

        ws.onmessage = (msg) => {
          const res = JSON.parse(msg.data);
          if ("uid" in res) {
            console.log(`uid : ${res.uid}`);

            // ターゲットアドレスのトランザクションが未承認状態になったのを監視
            const unconfirmedBody = `{"uid": "${res.uid}", "subscribe": "unconfirmedAdded/${recipientAddressString}"}`;
            console.log(unconfirmedBody);
            ws.send(unconfirmedBody);

            // ターゲットアドレスのトランザクションが承認されるの監視
            const confirmedBody = `{"uid": "${res.uid}", "subscribe": "confirmedAdded/${recipientAddressString}"}`;
            console.log(confirmedBody);
            ws.send(confirmedBody);

            // ターゲットアドレスのトランザクションがエラーになったのを監視
            const statusBody = `{"uid": "${res.uid}", "subscribe": "status/${recipientAddressString}"}`;
            console.log(statusBody);
            ws.send(statusBody);

            // 新しいブロックを監視
            const blockBody = `{"uid": "${res.uid}", "subscribe": "block"}`;
            console.log(blockBody);
            ws.send(blockBody);

            // ファイナライズされたブロックを監視
            const finalizedBlockBody = `{"uid": "${res.uid}", "subscribe": "finalizedBlock"}`;
            console.log(finalizedBlockBody);
            ws.send(finalizedBlockBody);
          }

          // トランザクションが未承認になったときに発火
          if (
            res.topic === `unconfirmedAdded/${recipientAddressString}` &&
            res.data.meta.hash === hash.toString()
          ) {
            console.log("transaction unconfirmed");
          }

          // トランザクションが承認されたときに発火
          if (
            res.topic === `confirmedAdded/${recipientAddressString}` &&
            res.data.meta.hash === hash.toString()
          ) {
            console.log("transaction confirmed");
            transactionHeight = parseInt(res.data.meta.height);
          }

          // ブロック生成時に発火
          if (res.topic === `block`) {
            console.log("block");
            blockHeight = parseInt(res.data.block.height);
          }

          // ブロックのファイナライズ時に発火
          if (res.topic === `finalizedBlock`) {
            console.log("finalizedBlock");
            console.log(res);
            finalizedBlockHeight = parseInt(res.data.height);
          }

          // トランザクションがエラーになったときに発火
          if (
            res.topic === `status/${recipientAddressString}` &&
            res.data.hash === hash.toString()
          ) {
            console.log(res.data.code);
            ws.close();
          } else {
            console.log(res);
          }

          // confirmationHeightブロック後に監視終了
          if (
            transactionHeight !== 0 &&
            transactionHeight + confirmationHeight - 1 <= blockHeight
          ) {
            console.log(
              `${confirmationHeight} blocks confirmed. transactionHeight is ${transactionHeight} blockHeight is ${blockHeight}.`
            );
            ws.close();
          } else {
            console.log(
              `wait for ${confirmationHeight} blocks. transactionHeight is ${transactionHeight} blockHeight is ${blockHeight}.`
            );
          }

          // finalizedBlockHeightが対象ブロックを追い越した後に監視終了
          if (
            transactionHeight !== 0 &&
            transactionHeight <= finalizedBlockHeight
          ) {
            console.log(
              `${finalizedBlockHeight} block finalized. transactionHeight is ${transactionHeight} blockHeight is ${blockHeight}.`
            );
            ws.close();
          } else {
            console.log(
              `wait for finalized block. transactionHeight is ${transactionHeight} blockHeight is ${blockHeight}.`
            );
          }
        };

        // トランザクションのアナウンス実行
        try {
          const transactionRoutesApi = new restApiClient.TransactionRoutesApi(
            configuration
          );
          console.log(transactionPayload);
          const response = await transactionRoutesApi.announceTransaction({
            transactionPayload,
          });
          console.log(response.data);
        } catch (err) {
          console.error(err);
        }
      })();
    </script>
  </body>
</html>

error details

Uncaught (in promise) TypeError: e[i.constructor.name] is not a constructor
    at h (index.min.js:2:1093546)
    at e.typeConverter (index.min.js:2:1093812)
    at e.value (index.min.js:2:1096794)
    at index.min.js:2:1097114
    at Array.forEach (<anonymous>)
    at e.value (index.min.js:2:1096975)
    at e.value (index.min.js:2:1095436)
    at e.value (index.min.js:2:1265685)
    at e.value (index.min.js:2:1266125)
    at index.html:92:55

Same error occur on load a local file built in local environment directly.

Expected behavior
A clear and concise description of what you expected to happen.

Expected behavior is the following console output without any errors.

8A958150E3E1DA5565D0000296FA21E5C59DC32489BA477E57ED4705D3208F5D
index.html:108 https://testnet.symbol.fyi/transactions/8A958150E3E1DA5565D0000296FA21E5C59DC32489BA477E57ED4705D3208F5D
index.html:244 {"payload": "B000000000000000C4E596541D97CA5C33186A15826FACEF232511DC0D8AE457D326E68DDBE11CA2FBEA45BC03A9DC7E67CA223B2BC298F51400EA49A5B8132F887D5467C740820AF08AE003487091BD183441DA45C7381C41FB3790C7663C7BA979EB3E51C597760000000001985441C044000000000000CB74355E050000009855FBD74D38B9EF1F3EDDC5F8BC925B6E5218524EF39D170000010000000000C8B6532DDB16843A40420F0000000000"}
index.html:248 {message: 'packet 9 was pushed to the network via /transactions'}
index.html:129 connection open
index.html:139 uid : WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA
index.html:143 {"uid": "WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA", "subscribe": "unconfirmedAdded/TBK7XV2NHC466HZ63XC7RPESLNXFEGCSJ3ZZ2FY"}
index.html:148 {"uid": "WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA", "subscribe": "confirmedAdded/TBK7XV2NHC466HZ63XC7RPESLNXFEGCSJ3ZZ2FY"}
index.html:153 {"uid": "WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA", "subscribe": "status/TBK7XV2NHC466HZ63XC7RPESLNXFEGCSJ3ZZ2FY"}
index.html:158 {"uid": "WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA", "subscribe": "block"}
index.html:163 {"uid": "WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA", "subscribe": "finalizedBlock"}
index.html:205 {uid: 'WORXMUE7MJ2RCSTOPMAOXA332LGHDWLA'}
index.html:218 wait for 6 blocks. transactionHeight is 0 blockHeight is 0.
index.html:233 wait for finalized block. transactionHeight is 0 blockHeight is 0.
index.html:172 transaction unconfirmed
index.html:205 {topic: 'unconfirmedAdded/TBK7XV2NHC466HZ63XC7RPESLNXFEGCSJ3ZZ2FY', data: {…}}
index.html:218 wait for 6 blocks. transactionHeight is 0 blockHeight is 0.
index.html:233 wait for finalized block. transactionHeight is 0 blockHeight is 0.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS] Windows 10
Browser [e.g. chrome, safari] chrome
Version [e.g. 22] 104.0.5112.81（Official Build)

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

I don't have no screenshots of this issue on smartphone.

Additional context
Add any other context about the problem here.

NG: load a built file with webpack --mode=production, this issue occur.
OK: load a built file with webpack command, it works as expected.

I guess webpack.config.js settings should be fix, but I don't know how to fix it now.

The text was updated successfully, but these errors were encountered:

YasunoriMATSUOKA added the bug Something isn't working label Aug 19, 2022

YasunoriMATSUOKA self-assigned this Aug 19, 2022

YasunoriMATSUOKA changed the title ~~[BUG] Error with CDN v3.0.5~~ [BUG] Error with CDN build v3.0.5 Aug 19, 2022

YasunoriMATSUOKA mentioned this issue Aug 19, 2022

fix: build mode for cdn from production to development #10

Merged

YasunoriMATSUOKA changed the title ~~[BUG] Error with CDN build v3.0.5~~ [BUG] Error with CDN build v3.0.5 (on production build error occur, but on development build it works as expected) Aug 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] Error with CDN build v3.0.5 (on production build error occur, but on development build it works as expected) #9

[BUG] Error with CDN build v3.0.5 (on production build error occur, but on development build it works as expected) #9

YasunoriMATSUOKA commented Aug 19, 2022 •

edited

Loading

[BUG] Error with CDN build v3.0.5 (on production build error occur, but on development build it works as expected) #9

[BUG] Error with CDN build v3.0.5 (on production build error occur, but on development build it works as expected) #9

Comments

YasunoriMATSUOKA commented Aug 19, 2022 • edited Loading

YasunoriMATSUOKA commented Aug 19, 2022 •

edited

Loading