Adding Context to Issues in Sentry — Transcript

Transcript of the free Vue.js lesson Adding Context to Issues in Sentrywatch the video lesson.

besides the wealth of information that Sentry provides on issues out of the box. We can also add arbitrary data to issues in order to provide more context. Let's do that on the About page. Since our application is so simple, there isn't any real contextual data except maybe the page name, but we've already got that data in Sentry from the router.

Let's pretend though that our application is a content management system and this about page is actually for editing posts. So maybe we have a post object with an ID, a title, and a body. We can provide this data about the post to Sentry in order to help us with debugging. We do that by calling Sentry's set context method.

So first, we'll need to import Sentry. Then we can call the set context method. The first argument is a string that acts as a unique identifier for the context. It can be anything except for the word type, which is used internally.

So I'll go with post. And then we can provide the data. And actually, we'll just need to move this up under post so that post is already defined. Sweet.

This data will be available on the issue page now in Sentry. Also, It's worth noting here that the data for context in Sentry should always be an object. If you'd like to provide a primitive value, like a string or a number, then you probably want to use the setTag method to set a tag instead of setContext. That would look something like this.

Sweet. Also, it's worth noting that the payload size has limits for contexts in Sentry. Thus, Sentry doesn't recommend sending the entire application state, or large data blobs, in context. For us, that means we probably don't want to include the post body.

Because in a real-life application, that could probably get pretty lengthy. Therefore, I'll just manually pick out the ID and title of the post and pass it to our context. Cool. Now let's trigger our error again by pressing the Make Toast button.

in the browser. We get the error and then over in the Sentry dashboard, I'll go back to the issues page and the error once more. Awesome. Now we can see that random tag we added in our tags.

And more importantly, if we scroll down to the bottom of the page, we get some information here about our post. It has the ID and then also the title here is Hello World. And I've actually accidentally shown off another feature of the context. If you use title, then that will be changed into this heading here.

Otherwise, it would be the name of the tag itself. Let's change up title to be post title instead, just to see what that looks like. I'll trigger the error once more. We'll give our issue a refresh.

And yeah, now you can see the post with ID and post title underneath. Awesome. besides the wealth of information that Sentry provides on issues out of the box. We can also add arbitrary data to issues in order to provide more context.

Let's do that on the About page. Since our application is so simple, there isn't any real contextual data except maybe the page name, but we've already got that data in Sentry from the router. Let's pretend though that our application is a content management system and this about page is actually for editing posts. So maybe we have a post object with an ID, a title, and a body.

We can provide this data about the post to Sentry in order to help us with debugging. We do that by calling Sentry's set context method. So first, we'll need to import Sentry. Then we can call the set context method.

The first argument is a string that acts as a unique identifier for the context. It can be anything except for the word type, which is used internally. So I'll go with post. And then we can provide the data.

And actually, we'll just need to move this up under post so that post is already defined. Sweet. This data will be available on the issue page now in Sentry. Also, It's worth noting here that the data for context in Sentry should always be an object.

If you'd like to provide a primitive value, like a string or a number, then you probably want to use the setTag method to set a tag instead of setContext. That would look something like this. Sweet. Also, it's worth noting that the payload size has limits for contexts in Sentry.

Thus, Sentry doesn't recommend sending the entire application state, or large data blobs, in context. For us, that means we probably don't want to include the post body. Because in a real-life application, that could probably get pretty lengthy. Therefore, I'll just manually pick out the ID and title of the post and pass it to our context.

Cool. Now let's trigger our error again by pressing the Make Toast button. in the browser. We get the error and then over in the Sentry dashboard, I'll go back to the issues page and the error once more.

Awesome. Now we can see that random tag we added in our tags. And more importantly, if we scroll down to the bottom of the page, we get some information here about our post. It has the ID and then also the title here is Hello World.

And I've actually accidentally shown off another feature of the context. If you use title, then that will be changed into this heading here. Otherwise, it would be the name of the tag itself. Let's change up title to be post title instead, just to see what that looks like.

I'll trigger the error once more. We'll give our issue a refresh. And yeah, now you can see the post with ID and post title underneath. Awesome.