You would think that utilizing Sentry to track errors in a Browser extension is easy but it is actually not. This is how I solved it.
Installing Sentry
To use sentry in the browser extension first install the package using yarn or npm
# npm
npm install @sentry/browser
# yarn
yarn add @sentry/browser
Using Sentry
To utilize sentry you have to follow the usual setup they give you on their website
import * as sentry from "@sentry/browser";
Sentry.init({
dsn: "YOUR_DSN"
})
function example() {
throw new Error("Example Error")
}
example()
Now you might think that you will be tracking errors but unfortunately this will not work out of the box. You first have to make some changes to the above code:
- wrap the whole execution in a try-catch
- add an eventlistener for the "unhandledrejection" event
The code will then look like this:
import * as sentry from "@sentry/browser";
Sentry.init({
dsn: "YOUR_DSN"
})
window.addEventListener('unhandledrejection', event => {
Sentry.captureEvent(event.reason)
});
function example() {
throw new Error("Example Error")
}
try {
example()
} catch (e) {
Sentry.captureEvent(e)
}
Success! Now sentry will capture the error/exception but you will quickly notice something that doesn't look alright.
Fixing the Problem
If you upload sourcemaps to sentry you would expect that they would be used to simplify finding the error but unfortunately, by default, sentry reports the error in the .js
file with the full path on the users system. You might see a error description with a path like this:
.../Default/Extensions/<extension-id>/0.0.1.10_0/content_script.js
instead of just the truncated relative path.
We have to truncate the path manually before sending the event to make sure that sentry recognizes the files for the sourcemaps. We do this by specifying a beforeSend
function in the Sentry.init
call.
Sentry.init({
dsn: 'YOUR_DSN',
beforeSend(event, hint) {
if (event.exception) {
event.exception.values[0].stacktrace.frames.forEach((frame) => {
frame.filename = frame.filename.substring(frame.filename.lastIndexOf("/"))
});
}
return event;
}
});
This will properly report errors and the correct sourcemaps will be used by sentry.
What I use this for?
I am currently working on StreamParty, "a browser extension, that allows you to watch video streams in sync with your significant other all across the world, on multiple platforms." Check it out! https://www.streamparty.tv/
Top comments (0)