Next.js 13 app directory support #7999
Replies: 9 comments 15 replies
-
|
I'm sure you folks know about this already, but |
Beta Was this translation helpful? Give feedback.
-
|
Hm interesting. We'll keep that in mind but it is definitely not high prio. Does the react profiler even work with server components? What is the use-case behind server-components + profiler? |
Beta Was this translation helpful? Give feedback.
-
|
The issue isn't that the profiler doesn't work with server components, the issue is that if you drop Add this to import * as Sentry from '@sentry/react';
Sentry.init({
dsn: '__DSN__',
});Run the app: Load it up in a browser. Boom. See error above. |
Beta Was this translation helpful? Give feedback.
-
|
Ok a few things:
|
Beta Was this translation helpful? Give feedback.
-
I generally know to avoid things like this, and why. Thing is, I'm just blindly following your READMEs and expending zero brain cells thinking about why or whether I should. ie. I'm emulating the median developer.
Following the installation guide for the Next.js Sentry SDK lands you in exactly the same hot water.
Again, I'm not trying to use the profiler. I'm just trying to install Sentry, using the installation guides provided. The meta-feedback here is ‘when people follow your installation guides to install Sentry in a Next.js 13 app with the App Router enabled, faceplanting follows.’ |
Beta Was this translation helpful? Give feedback.
-
It's cool feedback and all. Thanks for that! Maybe this is an interesting insight: We can never build a product that everybody will be able to fully understand - this is unfortunately the nature of developing libraries. I think the average developer is smarter and more willing to succeed than you make it out to be, so IMO the issue you're raising doesn't require immediate action. We cannot make it right for everybody, but I will make it as easy as possible for people within a reasonable scope - explaining Next.js is outside of that scope.
Sadly we don't have time to attempt to fix hypothetical issues. If you have a real problem and a concrete issue let me know! Last but not least: Everything is open-source, including our docs. If you feel like something can be improved, PRs are always welcome. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @lforst, is there an example repo of Sentry with NextJS 13 and the now stable app dir? I used the set-up wizard for NextJS but ended up pulling everything out because I didn't have confidence it was working correctly. I was getting errors locally and I wasn't sure the extent of the support. Thanks so much! |
Beta Was this translation helpful? Give feedback.
-
|
@mblode Not yet. I know app router is "stable" now but there is still a lot to figure out from everybody - the community, Vercel, and us. I wanna set the expectations right. We're not rushing out support. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @lforst I am currently experiencing this error:
I have created an empty repo just to see if the error exists by default and yes. I am using Windows. I created a new next repo with npx create-next-app@latest and then manually installed Sentry via npm install --save @sentry/nextjs and created the files described in their documentation: sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts Then added the changes next.config.js to include Sentry: const { withSentryConfig } = require("@sentry/nextjs"); /** @type {import('next').NextConfig} */ module.exports = withSentryConfig(nextConfig); Any help would be welcomed. Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I think this is a duplicate of #8133 and we're in the process of resolving it. It is likely gonna be fixed with a release that goes out tomorrow. Unfortunately this bug was introduced fixing another bug with newer versions of Next.js so I think there is no workaround right now. (Unless you would be willing to downgrade both the Sentry SDK and Next.js) |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
@KenChang-TVBS Please don't add the webpack plugin when using the Next.js SDK. It already adds an instance to upload source maps. |
Beta Was this translation helpful? Give feedback.
-
|
Hello all ! We are trying to integrate sentry on next app dir integrated with next-intl. after running the wizard, we are seeing this error
Any one else with similar issue ? |
Beta Was this translation helpful? Give feedback.
-
Its related with #8416 (comment), i solved it after removing exports from middleware |
Beta Was this translation helpful? Give feedback.
This comment has been minimized.
This comment has been minimized.
-
|
Hello. I'm trying to integrate Sentry into my NextJS app directory, but I'm having trouble understanding why my errors aren't being logged. Client side errors, and error in my tRPC calls are being logged fine, but when I have an error in my page render I'm getting nothing. When I look in the Vercel deployment logs, I see two errors:
I'd expect to the 1 in Sentry, but it's not coming through. Based on the roadmap and #6953, I feel like I should be seeing the error logged in Sentry. Is there something that I'm doing wrong? fwiw I've set up my application using the wizard, so maybe there's a necessary manual step? |
Beta Was this translation helpful? Give feedback.
-
|
If you build your app locally do you see the same behaviour?
It's unclear to me what you mean by this. Is only one of the two errors coming through or none? |
Beta Was this translation helpful? Give feedback.
-
|
Also, if you feel like this is an issue with the SDK, please open an issue with steps to reproduce and your setup. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
In trying to prepare a response with steps to reproduce, I think I've realized that a wrapper method I was using for my page functions was swallowing the error / stopping Sentry from logging it for some reason. Sorry for wasting you time! |
Beta Was this translation helpful? Give feedback.
-
|
Hey no worries. Stuff is indeed complicated sometimes! Thanks for reaching out! |
Beta Was this translation helpful? Give feedback.
-
|
Hey @lforst Simplified error boundary: // app > foo > bar > error.tsx
'use client'
import { captureException } from '@sentry/nextjs'
import { useEffect } from 'react'
export default function Error({ error }: { error: Error }) {
useEffect(() => {
captureException(error)
}, [error])
return (
<div>
<h2>Something went wrong in this local page</h2>
<p>{error?.message}</p>
</div>
)
}I'm using Given a thrown 
Is this a known issue? Am I missing some kind of setup? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
If I Setting |
Beta Was this translation helpful? Give feedback.
-
|
Hi, would you mind opening an issue with full reproduction steps? Thanks! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Update: Next.js App Directory is fully supported now.
Important
If you have problems, please open a new issue with concrete reproduction steps! Thank you!
Beta Was this translation helpful? Give feedback.
All reactions