バックエンドでGoogle chartsを動かしたいがエラー発生

Question

前提・実現したいこと

バックエンドにてGoogle chartsで作成したグラフ画像をサーバー内に保存したいがエラーが発生するので解決したい。

発生している問題

Google chartsをバックエンドで動かす手法として、npmで使える(モジュールという括り？) "google-charts-node" で動かしたがエラーが発生する。

提供されているgithub⇒ https://github.com/typpo/google-charts-node

動作環境

さくらVPS
Linux
CentOS8
Node.js
nodebrew
npm
google-charts-node
Javascript

該当のソースコード

◆sample.js・・・基本的に"google-charts-node" に記載されているExampleをそのまま適用

const GoogleChartsNode = require('/root/node_modules/google-charts-node');

// Define your chart drawing function
function drawChart() {
    const data = google.visualization.arrayToDataTable([
      ['City', '2010 Population',],
      ['New York City, NY', 8175000],
      ['Los Angeles, CA', 3792000],
      ['Chicago, IL', 2695000],
      ['Houston, TX', 2099000],
      ['Philadelphia, PA', 1526000]
    ]);
  
    const options = {
      title: 'Population of Largest U.S. Cities',
      chartArea: {width: '50%'},
      hAxis: {
        title: 'Total Population',
        minValue: 0
      },
      vAxis: {
        title: 'City'
      }
    };
  
    const chart = new google.visualization.BarChart(container);
    chart.draw(data, options);
}
  
// Render the chart to image
const image = await GoogleChartsNode.render(drawChart, {
    width: 400,
    height: 300
});

エラー表示

◆sample.js実行時のエラー表示

/var/www/html/sample.js:32
const image = await GoogleChartsNode.render(drawChart, {
              ^^^^^

SyntaxError: await is only valid in async functions and the top level bodies of modules
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47

###完成する予定のチャート

怪しいと感じる点

◆その1◆
sample.js中の「const chart = new google.visualization.BarChart(container);」のcontainerに何か定義が必要かも？
通常Google chartsをフロンドエンドで使う際も同じようなコードを使う。
その際<div>の#id等を入れるが、バックエンドで使う際は何を入れるべきなのか？

◆その2◆
sample.js中の「const GoogleChartsNode = require('/root/node_modules/google-charts-node');」では正しくmoduleを読み込めてないかも？
しかし読込不能のエラーは出ていないので問題なし？

Answer 1

エラーメッセージの通り、async関数の中にawait式を書いていないのでエラーになっています。
ただしエラー後半にあるように、一定の要件を踏めば、async関数外でもawait式が書けます。（"top-level await"　[package.jsonに "type": "module"を付加し、requireをimportに変える、等]）

サンプルコードは単にレンダリングした画像データを取得してるだけなので、表示するにはレスポンスとしてフロントに返すか、画像ファイルとして保存する必要があります。

例として、グラフ画像を保存する最小限のコードは下記のようになります。

なお、'/root/node_modules/google-charts-node'の部分は、御自身の環境に合わせて変えてください。

const GoogleChartsNode = require('/root/node_modules/google-charts-node');
const fs = require('fs');

// Define your chart drawing function
function drawChart() {
    const data = google.visualization.arrayToDataTable([
      ['City', '2010 Population',],
      ['New York City, NY', 8175000],
      ['Los Angeles, CA', 3792000],
      ['Chicago, IL', 2695000],
      ['Houston, TX', 2099000],
      ['Philadelphia, PA', 1526000]
    ]);

    const options = {
      title: 'Population of Largest U.S. Cities',
      chartArea: {width: '50%'},
      hAxis: {
        title: 'Total Population',
        minValue: 0
      },
      vAxis: {
        title: 'City'
      }
    };

    const chart = new google.visualization.BarChart(container);
    chart.draw(data, options);
}

// Render the chart to image
(async () => {
  const image = await GoogleChartsNode.render(drawChart, {
    width: 400,
    height: 300
  });
  fs.writeFileSync('./google-chart1.png', image);
})();

最後の

(async () => {
  const image = await GoogleChartsNode.render(drawChart, {
    width: 400,
    height: 300
  });
  fs.writeFileSync('./google-chart1.png', image);
})();

の部分がキモです。（async関数の中でawait式を実行）

---

top-level awaitを活用するなら下記のようになるかと。
※package.jsonに "type": "module"を追加しないとエラーになります。

import GoogleChartsNode from 'google-charts-node';
import fs from 'fs';

// Define your chart drawing function
function drawChart() {
    const data = google.visualization.arrayToDataTable([
      ['City', '2010 Population',],
      ['New York City, NY', 8175000],
      ['Los Angeles, CA', 3792000],
      ['Chicago, IL', 2695000],
      ['Houston, TX', 2099000],
      ['Philadelphia, PA', 1526000]
    ]);

    const options = {
      title: 'Population of Largest U.S. Cities',
      chartArea: {width: '50%'},
      hAxis: {
        title: 'Total Population',
        minValue: 0
      },
      vAxis: {
        title: 'City'
      }
    };

    const chart = new google.visualization.BarChart(container);
    chart.draw(data, options);
}

// Render the chart to image
const image = await GoogleChartsNode.render(drawChart, {
    width: 400,
    height: 300
});
fs.writeFileSync('./google-chart2.png', image);

---

/root/node_modules/google-charts-node/lib/render.js
の23行目あたりを下記のように書き換えて、再実行した場合どうでしょうか。

root/node_modules/google-charts-node/lib/render.js　23行目あたり
const browser = await puppeteer.launch(); 
　　この行を下のように書き換える。
    　↓
const browser = await puppeteer.launch({
  headless: true,
  args: ['--no-sandbox', '--disable-setuid-sandbox']
})

Comments

[m.s.2000]

丁寧にアドバイス頂きありがとうございます。
早速top-level awaitを活用しない方のコードを修正してみましたが、今度は違うエラーが出てしまいました。
どうやらブラウザを開こうとして失敗したと言っているようですが、
なぜバックエンドなのにブラウザが関係してしまうのでしょうか？
念のためですが、sample.jsの置き場所は任意の場所で問題ないでしょうか？(htmlやphpを実行する際に使っているディレクトリを使っています)

◆以下エラー------------------------------------------------------------
Error: Failed to launch the browser process!
/root/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

at onClose (/root/node_modules/puppeteer/lib/launcher/BrowserRunner.js:189:20)
at Interface.<anonymous> (/root/node_modules/puppeteer/lib/launcher/BrowserRunner.js:179:65)
at Interface.emit (node:events:406:35)
at Interface.close (node:readline:586:8)
at Socket.onend (node:readline:277:10)
at Socket.emit (node:events:406:35)
at endReadableNT (node:internal/streams/readable:1331:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)

因みに"type": "module"を追記してtop-level awaitを活用する方も実行してみましたが、下記エラーが出てだめでした。
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/root/node_modules/google-charts-node' is not supported resolving ES modules imported from /var/www/html/sample.js

[退会済みユーザー]

google-charts-node は、ヘッドレスブラウザを操作する puppeteer というライブラリを使用しています。
ブラウザ（Chrome）をヘッドレス起動し、その中でグラフを描画し、ブラウザ上で生成されたグラフ画像データを返す仕組みになっています。

掲題のエラーは、puppeteer を動かすのに必要な依存ライブラリが不足しているために生じているのだと思われます。
-----
下記記載の方法を試してみて下さい。
https://github.com/puppeteer/puppeteer/issues/5361

（
yum install -y chromium libmng libXScrnSaver libXv
を実行）
-----

上記でうまく行かない場合は、
https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
に記載の通り、下記を試してみてください。

・https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix の「CentOS Dependencies」に記載の依存ライブラリがインストールされているか確認する。
・不足しているものがあれば、それをインストールする。
。インストール後、
　　yum update nss -y
　を実行して nss ライブラリをアップデートする。

----

「Centos puppeteer」 や 「Centos8 puppeteer」で検索するといろいろ情報が出てきます。

---
＞sample.jsの置き場所は任意の場所で問題ないでしょうか？(htmlやphpを実行する際に使っているディレクトリを使っています)

最初の段階で元のsample.js固有のSyntax Errorが出ているので、sample.js自体は読み込めており問題ないかとは思うのですが、
心配ならば、別ディレクトリでnpm initからやり直し、基本的なディレクトリ構成下で試されてみてはいかがでしょうか。

[m.s.2000]

ありがとうございます。
「CentOS Dependencies」に上がっている不足ライブラリは"ipa-gothic-fonts"のみ何をやってもインストール出来なかったですが、色々調べた結果これはなくても良さそうなので放置して進めたところ、今度は以下のエラーが発生して壁にぶち当たってます。
調べた結果どうやら--no-sandbox引数を使用してChromeを起動すべきと書かれていますが、コードのどこに--no-sandboxを追記したらよいかわからないので教えて頂けないでしょうか？

◆以下エラー------------------------------------------------------------
Error: Failed to launch the browser process!
[0811/193756.492559:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

at onClose (/root/node_modules/puppeteer/lib/launcher/BrowserRunner.js:189:20)
at Interface.<anonymous> (/root/node_modules/puppeteer/lib/launcher/BrowserRunner.js:179:65)
at Interface.emit (node:events:406:35)
at Interface.close (node:readline:586:8)
at Socket.onend (node:readline:277:10)
at Socket.emit (node:events:406:35)
at endReadableNT (node:internal/streams/readable:1331:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21)

[退会済みユーザー]

--no-sandbox　について回答欄に追記しました。

[m.s.2000]

ご指示の通りrender.jsを修正したらようやくグラフ画像が保存出来ました。
何度も迅速にご指示頂き本当にありがとうございました。