How to Start Using Sentry: Application Monitoring for Next.js
How to Start Using Sentry: Application Monitoring for Next.js
I use Sentry in a few different applications so I thought Iād show you how you can implement this in Next.js
Follow me on:
š Website/Blog: https://jamesperkins.dev
š Twitter: https://twitter.com/james_r_perkins
š Linkedin: https://www.linkedin.com/in/james-perā¦
š Github: https://github.com/perkinsjr
š Discord: https://discord.gg/dqYP9Mc
š Twitch: https://twitch.tv/jamesperkins
Content
0.37 -> When we think of production
applications, one thing that we don't think about
4.1 -> enough is errors monitoring.
9.39 -> It's an essential part because even if
you've tested everything you
13.164 -> could possibly do with smoke test,
unit testing,
16.994 -> even having users test it through a
beta, there are some
20.664 -> things that you just can't foresee. So
in this
23.952 -> video we're going to show you how you
can implement Sentry in
27.576 -> the NextJS application so you can
monitor errors
31.154 -> and performance. So the first thing we
need to do to
34.68 -> start our Century project is create
our NextJS application.
38.61 -> So for this we're going to do MPX
Create Next app
42.06 -> and we'll call it Century App Example.
Once this has been
46.056 -> completely installed, we then need to
install a single
49.428 -> package for Century so we can CD into
our Century App Example
53.532 -> here and do yarn add at
57.18 -> Sentry NextJS. Once this is done, we
need
60.636 -> to flip over to our Century dashboard
and create a
64.152 -> new project. So from Google Chrome
I've logged in to
67.572 -> my account here and as you can see, we
don't have any projects. So let's
71.15 -> create a project here and we're going
74.688 -> to select Next JS. And then down here
78.684 -> we're going to just say alert me on
every issue here's
82.934 -> what I normally do for production
applications. Usually I said it when there is
86.544 -> more than x occurrences over a period
of time.
90.228 -> But for now we'll just allow on every
issue.
93.51 -> And then all you have to do is click
Create Project here. If you're
97.106 -> concerned about throughput and things
like that, you can select this. And also
101.148 -> when your transactions are slower than
average. But this is
104.484 -> just a basic generic version of
setting up Century and
108.396 -> I'll talk about how it all works
behind the scenes. So we're going to
111.936 -> click Create Project here and now
we're ready
115.308 -> to go. Now what we need to do is
actually run this command right here.
119.376 -> This command right here does a lot of
things. First it
123.372 -> creates the Century client config JS.
It also creates
127.418 -> a server version. It does a Next
config JS
131.414 -> if there is one, it will create a
separate file which you can merge together.
135.612 -> And then finally it creates the
Century properties and
139.224 -> things like that. So I'm going to go
ahead and copy this. I'm going to
142.368 -> go to our terminal, we're going to
paste this in and
145.872 -> hit Enter. What's going to happen is
it's going to ask us
149.376 -> if your want to install this because
it's just a template. So we click yes.
152.892 -> Then it's going to log into our
account here and it's going to say waiting
156.338 -> for the wizard to connect. Sometimes
it doesn't actually
160.212 -> change. So as you can see right now,
it hasn't changed from wizard that is
163.896 -> connected. But if we click here,
you'll see that it's already
167.58 -> done the application. Sometimes you
can try clicking
171.254 -> this a second time. Otherwise I
usually just close out
174.684 -> and then go back to projects and your
should see that this project is now
178.428 -> here. This is your project dashboard.
You can do a
181.884 -> lot of stuff here. First you can set
up things like
185.316 -> number of releases. You can set up how
many crash,
188.654 -> recessions, crash reuses. You can
create custom alerts
192.71 -> for certain things if you click this
create alert. Your can say when this
196.68 -> issue happens, email a specific
person.
200.568 -> So if you've got a team of three and
someone works solely in
204.66 -> APIs, you can have them. Any time an
API error comes up,
208.572 -> email them an issue. Or if a number of
errors happen
212.256 -> above a certain number you can get
yourself an email. There's a bunch of
215.436 -> different things you can do in here.
But we need to go back to our
218.916 -> application to really look at what's
happening. So from here
222.204 -> we can go ahead and open this up. And
now we're in NextJS. As you
225.528 -> can see, there's something called next
config. Wizard, copy, JS. And that's
229.226 -> because there was already a Next
config file and they don't automatically
233.078 -> copy or merge these together. You have
to do it manually. So the
236.856 -> only changes is we just need to take
this right here,
240.99 -> we can copy this and we can drop it
right into our module
245.102 -> exports like so make sure you delete
that
249.45 -> and then we can delete this top one.
So delete this
254.91 -> and then rename this to just
Nextconfig JS.
258.974 -> So Century by default offers this
underscore error JS file
262.646 -> which is a custom error that
essentially just allows you to handle
266.318 -> some error messages and it will let
you essentially
270.134 -> track those if something happens, say
in a serverless function or something
274.308 -> else. So just bear that in mind.
Obviously you probably still want a
277.776 -> custom 404 and a custom 500 error
page,
281.46 -> but this also handles error components
for things that
285.42 -> may happen along the way. We talked
about Next config, we've talked about this
289.404 -> underscore error. Let's talk about
this client config. This client
293.042 -> config essentially just in its century
that you
296.184 -> can then use along with Century
Server. It's the same
299.94 -> thing but on the server side. On top
of that you have this Century project
303.84 -> which essentially tells you what the
aug is,
307.224 -> what the URL is, what the NextJS is,
and where the CLI
310.958 -> executable lives. So that's everything
314.928 -> to do with the project but how does it
actually
318.684 -> work? So inside of here we're
321.818 -> going to go ahead and just delete
everything out except from the main.
325.71 -> And all we're going to do is create a
button here. And this button is
329.412 -> essentially just going to have an on
click handler. This on click handler
333.41 -> is then going to throw an error. So we
can just do throw
338.31 -> error and inside that will have an
error message that says
341.76 -> hello from the front end.
345.93 -> And if we hit save here and then we
close our button out
349.764 -> and we say click me. So what's
happening here is essentially
353.486 -> we're just going to throw an error
message. What will happen then is that
356.712 -> Century will actually handle this for
you. So your don't actually have
359.844 -> to do any additional work here. If
there's an error thrown anywhere in your
363.636 -> application, century will handle it
and I'll show you what it looks like
366.924 -> in the dashboard. So from here we can
just do Yondev localhost 3000.
371.37 -> Click the button you'll see unhandled
runtime
375.218 -> error hello from the front end. And
this is obviously the error. And if
378.876 -> we go here and go to our projects and
go to next JS,
383.73 -> we should see there is an issue here.
387.99 -> All issues one and new issue one. If
we click this
391.836 -> and we click on this error message
right here, so it shows you exactly
395.364 -> what's happening at the time. Now,
because it's not deployed, we're going to get
398.556 -> this problem processing the event
because there is no source code right
402.024 -> now. We can fix that later if we so
wish.
405.17 -> But imagine if this is in deployed
mode,
408.806 -> it will show you a bunch of things.
Then it's going to show you all
411.912 -> sorts of user IPS development, runtime
browsers,
415.946 -> what it's using, et cetera. So using
Chrome,
419.294 -> Maco OS, here's an IP and then if we
scroll
423.062 -> down, it will show you the exact
exception.
425.966 -> So here you can see on this internal
web pack
429.252 -> on page index JF on click at line 56
433.008 -> 31. On top of that you can actually
scroll a bit further down and
436.716 -> you get essentially a breadcrumb of
exactly what's happening. So here
440.748 -> your can see someone was fetching this
page. So they went from this
445.141 -> to this. With is me refreshing the
page. It's this transaction.
448.514 -> ID brand new and then it says a user
action happened,
452.772 -> UI was clicked, body div next. That
would be
456.804 -> the next page in the home container in
461.184 -> the main there was a button. When that
button was clicked,
464.654 -> an exception happened and it said
errors hello from the front end. So we've
468.326 -> seen examples of the front end, but
what about in an API?
471.938 -> So inside of our API we can actually
use a
475.248 -> Century helper here to essentially
wrap this request. And if
479.136 -> there is an error message, it will get
handled. So we can do that by
482.316 -> doing an import here. James with
century
486.33 -> that comes from at
489.96 -> Centurynext. All we need to do here is
create
493.572 -> a handler so we can say consthandler
equals
497.426 -> an async function and that async
function
503.19 -> can be request and response. Then we
can
507.57 -> do some errors here and then inside of
511.236 -> it we can do something. So we can just
say
514.776 -> throw new error
518.91 -> and we'll say this API didn't
522.77 -> work. And then we can
526.764 -> just do in fact we can just copy this
531.81 -> and we'll say rest 200 more,
536.244 -> leave that as is and we'll delete
this. And then we just need to wrap
539.69 -> our handler in the with Century.
543.194 -> So we just do export default
547.358 -> with sentry and then we paste the
handler
550.826 -> in there just like this and now what
will happen is
554.592 -> this will error out and then we will
get a good error message.
558.408 -> So we do Yawn Dev here and then we can
go
561.636 -> to localhost 3000, everything's fine
here and if we doapihlo
566.99 -> we got this error message here. This
API didn't work, it shows us exactly where
570.396 -> it threw the errors message because
we're in development mode and if we go to
573.756 -> our open source project here NextJS
scroll
579.302 -> down, we got all new issues and I
imagine
583.082 -> all of these other API didn't work
including
586.502 -> a couple of areas where I misspelled
the name have shown up.
589.968 -> But we've got this one right here
where I requested this twice. If I
593.796 -> click on this error you can see
everything about this
597.696 -> and where it came from. So we can see
it came from this API handler
602.01 -> and we can see everything about
605.844 -> cookies. Headers. What the device was.
Et cetera
609.506 -> and then we can actually see the error
message here so
613.344 -> we can go full trace here and
617.884 -> we can look at the trace ID and say
one transaction. One error. It took
621.04 -> 1.35 milliseconds and the trace was
from
624.7 -> this http get and an error occurred
628.146 -> in this transaction. Here is the error
message so you can see the exact error
631.914 -> message, you can click on that and you
can see
635.5 -> everything about your error.
638.802 -> When you fixed it, you can click this
resolve button and
643.204 -> that will resolve it. But if you then
go back here and we do this
646.516 -> one more time and we go back to issues
here you'll see Regressed has one
649.972 -> now and that is the API didn't work
because I
653.968 -> intentionally flew the error message
again. So if your done a code fix
657.292 -> you think this completely is fixed,
that is not
661.132 -> true. Then you can open your GitHub
issues and when you deploy this
664.744 -> out every time you do a new release so
let's say you merge a
668.356 -> PR and you do a release, this release
number will go up.
672.49 -> When this release goes up it actually
makes it even
676.048 -> better because what happens is if you
put the release out and
679.876 -> something regress it will tell you the
exact release that it regressed with.
683.968 -> So there you have it, a brief
introduction to Century.
687.258 -> If you did enjoy this video, make sure
to hit the subscribe button that you
690.316 -> see on the screen and of course until
the next one on.
693.892 -> See ya.
Source: https://www.youtube.com/watch?v=tLvpZQI_qjE