JavaScript errors

The complexity of modern applications coupled with the prevalence of cryptic minified code makes it difficult to accurately identify the exact location of the error.

With Site24x7's JavaScript Errors feature, you can consistently monitor the JavaScript errors that are being collected. You can also debug the errors and find the exact line of error using the stack trace.

View JavaScript errors

1. Log in to your Site24x7 account.
2. Navigate to RUM > your application > JavaScript Errors > Errors.

• The top band displays the total number of errors, the total number of web pages where errors occurred, the total number of files with errors, and the total number of users.

Note

Click the Add Filters button to narrow down the errors based on the error type, file type, webpage, browser, user, environment, release, and domain.

• The graph below the top band depicts the Errors vs. Affected Users. You can also get a summary of the errors that occurred and the users affected for the minimum, average, maximum, 95th percentile, and 99th percentile values.
• The section below the graph lists the errors. You can click on the specific errors to inspect them further.

View error details

Clicking on a JavaScript error will open the details page.

Details tab

The top band displays the respective error details, such as the device and browser in which the issue occurred, the user ID of the affected user, and the time at which the error details were collected.

Stack Trace

The Stack Trace shows the file name, method name, and line number of the error. You can de-obfuscate the minified error file to find the exact line of code containing an error.

• If the source map and JS Source files are uploaded (a green tick indicator appears), the exact line of error code will be shown.
• If the source map and JS source files are not uploaded (an orange exclamatory mark appears), you need to upload them in order to get the exact line of error code.

Automatic detection of the source map

In some cases, the RUM agent will automatically detect the source map if it is hosted on your website.

Case 1: The source map path is specified

If you have mentioned the file name, relative path, or absolute path of the source map in the minified file, the RUM agent will automatically search for the source map in the same directory as the minified file.

Syntax:

1. sourceMappingURL= (file name)
2. sourceMappingURL= (relative path)
3. sourceMappingURL= (absolute path)

Examples:

1. sourceMappingURL= (script.js.map)
2. sourceMappingURL= (dummy_dir/script.js.map)
3. sourceMappingURL= (https://<Some domain name>/src/map/script.js.map)

Case 2: No source map path is specified

If you haven't made any mention of the source map in the minified file:

1. The RUM agent will automatically look for the source map path in the response header of the minified file.
   
   Syntax:
   x-sourcemap-url: (source map path)
   
   Example:
   
   
2. If it is not specified in the header, the agent will look for it in the directory with the same name as your minified file.

Example:
If your minified file has the name script.min.js, the RUM agent will look for the source map with the name script.min.js.map.

Upload files

1. Click on the Upload Files option.
2. If it is a File Upload:
   1. Mention the version (for your reference).
   2. Browse and upload the source map.
   3. Browse and upload the JS Source file.
3. If it is a Zip Upload:
   1. Mention the version (for your reference).
   2. Browse and upload the ZIP file containing all of the required files.
4. Click Submit.

Breadcrumbs

This section displays all of your most recent actions. You can use this to determine which action resulted in the error.

For example, if you click Login > Submit email > Begin play, the RUM agent records each action as a breadcrumb. You can also see when each activity takes place. This shows how long you stay on a page before hitting the next button.

Error Instances tab

The Error Instances tab gives a detailed error report of the selected error for the chosen time period.

View uploaded files

1. Navigate to RUM > your application > JavaScript Errors.
2. Select Source Files to view all of the files that have been uploaded.

You can perform a quick search based on the file type and version by selecting them from the appropriate drop-down menu. You can also search for a file by its name using the Search by File Name box.

Upload and delete files

• You can also upload the source map and JS source file by clicking Upload.
• You can delete files by selecting them and clicking Delete.

Use case

In this example:

1. You can see that an error occurred in the application's Minified JS file.
   
   
2. However, as shown in the screenshot below, the debugging process is quite difficult because files are minified to a single line, making it extremely difficult to interpret and diagnose the code causing the error.
   
   
3. To view the error in RUM's JavaScript Errorssection and inspect it further, follow these steps:
   1. From the Site24x7 web client, navigate to the RUM section.
   2. Go to the JavaScript Errors section.
   3. Set the time frame to Last 30 Min to filter only the recent occurrences.
   4. Browse through the list of errors and click on the specific error you want to inspect further.
   
   
   
   
4. Since no map files have been hosted on the website, the system prompts to upload the required source map and original JS file.
   
   
5. Click the Upload Files option and upload the required files. Finally, click Submit.
   
   
   
   As a result, the exact line of error code is shown in the below screenshot.
   
   

Related article

• Decode JavaScript files using source maps
• Script errors