Custom Additional Properties

Action Scope concept

Scope Store the application related data and send it to the background together with the probe data. A Root Scope global Scope is automatically created after the probe is started. You can also manually create a local Scope in a local scope, as described in the Local Scope section.

Data of storage contexts type in Scope is used to store information related to users.

Use scenarios

• Get the custom Ajax request header and return header, and attach it to the Ajax data for upload.
• Call the user API to record the error ID when the JS error is triggered. -...

Set up context

Global setContext

Usage 1:

Pass in key and value.

TINGYUN.setContext('app', {
    name: 'my_app',
    version: 'V1.1.1'
});

Usage 2:

Do not carry the setting mode of key. In this way, you need to pass in the complete context internal structure, for example:

TINGYUN.setContext({
    app: {
        name: 'my_app',
        version: 'V1.1.1'
    }
})

Local setContext

The Action Hook is used to perform a user-defined action when an Action is triggered. In Action Hook, a local Scope will be created by default to set custom data. See Action Hook.

Action Hook

The Action Hook is triggered when the Action monitors the assembly of the data item. Parameters are injected localScope into the callback function parameters of the Action Hook, which can be used to set custom data.

TINGYUN.addActionHook(name: string, handler: function)

Parameter description:

• name

  Action Hook Name:

  • ajax: Ajax action.
  • error : Error type action.

-handler

The callback function triggered by hook will pass the params parameter.

• Param s. Target: Ajax or error primitive (xhr object or error object).
• Params. ActionData: The data collected by TINGYUN. Different types of data have different structures. Refer to the documentation for the specific action hook. Modifying the actionData value does not affect the content of the uploaded data.
  • Params. Scope: Local Scope created for this action. If you need to set custom data in this action, you need to call the setContext scope interface.

Ajax Hook

TINGYUN.addActionHook('ajax', function(params) {
    const {target, actionData, scope} = params;

    //Perform some custom operations after the ajax response
});

ActionData property description:

    {
    "method": "GET", // http method
    "url": "https://jsonplaceholder.typicode.com/todos/1?orderId=2", // Request url
    "start": 1614312953359, // Start sending time
    "end": 1614312954233, // End sending time
    "du": 874, //The request takes time
    "status": 200,//status code
    "err": 0, // xhr error code error: 990 abort: 905 timeout: 903
    "rec": 83, // Return the number of bytes
    "send": 0, // Number of bytes sent
    "requestHeader": {
        //...
    } // setRequestHeader calls the added request header
}

An example scenario

Obtain the custom Ajax request header and return header, and attach them to the Ajax data to upload:

TINGYUN.addActionHook('ajax', function(params) {
    const {target, actionData, scope} = params;
    scope.setContext({
        customHeader: {
             request: actionData.requestHeader['custom-request-header'], // Get the custom request header
             response: target.getResponseHeader('custom-response-header') // Get the custom request header
}
    });
});

Error Hook

TINGYUN.addActionHook('error', function(params) {
    const {target, actionData, scope} = params;
    //Perform some custom operations when the error is triggered
});

ActionData property description:

{
    "id": "c8076d03fa4b4a11be7951e01e506f90", // event traceId
    "o": 1612149081642, // js error trigger time, milliseconds
    "e": "Uncaught Error: js-error", // Error message
    "l": 42, // Error line number
    "c": 19, // Wrong column number
"r": "http://127.0.0.1:8080/322/", // Error file name
    "s": "Error: Simple Error\n at triggerNormalError (http://127.0.0.1:8080/322/:42:19)\n at HTMLButtonElement.onclick (http://127.0.0.1:8080/322/ :30:45)", // Error
    "tr": "error", //trigger method to trigger collection, report (captureException interface report), error (probe monitoring acquisition)
}

An example scenario

Call the user API to record the error ID when the JS error is triggered.

TINGYUN.addActionHook('error', function(params) {
    const {target, actionData, scope} = params;

    //User-defined api, record error ID to user system
    reportErrorId(actionData.id);
});