Skip to main content

More Friendly Error Logs

@cloudbase/js-sdk prints errors encountered when calling APIs to the console in a more user-friendly manner during development, as shown in the figure below:

The error shown in the figure indicates that the current login type is restricted by the function's security rules, resulting in no permission to invoke the function. The error message consists of two parts:

  1. The black text in the upper section contains the error information returned by the backend API and some solution suggestions based on this error;
  2. The red text in the lower section is the optimized error stack. Since the original error stack was too deeply nested, making debugging extremely difficult, the first entry in the error stack printed here points directly to the SDK source code, while the second entry points to the business source code that called the erroneous API.

Optimized error messages are only used in development environments, determined based on process.env.NODE_ENV. Additionally, locating the SDK source code requires SourceMap.

The above two points rely on specific features of build tools and are currently only supported in Webpack and Rollup.

Webpack​

In Webpack 4+, you can set the mode option to development as follows:

module.exports = {
  mode: "development",
};

For older versions of Webpack, you need to use DefinePlugin:

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development"),
    }),
    // ...other plugins
  ],
  // ...other configurations
};

Then add source map preprocessing to the JavaScript compilation options. Here you need to use source-map-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      // ...other rules
    ],
  },
  // ...other configurations
};

After completing the configuration, start webpack-dev-server.

Rollup​

Rollup requires two plugins:

The configuration is as follows:

import sourcemaps from "rollup-plugin-sourcemaps";
import replace from "rollup-plugin-replace";
export default {
  plugins: [
    sourcemaps(),
    replace({
      "process.env.NODE_ENV": JSON.stringify("development"),
    }),
    // ...other plugins
  ],
  // ...other configurations
};

After completing the configuration, use rollup-plugin-serve to start the dev server.