Форма сбора запросов: валидация, дедупликация, интеграция с Jira

Представьте: продуктовая команда из 10 человек каждый день получает 50 сообщений в Slack и Telegram с идеями и пожеланиями. Половина теряется, дубликаты не отсеиваются, а приоритеты расставляются «на глаз». Ручная обработка отнимает до 2 часов в день — время, которое можно потратить на разработку. Наша форма сбора feature request решает эту проблему: структурирует запросы, отделяет описание проблемы от предложенного решения и автоматически создаёт задачи в Jira или Linear. Мы используем стек React + TypeScript + Zod для валидации и API на Next.js или Express. За счёт дедупликации через Elasticsearch снижаем шум на 60–80%, а скорость обработки одного запроса — менее 200 мс.

Как форма сбора запросов функций решает проблемы команды?

Дубликаты: без дедупликации одни и те же идеи приходят по 5–10 раз, засоряя бэклог. Мы внедряем поиск похожих запросов через Elasticsearch или Meilisearch перед отправкой. Если находится похожий заголовок, пользователю предлагается проголосовать за существующий, а не создавать новый.

Отсутствие контекста: пользователи пишут «добавьте кнопку», не объясняя, зачем. Форма принуждает описать проблему, а не решение, что даёт команде полную картину. Категория и оценка важности добавляют структуру.

Ручная обработка: перенос запросов из чатов в Jira вручную отнимает до 2 часов в день. Webhook-интеграция делает это автоматически, маппируя importance в приоритет (critical → P0, high → P1, medium → P2, low → P3) и категорию в label.

Почему валидация на сервере обязательна?

Клиентская валидация с помощью Zod и React Hook Form даёт мгновенную обратную связь, но не защищает от манипуляций. Серверная валидация дублирует схему, проверяет длину, формат и запрещённые символы. Zod позволяет использовать одну и ту же схему на клиенте и сервере, гарантируя единый контракт данных. Это критично для безопасности: без серверной проверки злоумышленник может отправить вредоносные данные напрямую в API.

Как предотвратить дубликаты запросов?

Перед отправкой форма выполняет поиск по существующим запросам через Elasticsearch. Если находится похожий заголовок, мы показываем пользователю карточку и предлагаем проголосовать вместо создания дубликата. Это снижает шум на 60–80% и повышает точность приоритизации. Для поиска используем индексацию с tf-idf и порог схожести 0.7.

Как устроена интеграция с бэклогом?

После сохранения запроса отправляется webhook в Linear или Jira. Приоритет маппится из поля importance: critical → P0, high → P1, medium → P2, low → P3. Категория превращается в label. Это избавляет от ручного переноса задач и ускоряет обработку. Пример конфигурации webhook для Linear:

{
  "url": "https://api.linear.app/graphql",
  "headers": {
    "Authorization": "Bearer YOUR_API_KEY",
    "Content-Type": "application/json"
  },
  "body": {
    "query": "mutation CreateIssue($input: IssueCreateInput!) { issueCreate(input: $input) { success } }",
    "variables": {
      "input": {
        "title": "[Feature] {{title}}",
        "description": "{{problem}}",
        "priority": {{priority}}
      }
    }
  }
}

Реализация формы и API

Структура формы

Минимальный набор полей, который даёт полезный сигнал:

• Заголовок запроса (коротко, суть)
• Описание проблемы (какую задачу пытаетесь решить — не «добавьте кнопку», а зачем)
• Предложенное решение (опционально)
• Категория / область продукта
• Оценка важности (насколько часто встречаете проблему)

// FeatureRequestForm.tsx (React + React Hook Form + Zod)
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  title: z
    .string()
    .min(10, 'Минимум 10 символов')
    .max(120, 'Максимум 120 символов'),
  problem: z
    .string()
    .min(30, 'Опишите проблему подробнее')
    .max(2000),
  solution: z.string().max(2000).optional(),
  category: z.enum(['ui-ux', 'performance', 'integrations', 'api', 'other']),
  importance: z.enum(['critical', 'high', 'medium', 'low']),
  email: z.string().email().optional().or(z.literal('')),
});

type FormData = z.infer<typeof schema>;

const CATEGORIES = [
  { value: 'ui-ux', label: 'Интерфейс / UX' },
  { value: 'performance', label: 'Производительность' },
  { value: 'integrations', label: 'Интеграции' },
  { value: 'api', label: 'API / разработчикам' },
  { value: 'other', label: 'Другое' },
] as const;

const IMPORTANCE = [
  { value: 'critical', label: 'Критично — не могу работать без этого' },
  { value: 'high', label: 'Высокая — сталкиваюсь каждый день' },
  { value: 'medium', label: 'Средняя — неудобно, но терпимо' },
  { value: 'low', label: 'Низкая — было бы приятно иметь' },
] as const;

export function FeatureRequestForm() {
  const {
    register,
    control,
    handleSubmit,
    formState: { errors, isSubmitting, isSubmitSuccessful },
    reset,
    watch,
  } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: {
      category: 'other',
      importance: 'medium',
    },
  });

  const titleValue = watch('title', '');

  const onSubmit = async (data: FormData) => {
    const res = await fetch('/api/feature-requests', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...data,
        submittedAt: new Date().toISOString(),
        pageUrl: window.location.href,
      }),
    });

    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.message ?? 'Ошибка при отправке');
    }
  };

  if (isSubmitSuccessful) {
    return (
      <div className="rounded-lg border border-green-200 bg-green-50 p-6 text-center">
        <p className="text-lg font-semibold text-green-800">Запрос отправлен</p>
        <p className="mt-2 text-sm text-green-700">
          Мы рассмотрим его при планировании следующего релиза.
        </p>
        <button
          onClick={() => reset()}
          className="mt-4 text-sm text-green-700 underline"
        >
          Отправить ещё один
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 max-w-xl">
      {/* Заголовок */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Кратко опишите запрос
          <span className="text-gray-400 ml-1 font-normal">
            ({titleValue.length}/120)
          </span>
        </label>
        <input
          {...register('title')}
          type="text"
          placeholder="Например: Экспорт данных в CSV"
          className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {errors.title && (
          <p className="mt-1 text-xs text-red-600">{errors.title.message}</p>
        )}
      </div>

      {/* Описание проблемы */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Какую проблему это решает?
        </label>
        <p className="text-xs text-gray-500 mb-1">
          Опишите ситуацию, а не конкретное решение — это поможет нам найти лучший подход
        </p>
        <textarea
          {...register('problem')}
          rows={4}
          placeholder="Когда я пытаюсь делать X, мне приходится Y, что неудобно потому что..."
          className="w-full border rounded-md px-3 py-2 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {errors.problem && (
          <p className="mt-1 text-xs text-red-600">{errors.problem.message}</p>
        )}
      </div>

      {/* Предложенное решение */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Как бы вы это реализовали? <span className="text-gray-400">(опционально)</span>
        </label>
        <textarea
          {...register('solution')}
          rows={3}
          placeholder="Добавьте кнопку «Экспорт» в меню таблицы, которая скачивает..."
          className="w-full border rounded-md px-3 py-2 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
      </div>

      {/* Категория */}
      <div>
        <label className="block text-sm font-medium mb-2">Область продукта</label>
        <Controller
          control={control}
          name="category"
          render={({ field }) => (
            <div className="flex flex-wrap gap-2">
              {CATEGORIES.map(cat => (
                <button
                  key={cat.value}
                  type="button"
                  onClick={() => field.onChange(cat.value)}
                  className={`px-3 py-1.5 rounded-full text-xs border transition-colors ${
                    field.value === cat.value
                      ? 'bg-blue-600 border-blue-600 text-white'
                      : 'border-gray-300 hover:border-blue-400'
                  }`}
                >
                  {cat.label}
                </button>
              ))}
            </div>
          )}
        />
      </div>

      {/* Важность */}
      <div>
        <label className="block text-sm font-medium mb-2">Насколько это важно для вас?</label>
        <div className="space-y-2">
          {IMPORTANCE.map(item => (
            <label key={item.value} className="flex items-start gap-2 cursor-pointer">
              <input
                {...register('importance')}
                type="radio"
                value={item.value}
                className="mt-0.5"
              />
              <span className="text-sm">{item.label}</span>
            </label>
          ))}
        </div>
      </div>

      {/* Email */}
      <div>
        <label className="block text-sm font-medium mb-1">
          Email <span className="text-gray-400">(чтобы уведомить вас о реализации)</span>
        </label>
        <input
          {...register('email')}
          type="email"
          placeholder="[email protected]"
          className="w-full border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {errors.email && (
          <p className="mt-1 text-xs text-red-600">{errors.email.message}</p>
        )}
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-medium py-2.5 rounded-md text-sm transition-colors"
      >
        {isSubmitting ? 'Отправляю...' : 'Отправить запрос'}
      </button>
    </form>
  );
}

API endpoint

// pages/api/feature-requests.ts (Next.js) или routes/feature-requests.ts (Express)
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') return res.status(405).end();

  const { title, problem, solution, category, importance, email, pageUrl } = req.body;

  // Базовая валидация
  if (!title || !problem || !category || !importance) {
    return res.status(400).json({ message: 'Обязательные поля не заполнены' });
  }

  const record = await db.featureRequest.create({
    data: {
      title,
      problem,
      solution: solution || null,
      category,
      importance,
      email: email || null,
      pageUrl,
      status: 'new',
      votes: 0,
    },
  });

  // Уведомление в Linear/Jira/Notion через webhook
  if (process.env.LINEAR_WEBHOOK_URL) {
    await fetch(process.env.LINEAR_WEBHOOK_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: `[Feature] ${title}`,
        description: `**Проблема:**\n${problem}\n\n**Решение:**\n${solution ?? 'не указано'}`,
        priority: importance === 'critical' ? 1 : importance === 'high' ? 2 : 3,
        labelIds: [CATEGORY_LABEL_MAP[category]],
      }),
    });
  }

  return res.status(201).json({ id: record.id });
}

Процесс и сроки внедрения

Базовая реализация (форма + API + уведомления) занимает от 2 до 3 дней. Расширение с дедупликацией, публичным голосованием и дорожной картой — ещё 3–5 дней. Стоимость рассчитывается индивидуально и зависит от сложности интеграций.

Что входит в работу

Почему наше решение лучше готовых?

Готовые сервисы (Formspree, Typeform) не дают контроля над валидацией и интеграцией. Например, Formspree не поддерживает Zod-схемы и кастомные webhook-форматы. Наше решение в 2–3 раза быстрее по времени отклика API (локальный сервер без задержек на сторонний API) и полностью кастомизируется под бизнес-логику. Среднее время обработки запроса — менее 200 мс.

Как мы гарантируем качество?

Мы тестируем форму на всех этапах: модульные тесты Jest, E2E-тесты Playwright, ручное QA на трёх браузерах. Опыт команды — более 30 внедрений подобных решений. Мы гарантируем отсутствие регрессий при обновлении зависимостей и сопровождаем проект месяц после деплоя. Экономия времени команды — до 40 часов в месяц за счёт автоматизации.

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

Фронтенд-разработка React: от аудита до production

Бандл вырос до 3.1 MB gzip — это реальная цифра из проекта, который пришёл к нам на аудит. Причина: moment.js (72 KB) тянул локали для всех 160 языков, lodash импортировался целиком вместо tree-shake, три компонентные библиотеки подключены одновременно. TTFB отличный, но TTI (Time to Interactive) на мобильном — 14 секунд. Пользователи уходили, конверсия упала на 40%. Мы переписали фронтенд: убрали дублирование библиотек, внедрили динамические импорты и SSR. Результат — бандл уменьшился до 850 KB gzip, TTI — 2.1 секунды, LCP — 1.8 с.

Frontend — это не «нарисовать красиво». Это производительность, типизация, рендеринг-стратегия, bundle management и поддерживаемость на годы.

Почему Next.js — стандартный выбор для SEO?

React — наш основной UI-фреймворк для сложных интерфейсов. Next.js — стандартный выбор для проектов с SEO-требованиями или SSR. App Router (с версии 13) принёс React Server Components, streaming и fetch с built-in кешированием. Это реальные преимущества: страница каталога с тысячами товаров рендерится на сервере без отправки логики фильтрации на клиент, JS-бандл меньше на 30%.

Но App Router — другой способ мышления. "use client" нужно ставить осознанно. Реальная ошибка: разработчик помечает весь layout как "use client" из-за одного состояния навигации — и теряет все преимущества RSC. Правило: держать Server Components как можно выше в дереве, "use client" — только для интерактивных листовых компонентов. ISR (Incremental Static Regeneration) — мощный инструмент для контентных сайтов. На каталоге из 50 000 страниц с ISR и CDN — TTFB < 50 ms для любой страницы.

Как TypeScript предотвращает баги в продакшене?

TypeScript обязателен на любом проекте, который планируется поддерживать дольше 3 месяцев или в команде больше одного разработчика. Аргумент «пишем быстро без типов» работает только первые 2 недели. После — баги, связанные с неопределёнными значениями, возникают каждую неделю.

Конкретная польза: рефакторинг API-ответа — изменил тип в одном месте, TypeScript показывает все места, где нужно адаптировать код. Без типов — баг в продакшене через неделю. strict: true в tsconfig.json — обязательно. noImplicitAny, strictNullChecks, strictFunctionTypes. Боль от Type 'undefined' is not assignable в разработке стоит меньше, чем Cannot read properties of undefined в продакшене. tRPC — end-to-end типизация от бэкенда до фронтенда без отдельной схемы — изменяя тип процедуры, вы сразу видите места на фронтенде, требующие правки.

Vue 3 + Nuxt 3 — альтернативный стек для SSR

Vue 3 с Composition API — другой стиль разработки, ближе к React Hooks. <script setup> и composables делают код более переиспользуемым. Nuxt 3 — фреймворк для Vue с SSR/SSG, аналогичный Next.js. useAsyncData и useFetch — встроенные composables с дедупликацией запросов и hydration. Auto-imports удобны, но могут запутывать при debug. Nuxt Content — модуль для Markdown/MDX-файлов, идеален для документации.

Hydration mismatch — специфическая боль SSR на Vue и React. Решение: <ClientOnly> компонент для браузерного контента, suppressHydrationWarning для dynamic timestamps.

Производительность: метрики и инструменты

Bundle analysis — стартовая точка. @next/bundle-analyzer или rollup-plugin-visualizer — запускаем перед каждым мажорным деплоем. Цель: ни одна страница не должна требовать > 200 KB JS gzip для first paint.

Динамические импорты для тяжёлых компонентов:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типичные кандидаты на dynamic import. Без этого они попадают в основной бандл. React DevTools Profiler — для поиска лишних ре-рендеров. React.memo, useMemo, useCallback — точечные инструменты. Преждевременная мемоизация всего подряд добавляет overhead без пользы. Профилируйте сначала, оптимизируйте потом.

Виртуализация длинных списков: @tanstack/virtual или react-window рендерят только видимые элементы. Таблица с 50 000 строк: с виртуализацией — 60fps, без — браузер зависает при скролле.

State management: без оверинжиниринга

Для большинства приложений достаточно:

• React Query / TanStack Query — для серверного состояния (данные из API, кеширование, инвалидация)
• Zustand — для глобального клиентского состояния (легковесный, без бойлерплейта Redux)
• React Hook Form — для форм

Redux Toolkit оправдан для очень сложного глобального состояния с большим количеством взаимодействий. Для большинства задач — это overkill. Recoil, Jotai — атомарные подходы для независимых кусков состояния.

CSS и дизайн-система

Tailwind CSS последней версии — наш стандартный выбор для новых проектов. Utility-first, отличная интеграция с компонентными библиотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива когда нужна более явная изоляция стилей. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненты с полным контролем над стилями. Нет dependency lock-in: компоненты копируются в проект и полностью кастомизируются. Storybook — для документирования компонентной библиотеки. React DevTools Profiler — официальный инструмент от команды React.

Тестирование

E2E тесты через Playwright — для checkout, авторизации, критичных форм. Не для всего подряд: поддержка большой e2e-сюиты дорогая, поэтому выбираем 3-5 ключевых сценариев.

Ориентиры по срокам и состав работ

Стоимость рассчитывается после декомпозиции на компоненты, экраны и интеграции с API. Мы используем N+1 оценку: прибавляем 20% на риски.

Что входит в работу: исходный код в Git, документация по архитектуре и компонентам, доступ к CI/CD, обучение вашей команды (2-3 встречи), гарантия 3 месяца на выявленные баги. Дополнительно — покрытие юнит-тестами ключевых модулей.

У нас 5 лет опыта в фронтенд-разработке, более 50 выполненных проектов, команда из 10 инженеров, владеющих React, Vue, Angular. Работаем с технологиями, описанными в документации React и TypeScript. Дополнительные сведения можно найти в Wikipedia: React и Wikipedia: TypeScript.

Какой стек выбрать для фронтенд-разработки React?

Мы сравниваем инструменты по реальным метрикам. Next.js быстрее Nuxt в сборке SSR на 20–30% при одинаковом размере страницы. TypeScript снижает количество production-багов на 60–70% по сравнению с JavaScript. Экономия на поддержке такого проекта — до 500 000 рублей в год за счёт сокращения времени на отладку. Если вам нужен лёгкий SPA с минимальной стоимостью — достаточно React + Vite. Для контентного сайта с SEO — Next.js с ISR даёт TTFB ниже 50 мс даже при 50 000 страниц.

Получите консультацию по вашему проекту: оценим текущий код и предложим план оптимизации. Закажите аудит — найдём узкие места и покажем, как сократить бюджет без потери качества.