Skip to main content

Customizing Additional Attributes

Action Scope Overview​

Scope stores application-related data, which is sent to the backend along with agent data. After the agent starts, it will automatically create a Root Scope, i.e., a global scope. You can also manually create a local scope within a local context. For details, see the Local Scope section.

The scope stores data of type contexts, used to store user-related information.

Usage Scenarios​

  • Obtaining custom Ajax request and response headers and uploading them in Ajax data.
  • Calling the user API to record error IDs when JavaScript errors are triggered.
  • ...

Setting context​

Global setContext​

Usage 1:

Pass in key and value.

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

Usage 2:

Set without a key. This method requires passing the complete internal structure of context, for example:

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

Local setContext​

Action Hook is used to perform custom operations when an action is triggered. In the Action Hook, a local scope is created by default to set custom data. For details, see Action Hook.

Action Hook​

Action Hook is triggered when an action monitoring data item is assembled. The callback function of the Action Hook will receive a parameter for the local scope, 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 the hook, which receives the params parameter.

    • params.target: The original Ajax or error object (xhr object or error object).
    • params.actionData: Data collected by TINGYUN. The structure of different types of data will vary. See the documentation for the specific action hook for details. Modifying the value of actionData will not affect the uploaded data content.
    • params.scope: The local scope created for this action. If you need to set custom data in this action, call the scope's setContext interface.

Ajax Hook​

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

    // Perform 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 send time
    "end": 1614312954233, // end send time
    "du": 874, // request duration
    "status": 200,// status code
    "err": 0, // xhr error code error: 990 abort: 905 timeout: 903 
    "rec": 83, // response bytes
    "send": 0, // sent bytes
    "requestHeader": {
        //...
    } // setRequestHeader added request headers
}
Example Scenario​

Obtaining custom Ajax request and response headers and uploading them in Ajax data:

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

Error Hook​

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

actionData property description:

{
    "id": "c8076d03fa4b4a11be7951e01e506f90", // event traceId
    "o": 1612149081642,  // js error trigger time, ms
    "e": "Uncaught Error: js-error", // error message
    "l": 42, // error line number
    "c": 19, // error 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, report (captureException interface reporting), error (agent monitoring)
}
Example Scenario​

Calling the user API to record error IDs when JavaScript errors are triggered.

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

    // User custom API, record error id in the user system
    reportErrorId(actionData.id);
});