Skip to content

Frontend Application Log Error Inspection

Background

Frontend error log inspection will help discover new error messages (Error Messages after clustering) that have appeared in frontend applications within the past hour, assisting developers and operations teams in timely code repairs to avoid continuous damage to customer experience over time.

Prerequisites

  1. There exists an integrated application in TrueWatch's "Real User Monitoring"
  2. Self-built DataFlux Func TrueWatch Special Edition, or activate DataFlux Func (Automata)
  3. Create an API Key for performing operations in TrueWatch's "Management / API Key Management"

Note: If considering using a cloud server for offline deployment of DataFlux Func, please ensure it is deployed with the same operator and region as the currently used TrueWatch SaaS.

Start Inspection

In your self-built DataFlux Func, install "TrueWatch Self-built Inspection (RUM New Error Types)" through the "Script Market" and configure the TrueWatch API Key to start.

In the DataFlux Func Script Market, select the inspection scenario you want to enable, click install, configure the TrueWatch API Key, then choose to deploy and start the script.

image

After successfully deploying the startup script, it will automatically create the startup script and automatic trigger configuration, which can be viewed directly via the provided link.

image

Configure Inspection

You can configure the desired filtering conditions for inspection in either the Intelligent Inspection module of TrueWatch Studio or in the automatically created startup script of DataFlux Func. Refer to the two configuration methods below.

Configure Inspection in TrueWatch

image

Enable/Disable

The frontend application log error inspection is by default in the "Enabled" state and can be manually "Disabled". After enabling, inspections will be conducted on the configured list of frontend applications.

Edit

Intelligent inspection "Frontend Error Inspection" supports manual addition of filtering conditions. In the operation menu on the right side of the intelligent inspection list, click the Edit button to edit the inspection template.

  • Filtering Conditions: Configure the frontend application app_name
  • Alert Notifications: Supports selection and editing of alert strategies, including event levels to notify, notification targets, and alert mute cycles

To configure entry parameters, click Edit, fill in the corresponding detection objects in the parameter configuration, and start the inspection after saving:

image

You can refer to the following JSON configuration for multiple application information

 // Configuration Example:
    configs
        app_name_1
        app_name_2

Note: In the self-built DataFlux Func, when writing custom inspection processing functions, additional filtering conditions can also be added (refer to example code configurations). Note that parameters configured in TrueWatch Studio will override those set in the custom inspection processing function.

Configure Inspection in DataFlux Func

In DataFlux Func, after configuring the required filtering conditions for inspection, you can test by selecting and running the run() method directly from the page. After clicking publish, the script will run normally. You can also view or modify the configuration in TrueWatch's "Monitoring / Intelligent Inspection".

from truewatch_monitor__runner import Runner
from truewatch_monitor__register import self_hosted_monitor
import truewatch_monitor_rum_error__main as main

# Support for using filtering functions to filter the objects being inspected, for example:
def filter_appid(data):
    appid = data[0]
    '''
    Filter appid, define conditions for appids that meet requirements, return True for matches, False for non-matches
    return True | False
    '''
    if appid in ['appid_xxxxxxxxxxx']:
        return True


@self_hosted_monitor(account['api_key_id'], account['api_key'])
@DFF.API('RUM New Error Type', fixed_crontab='0 * * * *', timeout=900)
def run(configs=None):
    """
    Parameters:
        configs: Multiple `app_name_1` can be specified (separated by line breaks), unspecified means inspect all apps

    Configuration Example:
        configs
            app_name_1
            app_name_2
    """
    checkers = [
        main.RumErrorCheck(configs=configs, filters=[filter_appid]), # Support for user-configured multiple filtering functions that are executed sequentially.
    ]

    Runner(checkers, debug=False).run()

View Events

TrueWatch will automatically cluster all browser client error information. This inspection compares all error information from the past hour with the past 12 hours, and alerts if any previously unseen errors occur. The intelligent inspection will generate corresponding events. In the operation menu on the right side of the intelligent inspection list, click the View Related Events button to view the corresponding abnormal events.

image

Event Details Page

Click Event, to view the details page of the intelligent inspection event, including event status, time of anomaly occurrence, anomaly name, basic attributes, event details, alert notifications, historical records, and related events.

  • Click the small icon in the upper-right corner of the detail page labeled "View Monitor Configuration" to view and edit the detailed configuration of the current intelligent inspection.

Basic Attributes

  • Detection Dimension: Based on the filtering conditions configured in intelligent inspection, it supports copying the detection dimension key/value, adding to filters, and viewing related logs, containers, processes, security checks, traces, real user monitoring, synthetic tests, and CI data.
  • Extended Attributes: After selecting extended attributes, it supports copying in key/value form, forward/reverse filtering.

image

Event Details

  • Event Overview: Describes the object and content of the anomaly inspection event.
  • Frontend Error Trend: View the error statistics of the current frontend application in the past hour.
  • New Error Details: View detailed error times, error messages, error types, error stacks, and number of errors; click the error message or error type to enter the corresponding data viewer; click the error stack to enter the specific error stack detail page.

image image

Historical Records

Supports viewing detection objects, anomaly/recovery times, and duration.

image

Supports viewing related events through filtering fields and selected time component information.

image

Common Issues

1. How to configure the detection frequency of frontend application log error inspections

In the self-built DataFlux Func, add fixed_crontab='0 * * * *', timeout=900 in the decorator while writing the custom inspection processing function, then configure it in "Management / Automatic Trigger Configuration".

2. Why might there be no anomaly analysis triggered during frontend application log error inspections

When there is no anomaly analysis in the inspection report, please check the data collection status of the current datakit.

3. During the inspection process, why might previously normal scripts encounter abnormal errors

Please update the referenced script sets in the DataFlux Func Script Market. You can use the Change Log to view the update records of the script market for timely updates.

4. During the upgrade of the inspection script, why does the corresponding script set in Startup show no changes

Please delete the corresponding script set first, then click the upgrade button and configure the corresponding TrueWatch API key to complete the upgrade.

5. How to determine whether the inspection has taken effect after activation

In "Management / Automatic Trigger Configuration", view the corresponding inspection status. First, the status should be enabled, secondly, you can verify whether the inspection script works by clicking execute. If the message "Executed successfully xxx minutes ago" appears, the inspection is functioning properly.