Code dyeing

Code dyeing components for @midwayjs/faas, @midwayjs/web, @midwayjs/koa and @midwayjs/express frameworks.

It is used to display the time-consuming call link and the input and output parameters of each method in the HTTP scenario, helping you locate code problems faster.

for example:

• code execution is slow
  • I don’t know which method executes slowly: After code dyeing, you can check the execution time of each method.
• code execution error
  • It may be that the method is not transferred: after code dyeing, you can view each method call chain.
  • It may be that the method call parameter is wrong: After the code is dyed, check the input parameter and return value of each method

Effect:

Related Information:

web support
@midwayjs/koa	✅
@midwayjs/faas	✅
@midwayjs/web	✅
@midwayjs/express	✅

Install dependencies

$ npm i @midwayjs/code-dye@3 --save

Or add the following dependencies in package.json and reinstall.

{
   "dependencies": {
     "@midwayjs/code-dye": "^3.0.0"
     //...
   },
}

Enable component

Configure the code-dye component into the code.

// src/configuration.ts
import { Configuration } from '@midwayjs/core';
import * as codeDye from '@midwayjs/code-dye';

@Configuration({
   imports: [
     //...
     {
       component: codeDye,
       enabledEnvironment: ['local'], // only enabled locally
     }
   ],
})
export class MainConfiguration {}

astuce

• You can enable this component in the local or development environment, which is convenient for locating problems during development, but it is not recommended to enable it online, which will affect the performance of online access.

Configure coloring

You can use matchQueryKey configuration to control when the query parameter contains the value corresponding to matchQueryKey configuration, to enter the dye link, for example, the configuration is:

// src/config/config.local.ts
export default {
   codeDye: {
     matchQueryKey: 'codeDyeABC',
   }
}

When requesting the interface http://127.0.0.1:7001/test?codeDyeABC=html, it will judge whether codeDyeABC parameter exists in query to decide whether to dye or not, and respond differently according to the corresponding value of the parameter the staining results.

You can also use the matchHeaderKey configuration to control when the headers parameter contains the value corresponding to the matchHeaderKey configuration, to enter the dye link. For example, the configuration is:

// src/config/config.local.ts
export default {
   codeDye: {
     matchHeaderKey: 'codeDyeHeader',
   }
}

When requesting the interface http://127.0.0.1:7001/test, it will judge whether there is a codeDyeHeader parameter in the headers of the request to decide whether to dye, and respond to different dyeing according to the corresponding value of the parameter result.

Dye report

After code coloring is enabled, the result of link coloring can be configured by enabling different parameter values for coloring. Currently, the following three types are supported:

• html: process the result of the current request, add the coloring information to the result, and the response is html, which can be viewed on the browser, and the effect can be viewed in the picture above this document.
• json: process the result of the current request, add coloring information to the result, and respond as json structured information.
• log: Do not process the result of the current request, and the dyed information will be output to the log without affecting the request.

For example, configured as:

// src/config/config.local.ts
export default {
   codeDye: {
     matchQueryKey: 'codeDyeXXX',
   }
}

When the interface http://127.0.0.1:7001/test?codeDyeXXX=html is requested, it will be judged that the codeDyeXXX parameter value in query is html, and the dyeing result will be output in the response of the current request , and the content is in html format.