Skip to content

Frontend Application Log Error Inspection

Background

Frontend error log inspection will help discover new error messages (Error Message after clustering) that have appeared in the frontend application within the last hour, helping developers and operations teams fix the code in time to avoid continuous damage to customer experience over time.

Prerequisites

  1. There are already connected applications in the "TrueWatch" RUM PV
  2. An offline deployment of DataFlux Func has been self-built
  3. Enable the script market for the self-built DataFlux Func
  4. Create an API Key for operations in the "TrueWatch" Manage / API Key Management
  5. In the self-built DataFlux Func, install via "Script Market" the following: Self-built Inspection Core Package, Algorithm Library, and Self-built Inspection (New RUM Error Types)
  6. In the self-built DataFlux Func, write a self-built inspection processing function
  7. In the self-built DataFlux Func, through Manage / Scheduled Tasks (Old Version: Automatic Trigger Configuration), create scheduled tasks (Old Version: Automatic Trigger Configuration) for the written functions

If you consider using a cloud server for the offline deployment of DataFlux Func, please ensure it is deployed with the currently used TrueWatch SaaS in the same operator and region

Configure Inspection

In the self-built DataFlux Func, create a new script set to enable the configuration of frontend error log inspection.

Python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
from guance_monitor__runner import Runner
from guance_monitor__register import self_hosted_monitor
import guance_monitor_rum_error__main as main

# Space API_KEY Configuration (configured by user)
API_KEY_ID  = 'xxxxx'
API_KEY     = 'xxxx'

# The function filters parameter filter and studio monitoring\intelligent inspection configuration have calling priorities. After configuring the function filters parameter, there is no need to change the detection configuration in the studio monitoring\intelligent inspection. If both are configured, the script's filters parameter takes precedence.

def filter_appid(data):
    appid = data[0]
    if appid in ['appid_Htow4wbwHXUptr7etBB2vQ']:
        return True


'''
Task configuration parameters should use:
@DFF.API('Frontend Application Log Error Inspection', fixed_crontab='0 * * * *', timeout=900)

fixed_crontab: Fixed execution frequency "once every hour"
timeout: Task execution timeout duration, controlled within 15 minutes
'''

# Self-built inspection configuration for RUM error types (no modification required by users)
@self_hosted_monitor(API_KEY_ID, API_KEY)
@DFF.API('Frontend Application Log Error Inspection', fixed_crontab='0 * * * *', timeout=900)
def run(configs={}):
    """
    Parameters:
        configs: A list of app_names to be inspected (optional, default inspects all app_names)

        Configuration example:
        configs = {
            "app_names": ["app_name_1", "app_name_2"]  # List of application names
        }
    """
    checkers = [
        # Configure RUM error inspection
        main.RUMErrorCheck(configs=configs),
    ]

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

Start Inspection

After configuring the inspection in DataFlux Func, you can test it by directly selecting and running the run() method on the page. After publishing, you can view and configure it in DataFlux Func's Manage / Scheduled Tasks.

View Events

The inspection will automatically cluster all error information from browser clients. This inspection will compare all error information from the past hour and the past 12 hours. Once a previously unseen error occurs, an alert will be triggered, and the intelligent inspection will generate corresponding events. After generating events, they can be viewed in the Event Center for corresponding abnormal events.

Event Details

  • Event Overview: Describes objects and content of abnormal inspection events
  • Frontend Error Trend: You can view the error statistics for the current frontend application over the past hour
  • New Error Details: View detailed error times, error messages, error types, error stacks, and error counts; click on the error message or error type to enter the corresponding data viewer; clicking the error stack will direct you to the specific error stack detail page.

Common Issues

1. How to configure the detection frequency for frontend application log error inspection

  • In the self-built DataFlux Func, add fixed_crontab='0 * * * *', timeout=900 when writing the self-built inspection processing function in the decorator, then configure it in Manage / Scheduled Tasks (Old Version: Automatic Trigger Configuration).

2. No anomaly analysis may occur during frontend application log error inspection

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, previously normal scripts may encounter abnormal errors

Please update the referenced script sets in the DataFlux Func Script Market. You can review the update records via the Change Log to facilitate timely updates of the scripts.