Docs » Supported integrations in Splunk Observability Cloud » Instrument mobile and web applications for Splunk RUM » Instrument browser-based web applications for Splunk RUM » Errors collected by the Browser RUM agent

Errors collected by the Browser RUM agent 🔗

The Browser RUM agent collects errors as spans with a duration of zero. Error spans carry a timestamp based on the time when the error occurred.

By default, the instrumentations collect errors from the following sources:

  • Uncaught and unhandled errors from the "error" event listener on the window object

  • Unhandled promise rejections from the unhandledrejection event listener on the window object

  • Error events from failing to load resources from the "error" event listener on the document object

  • console.error errors logged to the console

  • SplunkRum.error errors which can’t be logged but are still collected by the agent

To collect JavaScript errors from single-page application (SPA) frameworks, see Collect errors with single-page application frameworks.

Uncaught or unhandled errors 🔗

The Browser RUM agent registers each uncaught or unhandled error as a span with name onerror. Here are some typical examples of uncaught or unhandled errors:

  • Errors that aren’t caught by try {} and catch {} blocks

  • Errors thrown again in a catch block but not caught again

  • Syntax errors in files

The following examples show how the Browser RUM agent collects uncaught or unhandled errors:

Syntax error example 🔗

Consider the following syntax error:

var abc=;

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: Unexpected token ';'

  • error.object: SyntaxError

  • error.stack: SyntaxError: Unexpected token ';'

Note

error.message and error.stack messages are browser-specific.

Null reference example 🔗

Consider the following null reference error:

var test = null;
test.prop1 = true;

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: Cannot set property 'prop1' of null

  • error.object: TypeError

  • error.stack: TypeError: Cannot set property 'prop1' of null at...

Note

error.message and error.stack messages are browser-specific.

Uncaught promise rejections 🔗

The Browser RUM agent registers each uncaught promise rejection as a span with name unhandledrejection. Uncaught promise rejections can happen in the following situations:

  • In a promise chain without a final .catch method

  • As an error in promise chain, including rethrowing in a catch block, without any subsequent catch block

  • As a throw block in an async function

The following examples show how the Browser RUM agent collects uncaught promise rejections:

Standard error example 🔗

Consider the following code:

new Promise((resolve, reject) => {
   reject(new Error('broken'))
})

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: broken

  • error.object: "error"

  • error.stack: Error: broken at...

Note

error.message and error.stack messages are browser-specific.

Type error example 🔗

Consider the following code:

new Promise((resolve, reject) => {
   resolve(null)
}).then((val) => {
   val.prop = 1
})

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: Cannot set property 'prop' of null

  • error.object: TypeError

  • error.stack: TypeError: Cannot set property 'prop' of null at...

Note

error.message and error.stack messages are browser-specific.

Failing to load resources 🔗

The Browser RUM agent registers each failure to load resources as a span with name eventListener.error. Browsers fail to load resources when the server returns 4xx or 5xx status codes when loading images or scripts.

Consider the following example:

<!DOCTYPE html>
<html>
   <head>
      [...]
   </head>
   <body>
      <img src="/missing-image.png" />
   </body>
</html>

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: "IMG"

  • error.object: "https://example.com/missing-image.png"

  • error.stack: ""//html/body/img""

Note

error.message and error.stack messages are browser-specific.

Console errors 🔗

The Browser RUM agent registers each error logged using the console as a span with the name console.error. Browsers typically use console errors to show messages in the developer console. The Browser RUM agent collects console errors from try...catch blocks where you don’t want or can’t throw errors further in the stack.

Note

Your browser console might misreport console errors as Browser RUM agent errors. Check the stack trace to confirm whether the error is caused by Splunk RUM or by console.error calls generated by the application you’re instrumenting.

The following examples show how the Browser RUM agent collects console errors:

Setting field value to null example 🔗

Consider the following code:

try {
   someNull.anyField = 'value';
} catch(e) {
   console.error('failed to update', e);
}

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: failed to update TypeError: Cannot set property 'anyField' of null

  • error.object: String

  • error.stack: "TypeError: Cannot set property 'anyField' of null at...

Note

error.message and error.stack messages are browser-specific.

Error 404 example 🔗

Consider the following code:

axios.get('/users').then(users => {
   showUsers(users)
}).catch(error => {
   showErrorMessage()
   console.error('error getting users', error)
})

The Browser RUM agent collects the error using the following attributes:

  • component: "error"

  • "error": true

  • error.message: "error getting users Error: Request failed with status code 404"

  • error.object: "String"

  • error.stack: "Error: Request failed with status code 404 [...] at XMLHttpRequest.l.onreadystatechange  axios.min.js:2:8373)"

Note

error.message and error.stack messages are browser-specific.

Splunk RUM errors 🔗

The Browser RUM agent registers each error logged by invoking SplunkRum.error as a span with name: SplunkRum.error. Using SplunkRum.error doesn’t log an error in the developer console of the browser. Errors are sent along with other RUM telemetry and exposed in the Splunk RUM UI.

Consider the following example:

axios.get('/users').then(users => {
   showUsers(users)
}).catch(error => {
   showErrorMessage()
   if (window.SplunkRum) {
   SplunkRum.error('error getting users', error)
   }
})

The resulting error has similar attributes to any console.error collected by the Browser RUM agent.