Error Handling

Bu belgede, geliştirme, sunucu tarafı ve istemci tarafı hatalarını nasıl ele alabileceğiniz açıklanmaktadır.

Handling Errors in Development

Next.js uygulamanızın geliştirme aşamasında bir çalışma zamanı hatası olduğunda, bir kaplama ile karşılaşırsınız. Bu, web sayfasını kaplayan bir modaldir. Yalnızca geliştirme sunucusu pnpm dev, npm run dev, yarn dev veya bun dev aracılığıyla next dev kullanılarak çalıştırıldığında görünür ve üretimde gösterilmez. Hatanın düzeltilmesi, kaplamayı otomatik olarak kapatacaktır.

İşte bir kaplama örneği:

Handling Server Errors

Next.js, uygulamanızda meydana gelen sunucu tarafı hatalarını işlemek için varsayılan olarak statik bir 500 sayfası sağlar. Bu sayfayı bir pages/500.js dosyası oluşturarak da özelleştirebilirsiniz.

Uygulamanızda bir 500 sayfası olması, uygulama kullanıcısına belirli hataları göstermez.

404 sayfasını file not found gibi belirli çalışma zamanı hatalarını işlemek için de kullanabilirsiniz.

Handling Client Errors

React Error Boundaries, uygulamanın diğer bölümlerinin çalışmaya devam etmesi için istemcideki bir JavaScript hatasını ele almanın zarif bir yoludur. Sayfanın çökmesini engellemenin yanı sıra, özel bir geri dönüş bileşeni sağlamanıza ve hatta hata bilgilerini günlüğe kaydetmenize olanak tanır.

Next.js uygulamanızda Hata Sınırlarını kullanmak için ErrorBoundary sınıf bileşeni oluşturmalı ve Component prop'unu pages/_app.js dosyasına sarmalısınız. Bu bileşen şunlardan sorumlu olacaktır:

• Bir hata atıldıktan sonra bir geri dönüş kullanıcı arayüzü oluşturun
• Uygulamanın durumunu sıfırlamak için bir yol sağlayın
• Hata bilgilerini günlüğe kaydetme

React.Component adresini genişleterek bir ErrorBoundary sınıfı bileşeni oluşturabilirsiniz. Örneğin:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
 
    // Define a state variable to track whether is an error or not
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI
 
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // You can use your own error logging service here
    console.log({ error, errorInfo })
  }
  render() {
    // Check if the error is thrown
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div>
          <h2>Oops, there is an error!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Try again?
          </button>
        </div>
      )
    }
 
    // Return children components in case of no error
 
    return this.props.children
  }
}
 
export default ErrorBoundary

ErrorBoundary bileşeni bir hasError durumunu takip eder. Bu durum değişkeninin değeri bir boolean'dır. hasError değişkeninin değeri true olduğunda, ErrorBoundary bileşeni bir geri dönüş kullanıcı arayüzü oluşturur. Aksi takdirde, alt bileşenleri işler.

Bir ErrorBoundary bileşeni oluşturduktan sonra, Next.js uygulamanızda Component prop'unu sarmak için pages/_app.js dosyasına içe aktarın.

// Import the ErrorBoundary component
import ErrorBoundary from '../components/ErrorBoundary'
 
function MyApp({ Component, pageProps }) {
  return (
    // Wrap the Component prop with ErrorBoundary component
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}
 
export default MyApp

Hata Sınırları hakkında daha fazla bilgiyi React'in dokümantasyonunda bulabilirsiniz.

Reporting Errors

İstemci hatalarını izlemek için Sentry, Bugsnag veya Datadog gibi bir hizmet kullanın.