Skip to main content

Restore the real code line of JS error with Source Map

For front-end applications, the occurrence of JS errors directly affects the quality of front-end applications, so it is particularly important to locate and diagnose JS errors. Tingyun provides SourceMap upload to restore the real error location of the code and restore the JS error scene. This allows developers to quickly locate the source code location of the error and the corresponding code block.

What is Source Map​

Source Map is an information file that stores the mapping of the corresponding positions of source code and compiled code, which makes it easier for developers to locate the above code errors. In fact, it is a JSON key-value pair that uses VLQ encoding and specific rules to store location information. In short, it can be understood that Source Map builds a bridge between the code before processing and the code after processing.

Source Map supports uploading through CLI. Tingyun CLI is a CLI program and the main way to upload Source Map. Mini programs need to upload two Source Map files: WeChat platform Source Map and program compressed Source Map.

Installation​

npm installation​

Current working directory installation:

  1. Enter the front-end project directory and install the CLI package.
npm install @tingyun-common/cli
  1. Verify that the installation is successful.
./node_modules/.bin/tingyun-cli -v

If the tingyun-cli version is printed in the terminal, it proves that the installation is successful.

Global installation:

  1. Install.
npm install -g @tingyun-common/cli --unsafe-perm

Make sure you have permission to access the global node_modules directory. If you encounter permission issues in Linux or Mac environments, it is recommended to use root installation.

npm install -g @tingyun-common/cli --unsafe-perm
  1. Verify that the installation is successful.
tingyun-cli -v

If the tingyun-cli version is printed in the terminal, it proves that the installation is successful.

Other npm installations​

Configure the CLI download address:

--tingyuncli_cdnurl=<download address root path>

Usage example:

npm install @tingyun-common/cli --tingyuncli_cdnurl=http://example.com/path

Manually download the executable file​

You can view the released version of tingyun-cli on Tingyun File Download Server and download the executable file for Linux, Mac, and Windows platforms. After downloading, you can rename it to tingyun-cli.exe or tingyun-cli for use. Note that the executable file is a CLI program and needs to be used in the terminal.

Usage​

  1. Initialize.

Tingyun CLI relies on a configuration file to use. The configuration file is named .tingyunclirc or .tingyunclirc.toml and is in toml format. The configuration file information can be copied in the application settings or initialized by running the interactive information input tool provided by tingyun-cli init. Before using CLI to upload SourceMap, you need to ensure that the configuration file exists in the current directory or user directory.

  • Execute the initialization command in the project working directory to generate the configuration file .tingyunclirc.toml.
tingyun-cli init -y
  • Open the configuration file. The configuration file uses the toml format. The generated configuration file description .
[auth]
# platform access token, application settings acquisition
token = ""
[base]
# application name, optional, tag function, application settings acquisition
app_name = ""
# application token, application settings acquisition
app_token = ""
# sourcemap upload address, application settings acquisition
beacon = ""
# product type, application settings acquisition
product_type = "mp"
  • Copy the configuration information in the application settings interface, paste it into the .tingyunclirc.toml file, and save it.
  1. Upload SourceMap.

Command structure:

tingyun-cli release upload <version> <upload file or directory> --sourcemap

In order to accurately parse the errors of different versions of JS files, the Source Map file must be uploaded to a certain version (see the complete command list below for the version CLI command). This version is the application version of the user project. Every time the js file is repackaged, it is necessary to re-upload the version.

Example:

tingyun-cli release upload V1.0.0 ./dist --sourcemap

Upload the Source Map file in the dist directory to version V1.0.0.

  1. Set the application version.

In order to accurately associate the JS error version, the user project needs to add monitor.setReleaseId after the embedded code. This value needs to be consistent with the version specified in the previous step every time the version is released.

monitor.setReleaseId ('V1.0.0');

The probe will obtain the content of monitor.setReleaseId as the application version to upload.

CLI command​

  • View version:
tingyun-cli -v
  • Initialize the configuration file in the current directory in interactive questionnaire mode:
tingyun-cli init

--yes, -y can skip the questionnaire and generate a template configuration file:

tingyun-cli init -y
  • Display the current version list
tingyun-cli release list
  • Delete version
tingyun-cli release delete <release>
  • Create version
tingyun-cli release new <release>
  • Upload version
tingyun-cli release upload <release> <files>... [flags]

Flags description:

  • --sourcemap: Process the uploaded file in SourceMap format, recognize .map files by default, and try to parse the sourcemapping mapping in .js.
  • --no-overwrite: upload does not overwrite files with the same name, overwrite by default.
  • --config: specifies the configuration file path, global flags, effective for all command subcommands.

Example:

tingyun-cli release upload V1.0.0 ./dist --sourcemap --config /my/config/dir/.tingyunclirc