В цифровой среде защита конфиденциальных данных стала первостепенной задачей.

Как разработчики, мы понимаем постоянно надвигающуюся угрозу утечки и взлома данных. Не бойтесь, решение уже близко.

Добро пожаловать в подробное руководство по обеспечению безопасности ваших приложений Next.js 13 с помощью тщательной регистрации ошибок. В этой статье мы углубимся в искусство безопасного протоколирования ошибок — жизненно важного метода, который не только позволяет эффективно диагностировать проблемы, но и защищает ваши ценные пользовательские данные от посторонних глаз.

Присоединяйтесь к нам, и мы изучим стратегии и инструменты, которые помогут вам сохранить доверие пользователей, используя возможности Next.js 13.

Без лишних слов, давайте начнем!

Оглавление

  • Настройка проекта Next.js 13
  • Создание пользовательской службы регистрации
  • Тестирование службы регистратора

Настройка проекта Next.js 13

  1. Прежде чем мы начнем, убедитесь, что на вашем локальном компьютере настроен проект Next.js 13. Вы можете сделать это, выполнив:
npx create-next-app@latest

Для получения дальнейших инструкций посетите: Руководство по установке Next.js

Создание пользовательской службы регистрации

  1. Теперь, когда у нас есть настройка проекта Next.js 13, нам нужно определить Logger Service.. Проще говоря, служба Logger — это файл, который обеспечивает настраиваемые функции ведения журнала из централизованного местоположения.
  2. Создайте файл с именем Logger.ts в корне вашего проекта Next.js 13 или в папке src/, если вы выбрали этот вариант установки.
  3. Скопируйте следующий код в Logger.ts
class Logger {
  static debug(...data: any[]) {
    if (process.env.NODE_ENV !== "production") {
      console.log("[DEBUG]", ...data)
    }
  }

  static warn(message: string) {
    if (process.env.NODE_ENV !== "production") {
      console.warn("[WARNING]", message)
    }
  }

  static error(message: string) {
    if (process.env.NODE_ENV !== "production") {
      console.error("[ERROR]", message)
    }
  }

  static tabulate(obj: object) {
    if (process.env.NODE_ENV !== "production") {
      console.table(obj)
    }
  }

  static clear = () => {
    console.clear()
  }
}

export { Logger }

Этот код предоставляет пять часто используемых функций журналирования из встроенной библиотеки console; вы можете добавить больше, если хотите.

По умолчанию Next.js отображает журналы на стороне клиента в производстве, а также в процессе разработки. Это представляет серьезную угрозу безопасности, поскольку мы можем регистрировать конфиденциальные данные. По этой причине нам следует запускать команды console только тогда, когда среда не рабочая, как показано выше.

Тестирование службы регистратора

  1. зайдите в app/page.tsx и очистите весь шаблонный код.
  2. Скопируйте следующий код в app/page.tsx
"use client"

import { useEffect } from "react"
import { Logger } from "path-to-your-Logger-Service"

export default function page() {
  useEffect(() => {
    Logger.clear()
    Logger.debug("debug")
    Logger.warn("warning")
    Logger.error("error")
    Logger.tabulate([{ item1: "item1" }, { item2: "item2" }])
  }, [])

  return <div>Hello world</div>
}

Этот код должен выполнить все пять Logger static methods, которые мы определили внутри консоли на стороне клиента, поскольку мы пометили компонент директивой "use client".

3. Запустите следующую команду, чтобы запустить сервер разработки:

npm run dev

4. Затем посетите localhost:3000/, чтобы увидеть свою страницу; нажмите F12 на клавиатуре или ctrl-shift-i, чтобы открыть консоль разработчика клиента.

5. Обновите страницу с помощью F5, и вы должны увидеть аналогичный вывод на консоль:

И это все!

Теперь вы можете постоянно обновлять файл Logger.ts, добавляя в него другие функции ведения журнала, такие как console.time и console.dir, в соответствии с вашими потребностями.

Теперь у вас есть надежная система отладки, которая реагирует только на вас, разработчика, а не на пользователей вашего приложения, что значительно повышает безопасность и целостность данных вашего приложения.

Надеюсь, вам понравился этот урок, следите за обновлениями! 👍

Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.