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 thewindow
objectUnhandled promise rejections from the
unhandledrejection
event listener on thewindow
objectError events from failing to load resources from the
"error"
event listener on thedocument
objectconsole.error
errors logged to the consoleSplunkRum.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 {}
andcatch {}
blocksErrors thrown again in a
catch
block but not caught againSyntax 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
methodAs an error in promise chain, including rethrowing in a
catch
block, without any subsequentcatch
blockAs a
throw
block in anasync
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.