Sentry doesn't log on nextjs13 frontend side

[fernandops26]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.30.0

Framework Version

"next": "13.1.1"

Link to Sentry event

No response

Steps to Reproduce

My next.config.js

const path = require('path');
/** @type {import('next').NextConfig} */
const { withSentryConfig } = require('@sentry/nextjs');

const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
  output: 'standalone',
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ['prisma', '@prisma/client'],
  },
  sentry: {
    hideSourceMaps: false,
  },
};

module.exports = withSentryConfig(nextConfig);

sentry.client.config.js

import * as Sentry from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN,
  tracesSampleRate: 1.0,
});

sentry.server.config.js

import * as Sentry from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN,
  tracesSampleRate: 1.0,
});

sentry.properties

defaults.url=https://sentry.io/
defaults.org=my-org
defaults.project=my-project-name
cli.executable=node_modules/@sentry/cli/bin/sentry-cli

.sentryclirc

[auth]
token=SENTRY_AUTH_TOKEN

app/error.tsx

'use client';
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  const reportSentry = async (error: Error) => {
    console.log('🚀🚀🚀 ~ reportSentry ~ error', error);
    await Sentry.captureException(error);
  };

  useEffect(() => {
    // Log the error to an error reporting service
    console.error('TOP LEVEL ERROR', error);
    reportSentry(error);
  }, [error]);

  return (
    <div>
            <h1>
              Something wrong happened.
            </h1>
    </div>
  );
}

Finally app/test/page.tsx

'use client';
export default function Page() {
  return (
    <>
      <h1>Hello, Test page</h1>
      <button
        onClick={() => {
          throw Error('From test'); // error in console but not in Sentry
        }}
      >
        Throw error
      </button>
    </>
  );
}

I already have setted my env varsNEXT_PUBLIC_SENTRY_DSN, SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT but doesn't work.

Expected Result

Logged error on sentry

Actual Result

No logged nothing on sentry.

[Lms24]

Hi @fernandops26, thanks for writing in! We're already working on supporting Next 13's new app directory. In fact, the issue tracking this is already pinned on top of our issues list (#6726).

[Lms24]

Gonna close this issue as we're already tracking app dir support.

[fernandops26]

Hi @fernandops26, thanks for writing in! We're already working on supporting Next 13's new app directory. In fact, the issue tracking this is already pinned on top of our issues list (#6726).

Ok good to know, thanks!

[danil-stealthgpt]

I still have this error

[Lms24]

@danil-stealthgpt would you mind opening a new bug report issue with all details? This issue is quite old and probably out of date by now.