Restoring Real Code Lines for JS Errors with Source Map

For frontend applications, JS errors directly affect the quality of the frontend application, making the location and diagnosis of JS errors particularly important. Tingyun provides Source Map upload to restore the actual error location in the code and recreate the JS error scene. This allows developers to quickly locate the source code position of the error and the corresponding code block.

What is Source Map

Source Map is an information file that stores the mapping between source code and compiled code positions, making it easier for developers to locate code errors. In fact, it is a JSON key-value pair that uses VLQ encoding and specific rules to store position information. In simple terms, Source Map can be understood as a bridge between pre-processed code and post-processed code.

Source Map supports upload via CLI method. Tingyun CLI is a CLI program and is the main way to upload Source Map. Mini Programs need to upload two Source Map files: the WeChat platform Source Map and the program compressed Source Map.

Installation

npm Installation

Install in the current working directory:

Enter the frontend project directory and install the CLI package.
```
npm install @tingyun-common/cli
```
Verify successful installation.
```
./node_modules/.bin/tingyun-cli -v
```
If the terminal prints the tingyun-cli version, the installation is successful.

Global installation:

Install.
```
npm install -g @tingyun-common/cli --unsafe-perm
```
You need to ensure you have permission to access the global node_modules directory. If you encounter permission issues in Linux or Mac environments, it is recommended to install as root.
```
npm install -g @tingyun-common/cli --unsafe-perm
```
Verify successful installation.
```
tingyun-cli -v
```
If the terminal prints the tingyun-cli version, the installation is successful.

Other npm Installation

Configure CLI download address:

--tingyuncli_cdnurl=<download address root path>

Usage example:

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

Manual Download of Executable Files

You can view the released versions of tingyun-cli on the Tingyun File Download Server and download executable files 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

Initialize.

Tingyun CLI relies on a configuration file for use. The configuration file name is .tingyunclirc or .tingyunclirc.toml, in toml format. Configuration file information can be copied from application settings or initialized using the interactive information input tool provided by running 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 toml format. Here's an explanation of the generated configuration file.
```
[auth]
# Platform access token, obtained from application settings
token = ""

[base]
# Application name, optional, for marking purposes, obtained from application settings
app_name = ""
# Application token, obtained from application settings
app_token = ""
# sourcemap upload address, obtained from application settings
beacon = ""
# Product type, obtained from application settings 
product_type = "mp"
```
- Copy the configuration information from the application settings interface, paste it into the .tingyunclirc.toml file, and save.
Upload SourceMap.

Command structure:
```
tingyun-cli release upload <version> <upload file or directory> --sourcemap
```
To accurately parse errors in JS files of different versions, Source Map files must be uploaded to a specific version (see the complete command list below for version CLI commands). This version is the application version of the user's project. Each time the js file is repackaged, the version needs to be changed for upload.

Example:
```
tingyun-cli release upload V1.0.0 ./dist --sourcemap
```
Upload the Source Map files in the dist directory to version V1.0.0.
Set application version.

To accurately associate JS error versions, the user's project needs to add monitor.setReleaseId after the instrumentation code. This value needs to be consistent with the version specified in the previous step each time a new version is released.
```
monitor.setReleaseId('V1.0.0');
```
The probe will use the content of monitor.setReleaseId as the application version for upload.

CLI Commands

View version:
```
tingyun-cli -v
```
Initialize configuration file in the current directory using interactive questionnaire mode:
```
tingyun-cli init
```
--yes, -y can skip the questionnaire and generate a template configuration file:
```
tingyun-cli init -y
```
Display 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 explanation:
- --sourcemap: Process upload files as SourceMap, by default identifies .map files and attempts to parse .js sourcemapping mapping.
- --no-overwirte: Upload does not overwrite files with the same name, overwrite by default.
- --config: Specify 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
```

What is Source Map​

Installation​

npm Installation​

Other npm Installation​

Manual Download of Executable Files​

Usage​

CLI Commands​