Express 5: إيه اللي اتغيّر، وإزاي تنقل مشروع قديم

01 / ملخص الدرس

الـ async errors بقت بتوصل للـ error handler لوحدها. صيغة الـ paths الجديدة (path-to-regexp 8): :id? بقت {/:id}، و * بقت *name، والـ regex اتشالت. التغييرات الساكتة اللي ما بترميش error: res.json(201, x) و res.send(404) و redirect("back") و req.body بقت undefined من غير body parser، و req.query بالـ parser البسيط. وخطة نقل عملية.

ضمن مسارباك إند Node.js للإنتاج — من تحت الصفر24 / 122

02 / شرح الدرس مكتوبًا

نص شرح المعلم والكود الذي كتبه ونتيجة تشغيله، بنفس ترتيب الدرس.

أهلًا بيك. Express خمسة نزلت بعد عشر سنين من أربعة، وأغلب الـ tutorials والـ projects اللي هتقابلها لسه مكتوبة لأربعة. فلازم تعرف الفروق، لأن بعضها بيرمي error وقت التشغيل، وده سهل، وبعضها ساكت: الـ code بيشتغل بس بيعمل حاجة غلط، وده الخطر. نبدأ بالـ paths: code مكتوب لأربعة: id اختياري بـ question mark، و star لكل حاجة. نشغّل.

server.js

import express from "express";

const app = express();

// code مكتوب لـ Express 4
app.get("/users/:id?", (req, res) => res.json({ id: req.params.id ?? "all" }));
app.get("*", (req, res) => res.status(404).json({ error: "مش موجود" }));

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js

/home/you/my-backend/node_modules/path-to-regexp/dist/index.js:130
                throw new PathError(`Unexpected ${value} at index ${index - 1}`, str);
                      ^

PathError [TypeError]: Unexpected ? at index 10: /users/:id?; visit https://git.new/pathToRegexpError for info
    at consumeUntil (/home/you/my-backend/node_modules/path-to-regexp/dist/index.js:130:23)
    at parse (/home/you/my-backend/node_modules/path-to-regexp/dist/index.js:140:26)
    at process (/home/you/my-backend/node_modules/path-to-regexp/dist/index.js:263:56)
    at pathToRegexp (/home/you/my-backend/node_modules/path-to-regexp/dist/index.js:274:5)
    at Object.match (/home/you/my-backend/node_modules/path-to-regexp/dist/index.js:225:30)
    at matcher (/home/you/my-backend/node_modules/router/lib/layer.js:86:23)
    at new Layer (/home/you/my-backend/node_modules/router/lib/layer.js:93:62)
    at router.route (/home/you/my-backend/node_modules/router/index.js:428:17)
    at app.route (/home/you/my-backend/node_modules/express/lib/application.js:257:22)
    at app.<computed> [as get] (/home/you/my-backend/node_modules/express/lib/application.js:478:22) {
  originalPath: '/us
…

الـ server ما قامش أصلًا: TypeError: Unexpected question mark. Express خمسة بتستخدم path-to-regexp إصدار تمانية، واتشال منها: علامة الاستفهام للاختياري. الـ star من غير اسم. والـ regex جُوّه الـ path. والسبب أمني: الـ regex دي كانت بتعمل مشكلة اسمها ReDoS، path معمول مخصوص يخلي الـ server يلف في الـ regex لدقايق. نفس الـ routes بالصيغة الجديدة. نشغّل.

server.js

import express from "express";

const app = express();

// Express 5: الاختياري بـ {} والـ wildcard ليه اسم
app.get("/users{/:id}", (req, res) => res.json({ id: req.params.id ?? "all" }));
app.get("/*splat", (req, res) => res.status(404).json({ error: "مش موجود" }));

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ GET /users
← 200 OK
{
  "id": "all"
}

→ GET /users/7
← 200 OK
{
  "id": "7"
}

→ GET /anything/else
← 404 Not Found
{
  "error": "مش موجود"
}

اشتغلت: all، وسبعة، والـ four oh four. دلوقتي الأخطر: التغييرات الساكتة. كل سطر هنا كان صح في Express أربعة: res dot json بـ status في الأول. res dot send برقم. redirect لـ back. قراية req dot body من غير express dot json. والـ query فيها nested و array. نشغّل.

server.js

import express from "express";

const app = express();

// كل سطر هنا كان شغال صح في Express 4
app.post("/orders", (req, res) => res.json(201, { id: 7 }));
app.get("/gone", (req, res) => res.send(404));
app.get("/back", (req, res) => res.redirect("back"));
app.post("/echo", (req, res) => res.json({ name: req.body.name }));
app.get("/search", (req, res) => res.json(req.query));

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ POST /orders
← 200 OK
201

→ GET /gone
← 200 OK
404

→ GET /back
← 302 Found
  connection: keep-alive
  content-length: 26
  content-type: text/plain; charset=utf-8
  keep-alive: timeout=5
  location: back
  vary: Accept
  x-powered-by: Express
Found. Redirecting to back

→ POST /echo
  {"name":"مُنى"}
TypeError: Cannot read properties of undefined (reading 'name')
    at file:///home/you/my-backend/server.js:9:59
    at Layer.handleRequest (/home/you/my-backend/node_modules/router/lib/layer.js:152:17)
    at next (/home/you/my-backend/node_modules/router/lib/route.js:157:13)
    at Route.dispatch (/home/you/my-backend/node_modules/router/lib/route.js:117:3)
    at handle (/home/you/my-backend/node_modules/router/index.js:435:11)
    at Layer.handleRequest (/home/you/my-backend/node_modules/router/lib/layer.js:152:17)
    at /home/you/my-backend/node_modules/router/index.js:295:15
    at processParams (/home/you/my-backend/node_modules/router/index.js:582:12)
    at next (/home/you/my-backend/node_modules/router/index.js:291:5)
    at router.handle (/home/you/my-backend/node_modules/router/index.js:186:3)
← 500 Internal Server Error
<!DOCTY
…

orders: two hundred، والـ body هو الرقم two oh one! مش الـ object. gone: two hundred، والـ body four oh four كنص. back: redirect لـ location اسمها back حرفيًا، يعني المتصفح هيروح على slash back. echo: five hundred، لأن req dot body بقت undefined من غير parser، وقرينا name منها. و search: filter role ما اتحوّلتش object زي زمان، فضلت key بالـ brackets، والـ tag بقت array. ولا واحد فيهم رمى error وقت ما الـ server قام. ودي اللي بتتسرب للإنتاج. التصليح، وزودنا الميزة الأهم في Express خمسة: async function رمت error؟ بيوصل للـ error handler لوحده. في أربعة كان لازم try و catch و next في كل route، أو مكتبة زي express-async-errors، وإلا الـ server يقع أو الـ request يعلّق. نشغّل.

server.js

import express from "express";

const app = express();
app.use(express.json());

app.post("/orders", (req, res) => res.status(201).json({ id: 7 }));
app.get("/gone", (req, res) => res.sendStatus(404));
app.get("/back", (req, res) => res.redirect(req.get("Referer") || "/"));
app.post("/echo", (req, res) => res.json({ name: req.body?.name ?? null }));
app.get("/search", (req, res) => res.json(req.query));

// async errors بتوصل للـ error handler لوحدها في Express 5
app.get("/crash", async () => {
  throw new Error("الـ database مش بترد");
});
app.use((err, req, res, next) => {
  res.status(500).json({ error: err.message });
});

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ POST /orders
← 201 Created
{
  "id": 7
}

→ GET /gone
← 404 Not Found
Not Found

→ POST /echo
  {"name":"مُنى"}
← 200 OK
{
  "name": "مُنى"
}

→ GET /crash
← 500 Internal Server Error
{
  "error": "الـ database مش بترد"
}

two oh one بالـ object. four oh four، والـ body Not Found. مُنى. والـ crash: five hundred من الـ error handler، والـ server لسه شغال. خطة النقل في أي مشروع: نزّل Express خمسة في branch. نشغّل الـ server: أي path غلط هيرمي فورًا، صلّحه. دوّر بالـ search على res dot json بـ comma بعد رقم، و res dot send برقم، و back، و req dot param. نشغّل الـ tests كلها. وشيل express-async-errors لو موجودة. التحدي: انقل الملف القديم. هلزقلك server مكتوب لـ Express أربعة، فيه خمس مشاكل: path اختياري قديم، و send برقم، و json بـ status، و POST بيقع لو مفيش title، و redirect لـ back، و star. صلّحهم كلهم على خمسة. سبع حالات اختبار في الكومنت.

تمرين

صلّح server.js لـ Express 5: {/:id}، و 404 بـ JSON، و status(201).json، و 400 لو مفيش title، و redirect(301, "/posts")، و 404 في الآخر بـ app.use.

الحل. curly braces للـ id. status four oh four بـ json. title بـ optional chaining، ولو مش موجود four hundred. status two oh one. redirect three oh one لـ slash posts. و app dot use في الآخر بدل الـ star. نشغّل.

server.js

import express from "express";

const app = express();
app.use(express.json());

const posts = [{ id: 1, title: "أول بوست" }];

app.get("/posts{/:id}", (req, res) => {
  if (!req.params.id) return res.json(posts);
  const post = posts.find((p) => p.id === Number(req.params.id));
  if (!post) return res.status(404).json({ error: "مش موجود" });
  res.json(post);
});

app.post("/posts", (req, res) => {
  const title = req.body?.title;
  if (!title) return res.status(400).json({ error: "title مطلوب" });
  const post = { id: posts.length + 1, title };
  posts.push(post);
  res.status(201).json(post);
});

app.get("/old-feed", (req, res) => res.redirect(301, "/posts"));

app.use((req, res) => res.status(404).json({ error: "مش موجود" }));

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ GET /posts
← 200 OK
[
  {
    "id": 1,
    "title": "أول بوست"
  }
]

→ GET /posts/1
← 200 OK
{
  "id": 1,
  "title": "أول بوست"
}

→ GET /posts/9
← 404 Not Found
{
  "error": "مش موجود"
}

→ POST /posts
  {"title":"تاني"}
← 201 Created
{
  "id": 2,
  "title": "تاني"
}

→ POST /posts
  {}
← 400 Bad Request
{
  "error": "title مطلوب"
}

→ GET /old-feed
← 301 Moved Permanently
  connection: keep-alive
  content-length: 40
  content-type: text/plain; charset=utf-8
  keep-alive: timeout=5
  location: /posts
  vary: Accept
  x-powered-by: Express
Moved Permanently. Redirecting to /posts

→ GET /nope
← 404 Not Found
{
  "error": "مش موجود"
}

السبعة زي الاختبار، والـ redirect رجّع three oh one و location slash posts. الدرس الجاي: الـ middleware بالتفصيل، ودورة حياة الـ request جُوّه Express.

03 / دروس المسار (122)