https://www.ractoon.com/_next/static/chunks/pages/articles/using-sentry-with-nuxt-3-c1264fd7483672c7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[641],{9480:function(n,e,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/articles/using-sentry-with-nuxt-3",function(){return s(4613)}])},4613:function(n,e,s){"use strict";s.r(e),s.d(e,{default:function(){return l},meta:function(){return c}});var a=s(5893),t=s(1151),r=s(312);let c={author:"ractoon",date:"2023-02-06",title:"Using Sentry with Nuxt 3",tags:["Nuxt","Sentry"],description:"Configuring Sentry for use with a Nuxt 3 application by building a custom plugin."},o=n=>(0,a.jsx)(r.B,{meta:c,...n});function i(n){let e={a:"a",code:"code",p:"p",pre:"pre",span:"span",...(0,t.a)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.p,{children:["At the time of writing the ",(0,a.jsx)(e.a,{href:"https://www.npmjs.com/package/@nuxtjs/sentry",children:(0,a.jsx)(e.code,{children:"@nuxtjs/sentry"})})," package is ",(0,a.jsx)(e.a,{href:"https://github.com/nuxt-community/sentry-module/issues/358",children:"not yet compatible with Nuxt 3"}),"."]}),"\n",(0,a.jsxs)(e.p,{children:["Most of the instructions from the ",(0,a.jsx)(e.a,{href:"https://docs.sentry.io/platforms/javascript/guides/vue/#vue-3",children:"Sentry documentation for Vue 3"})," will apply, with some minor adjustments."]}),"\n",(0,a.jsx)(e.p,{children:"Start by installing the package dependencies:"}),"\n",(0,a.jsx)(e.pre,{className:"language-bash",children:(0,a.jsxs)(e.code,{className:"language-bash",children:[(0,a.jsx)(e.span,{className:"token function",children:"npm"})," ",(0,a.jsx)(e.span,{className:"token function",children:"install"})," --save @sentry/vue @sentry/tracing\n"]})}),"\n",(0,a.jsxs)(e.p,{children:["Add a new entry to your ",(0,a.jsx)(e.code,{children:".env"})," file for ",(0,a.jsx)(e.code,{children:"SENTRY_DSN"})," that is set to your ",(0,a.jsx)(e.a,{href:"https://docs.sentry.io/product/sentry-basics/dsn-explainer/#where-to-find-your-dsn",children:"application DSN"}),", and ",(0,a.jsx)(e.code,{children:"SENTRY_ENV"})," set to the environment you’d like to report to Sentry."]}),"\n",(0,a.jsx)(e.pre,{className:"language-bash",children:(0,a.jsxs)(e.code,{className:"language-bash",children:[(0,a.jsx)(e.span,{className:"token assign-left variable",children:"SENTRY_ENV"}),(0,a.jsx)(e.span,{className:"token operator",children:"="}),"testing\n",(0,a.jsx)(e.span,{className:"token assign-left variable",children:"SENTRY_DSN"}),(0,a.jsx)(e.span,{className:"token operator",children:"="}),"https://[email protected]/0\n"]})}),"\n",(0,a.jsxs)(e.p,{children:["Replace ",(0,a.jsx)(e.code,{children:"https://[email protected]/0"})," with your application’s DSN."]}),"\n",(0,a.jsxs)(e.p,{children:["Update your ",(0,a.jsx)(e.code,{children:"nuxt.config.ts"})," file to include this new config:"]}),"\n",(0,a.jsx)(e.pre,{className:"language-js",children:(0,a.jsxs)(e.code,{className:"language-js",children:[(0,a.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(e.span,{className:"token function",children:"defineNuxtConfig"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(e.span,{className:"token spread operator",children:"..."}),"\n  ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"runtimeConfig"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n    ",(0,a.jsx)(e.span,{className:"token keyword",children:"public"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n      ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"sentry"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n        ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"dsn"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," process",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"env"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token constant",children:"SENTRY_DSN"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n        ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"env"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," process",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"env"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token constant",children:"SENTRY_ENV"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n      ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n  ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n  ",(0,a.jsx)(e.span,{className:"token spread operator",children:"..."}),"\n"]})}),"\n",(0,a.jsxs)(e.p,{children:["Then create a new plugin in your Nuxt 3 application: ",(0,a.jsx)(e.code,{children:"plugins/sentry.client.ts"})]}),"\n",(0,a.jsx)(e.pre,{className:"language-js",children:(0,a.jsxs)(e.code,{className:"language-js",children:["iimport ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," defineNuxtPlugin",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," useRouter",(0,a.jsx)(e.span,{className:"token punctuation",children:","})," useRuntimeConfig ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,a.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(e.span,{className:"token string",children:"'#app'"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(e.span,{className:"token imports",children:[(0,a.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,a.jsx)(e.span,{className:"token keyword module",children:"as"})," ",(0,a.jsx)(e.span,{className:"token maybe-class-name",children:"Sentry"})]})," ",(0,a.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(e.span,{className:"token string",children:"'@sentry/vue'"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n",(0,a.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(e.span,{className:"token imports",children:[(0,a.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(e.span,{className:"token maybe-class-name",children:"BrowserTracing"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(e.span,{className:"token string",children:"'@sentry/tracing'"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(e.span,{className:"token function",children:"defineNuxtPlugin"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token parameter",children:"nuxtApp"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n  ",(0,a.jsx)(e.span,{className:"token keyword",children:"const"})," config ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," ",(0,a.jsx)(e.span,{className:"token function",children:"useRuntimeConfig"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n  ",(0,a.jsx)(e.span,{className:"token keyword",children:"const"})," router ",(0,a.jsx)(e.span,{className:"token operator",children:"="})," ",(0,a.jsx)(e.span,{className:"token function",children:"useRouter"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,a.jsx)(e.span,{className:"token maybe-class-name",children:"Sentry"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token method function property-access",children:"init"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n    ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"app"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," nuxtApp",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"vueApp"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"dsn"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," config",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"public"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"sentry"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"dsn"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"environment"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," config",(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"public"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"sentry"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token property-access",children:"env"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"integrations"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"["}),"\n      ",(0,a.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,a.jsx)(e.span,{className:"token class-name",children:"BrowserTracing"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n        ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"routingInstrumentation"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token maybe-class-name",children:"Sentry"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"."}),(0,a.jsx)(e.span,{className:"token method function property-access",children:"vueRouterInstrumentation"}),(0,a.jsx)(e.span,{className:"token punctuation",children:"("}),"router",(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n      ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"tracesSampleRate"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token number",children:"1.0"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n  ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:")"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n\n  ",(0,a.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n    ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"provide"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token punctuation",children:"{"}),"\n      ",(0,a.jsx)(e.span,{className:"token literal-property property",children:"sentry"}),(0,a.jsx)(e.span,{className:"token operator",children:":"})," ",(0,a.jsx)(e.span,{className:"token maybe-class-name",children:"Sentry"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n    ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:","}),"\n  ",(0,a.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(e.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,a.jsx)(e.p,{children:"That’s it! Your client side exceptions should now be showing up in Sentry. Hopefully the official plugin is updated soon to support Nuxt 3, but until then this 

1should do the trick."})]})}function l(n={}){return(0,a.jsx)(o,{...n,children:(0,a.jsx)(i,{...n})})}},312:function(n,e,s){"use strict";s.d(e,{B:function(){return x}});var a=s(5893),t=s(9008),r=s.n(t),c=s(1664),o=s.n(c),i=s(1163),l=s(3223),p=s(6434),d=s(512);function u({children:n,className:e}){return(0,a.jsx)("div",{className:(0,d.Z)(e,"prose dark:prose-invert"),children:n})}var m=s(7330);function h(n){return(0,a.jsx)("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",...n,children:(0,a.jsx)("path",{d:"M7.25 11.25 3.75 8m0 0 3.5-3.25M3.75 8h8.5",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function x({children:n,meta:e,isRssFeed:s=!1,previousPathname:t}){if(s)return n;let c=(0,i.useRouter)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(r(),{children:[(0,a.jsx)("title",{children:`${e.title} | ractoon`}),(0,a.jsx)("meta",{name:"description",content:e.description})]}),(0,a.jsx)(l.W,{className:"mt-16 lg:mt-32",children:(0,a.jsx)("div",{className:"xl:relative",children:(0,a.jsxs)("div",{className:"mx-auto max-w-2xl",children:[t&&(0,a.jsx)("button",{type:"button",onClick:()=>c.back(),"aria-label":"Go back to articles",className:"group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:mb-0 lg:-mt-2 xl:-top-1.5 xl:left-0 xl:mt-0",children:(0,a.jsx)(h,{className:"h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400"})}),(0,a.jsxs)("article",{children:[(0,a.jsxs)("header",{className:"flex flex-col",children:[(0,a.jsx)("h1",{className:"bg-gradient-to-br from-ractoon-blue-light to-ractoon-blue-dark text-transparent bg-clip-text mt-6 text-4xl font-bold tracking-tight sm:leading-[4rem] sm:text-5xl",children:e.title}),(0,a.jsxs)("time",{dateTime:e.date,className:"order-first flex items-center text-base text-zinc-400 dark:text-zinc-500",children:[(0,a.jsx)("span",{className:"h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"}),(0,a.jsx)("span",{className:"ml-3",children:(0,m.p)(e.date)})]})]}),(0,a.jsx)(u,{className:"mt-8",children:n})]}),(0,a.jsx)("aside",{children:(0,a.jsx)(p.m,{className:"mt-24"})}),(0,a.jsx)("footer",{children:(0,a.jsx)(u,{children:(0,a.jsxs)("p",{className:"text-center",children:["Questions or comments? Hit me up on Twitter ",(0,a.jsx)(o(),{href:"https://twitter.com/ractoon",target:"_blank",children:"@ractoon"})]})})})]})})})]})}},5534:function(n,e,s){"use strict";s.d(e,{z:function(){return i}});var a=s(5893),t=s(1664),r=s.n(t),c=s(512);let o={primary:"bg-zinc-600 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70",secondary:"bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70",brand:"border border-ractoon-blue-dark/50 font-semibold text-ractoon-blue-dark dark:text-ractoon-blue hover:border-ractoon-blue hover:text-ractoon-blue active:border-ractoon-blue/60 dark:border-ractoon-blue/50 dark:hover:border-ractoon-blue-light dark:hover:text-ractoon-blue-light dark:active:border-ractoon-blue-light/70"};function i({variant:n="primary",className:e,href:s,...t}){return e=(0,c.Z)("inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none",o[n],e),s?(0,a.jsx)(r(),{href:s,className:e,...t}):(0,a.jsx)("button",{className:e,...t})}},6434:function(n,e,s){"use strict";s.d(e,{m:function(){return o}});var a=s(5893),t=s(512),r=s(5534);function c(n){return(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",...n,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75",className:"fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"})})}function o({className:n}){return n=(0,t.Z)("bg-white/90 backdrop-blur-sm rounded-2xl border border-zinc-100 p-6 dark:bg-zinc-900/90 dark:border-zinc-700/40",n),(0,a.jsxs)("form",{action:"https://app.convertkit.com/forms/3928602/subscriptions",method:"post",target:"_blank",className:n,children:[(0,a.jsxs)("h2",{className:"flex text-sm font-semibold text-zinc-900 dark:text-zinc-100",children:[(0,a.jsx)(c,{className:"h-6 w-6 flex-none"}),(0,a.jsx)("span",{className:"ml-2",children:"Stay up to date"})]}),(0,a.jsx)("p",{className:"mt-2 text-sm text-zinc-600 dark:text-zinc-400",children:"Get notified when I publish something new, and unsubscribe at any time."}),(0,a.jsxs)("div",{className:"mt-6 flex",children:[(0,a.jsx)("input",{type:"email",placeholder:"Email address","aria-label":"Email address",name:"email_address",required:!0,className:"min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(sp

1acing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-ractoon-blue focus:outline-none focus:ring-4 focus:ring-ractoon-blue/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-ractoon-blue-light dark:focus:ring-ractoon-blue-light/10 sm:text-sm"}),(0,a.jsx)(r.z,{type:"submit",className:"ml-4 flex-none",children:"Join"})]})]})}},7330:function(n,e,s){"use strict";function a(n){return new Date(`${n}T00:00:00Z`).toLocaleDateString("en-US",{day:"numeric",month:"long",year:"numeric",timeZone:"UTC"})}s.d(e,{p:function(){return a}})},9008:function(n,e,s){n.exports=s(7828)},1151:function(n,e,s){"use strict";s.d(e,{a:function(){return r}});var a=s(7294);let t=a.createContext({});function r(n){let e=a.useContext(t);return a.useMemo(function(){return"function"==typeof n?n(e):{...e,...n}},[e,n])}}},function(n){n.O(0,[888,774,179],function(){return n(n.s=9480)}),_N_E=n.O()}]);