"Update Version" คำสั้น ๆง่าย ๆแต่อาจจะทำให้หลาย ๆคนต้องปวดหัว
updated at: 20 Jan 2024
ทุกอย่างก็ควรมีการพัฒนา ต้องมีการเปลี่ยนแปลงไปในทางที่ดีขึ้น(มั้ง) และในโลกของซอฟต์แวร์ สิ่งที่เป็นเรื่องปกติอย่างหนึ่งก็คือการอัพเกรดเวอร์ชั่น เวอร์ชันใหม่อาจจะมีฟีเจอร์ใหม่ ๆมาให้เราใช้งาน อาจจะมีการแก้ปัญหาของเวอร์ชันที่แล ้ว หรืออาจจะเป็นการยกเครื่อง core หลักของระบบใหม่ด้วย ซอฟต์แวร์ที่ถูกอัพเดทนั้นอาจจะเป็นส่วนหนึ่งของอีกซอฟต์แวร์หนึ่งก็เป็นเรื่องปกติเช่นกัน อย่างเช่น เว็บไซต์หนึ่งใช้งานระบบ "Google Sign-in", เว็บไซต์ Facebook ใช้ React ในการเขียนเว็บ, เว็บไซต์ PageSpeed Insights ใช้ Lighthouse ในการวัด performance (หากใครสนใจเกี่ยวกับเรื่อง Website Performance สามารถตามไปอ่านได้ ที่นี่) ฯลฯ เว็บไซต์นี้ก็ใช้ Gatsby ครับ แล้วมันก็มีการอัพเกรดเวอร์ชันเป็น 5 เป็นที่เรียบร้อย และแน่นอนว่าเวอร์ชันที่ใช้ก็คือ 4 นั่นเอง ดังนั้นก็เลยเป็นโอกาสอันดีที่จะพาทุกคนไปดูว่า แค่ผมจะอัพเกรดมันให้เป็นเวอร์ชัน 5 นั้น ผมต้องทำอะไรบ้าง...
ทำความเข้าใจกับ Semantic Versioning
ก่อนอื่น ผมอยากให้ทำความเข้าใจกับ Semantic Versioning กันก่อน สามารถอ่านได้ ที่นี่
การอัพเกรดเวอร์ชันของซอฟต์แวร์ต้องทำอะไรบ้าง?
อันดับแรกสุดเลยก็คือ "การหาข้อมูล" เกี่ยวกับซอฟต์แวร์ที่เราจะทำการอัพเดทครับ โดยปกติแล้วเราจะสามารถอ่านเกี่ยวกับข้อควรระวังและขั้นตอน ต่าง ๆในการอัพเดทเวอร์ชันนั้น ๆได้ใน document ของซอฟต์แวร์(แต่ถ้าไม่มีก็อาจจะต้องใช้ประสบการณ์และดวงอยู่สักหน่อยในการอัพเดท 😅) การหาข้อมูลจะช่วยให้เราเข้าใจขั้นตอนการอัพเดทเวอร์ชันของซอฟต์แวร์นั้น ๆที่ถูกต้อง รวมถึงข้อควรระวังในการอัพเดท
ปัญหาที่จะเจอก็มักจะเป็นเรื่องของ compatibility หรือความเข้ากันได้ระหว่างซอฟต์แวร์ที่เราใช้ เช่น
เครื่องของเราติดตั้ง NodeJS เวอร์ชัน 14
มี package A ที่เวอร์ชัน 1.2.0 รองรับ NodeJS เวอร์ชัน >=14 และ <=16
มี package B ที่เวอร์ชัน 2.1.0 รองรับ NodeJS เวอร์ชัน >=12 และ <= 14
ดังนั้นหากเราอัพเกรด NodeJS ไปเป็น เวอร์ชัน 16 สิ่งที่อาจจะเกิดขึ้นก็คือ package B จะมีสิทธิ์ที่จะทำงานผิดพลาดหรืออาจจะทำงานไม่ได้เลย (บาง package ก็จะมีการเขียนกฎบางอย่างซึ่งเจาะจงเวอร์ชันของ NodeJS ไปเลย หากเราใช้เวอร์ชันที่ไม่ตรงตามที่กำหนด มันก็จะรันไม่ขึ้นตั้งแต่แรกเลย เช่น การกำหนด engines ใน package.json)
จากที่ยกตัวอย่างไปด้านบนนั้นเป็นแค่เคสพื้นฐาน ซึ่งในความเป็นจริงแล้วซอฟต์แวร์ต่าง ๆนั้นก็จะมี package ย่อย ๆข้างในอยู่มากกว่า 2 อยู่แล้ว และยิ่งมันมีความเกี่ยวโยงกันมากเท่าไหร่ ความปวดหัวของเราในการที่จะอัพเกรดมันก็จะมากขึ้นเท่านั้น
สิ่งหนึ่งที่ช่วยลดความปวดหัวเวลาที่จะอัพเกรดเวอร์ชันซอฟต์แวร์ของเรานั่นก็คือ การหาเวลามาอัพเกรดเวอร์ชันของสิ่งที่เราใช้อยู่อย่างสม่ำเสมอ ไม่ปล่อยให้มัน outdated เพราะยิ่งเวอร์ชันยิ่งเก่าเท่าไหร่ การที่จะอัพเกรดมันก็จะยากเท่านั้น เปรียบเสมือนปมของเชือกที่ค่อย ๆผูกกันเยอะขึ้นไปเรื่อย ๆ
เริ่มทำการอัพเกรด
สามารถอ่าน ref นี้ประกอบไปด้วยได้นะครับ
- เริ่มจาก NodeJS เวอร์ชันที่ใช้นั้นเป็นเวอร์ชัน 16 แต่ Gatsby เวอร์ชัน 5 นั้นต้องการที่เวอร์ชัน 18 ดังนั้นตอนอัพเกรดก็เลยเจอ error นิดหน่อย แต่ก็แก้ไม่ยากหนิ ก็แค่อัพเกรด NodeJS ไปเป็นเวอร์ชัน 18 ก็เรียบร้อย (แต่บางคนก็น่าจะเริ่มได้กลิ่นของความปวดหัวลอยมาแล้วแน่ ๆ 😂) แต่ไหน ๆก็ไหน ๆแล้ว ผมจะอัพเกรดไปเป็นเวอร์ชัน 20 เลย เพราะคิดว่า Gatsby เวอร์ชันล่าสุดก็ควรที่จะรองรับ NodeJS เวอร์ชันล่าสุดที่เป็น LTS เหมือนกัน 😏
- อัพเกรด React ไปเป็นเวอร์ชัน 18 Gatsby เวอร์ชัน 5 นั้นต้องการ React เวอร์ชันตั้งแต่ 18 ขึ้นไป และเนื่องจากปัจจุบัน ที่ใช้คือเวอร์ชัน 17 ดังนั้นจึงต้องทำการอัพเกรด ในส่วนนี้ยังไม่ติดปัญหาอะไร (เพราะยังไม่ได้ลองรัน!)
- อัพเกรด package ต่าง ๆที่เกี่ยวข้องกับ Gatsby ไปเป็นเวอร์ชันที่รองรับกับ Gatsby เวอร์ชัน 5 ในส่วนนี้ก็จะเป็นงานถึกเพราะเนื่องจากมันมีหลายตัวมาก ก็เลยต้องไล่อัพเกรดกันไปสักพัก
- อัพเกรด package อื่น ๆ
ไหน ๆก็ทำการอัพเกรดเวอร์ชันของ package หลัก ๆไปแล้ว ก็เลยถือโอกาสอัพเกรด package อื่น ๆไปด้วยเลย
มาถึงจุดนี้ก็ได้ทำการอัพเกรด package ต่าง ๆไปเกือบจะหมดเรียบร้อยแล้ว ทีนี้ก็มาลองดูผลลัพธ์กัน
- จริง ๆการอัพเกรด package หลาย ๆตัวพร้อมกันเป็นสิ่งที่ผมไม่แนะนำให้ทำตาม เนื่องจากถ้าเกิดว่ามันเกิดข้อผิดพลาดขึ้นมาบางอย่าง เราอาจจะตรวจสอบได้ยากว่ามันเกิดจาก package ตัวไหนรวมถึงมันอาจจะแก้ไขได้ลำบาก ดังนั้นจึงแนะนำให้อัพเกรดไปที่ละชุดที่เกี่ยวข้องกั นดีกว่าครับ
Pain Points ที่เจอจากการอัพเกรดเวอร์ชัน
หลังจากอัพเกรดเวอร์ชันของ NodeJS และ package ต่าง ๆไป เราก็ต้องทำการลองรันโปรเจคขึ้นมาดูว่ายังใช้งานได้ไหม มีข้อผิดพลาดอะไรไหม และสิ่งแรกที่ผมเจอก็คืออ..
gatsby develop ก็เจอ error ซะแล้วว
ข้อสันนิษฐานของผมก็คือ เนื่องจากผมทำการอัพเกรด NodeJS ขึ้นไป 2 major versions ด้วยการใช้ nvm ซึ่งนอกจ ากมันจะทำการอัพเกรด NodeJS แล้วนั้นมันก็ยังทำการอัพเกรด NPM ที่เป็น Package Manager อีกด้วย ดังนั้นการ resolve dependencies ต่าง ๆอาจจะผิดพลาดหรือไม่ตรงตามที่เราต้องการ ดังนั้นผมเลยลองทำการลบ node_modules และ package-lock.json หลังจากนั้นก็สั่ง
npm install เพื่อให้มัน install/resolve dependencies ทั้งหมดใหม่อีกครั้ง
ผลลัพธ์ที่ได้ก็คือ... รันขึ้นครับ! ก็ถือว่ายังโชคดีที่ไม่ได้ใช้เวลาในการงมปัญหานี้นานเท่าไหร่
หลังจากนั้นก็ลองกด ๆเล่นเว็บไซต์ดูว่าจะเกิดข้อผิดพลาดอะไรระหว่างทางหรือไม่... เมื่อเล่นไปสักพักก็ยังไม่เจออะไรแปลก ๆ ผมก็เลยวางใจได้ระดับหนึ่ง
*FYI: (โดยปกติแล้วถ้าเป็นการทำงานในบริษัทหรือองค์กรขนาดกลางขึ้นไป การอัพเกรดเวอร์ชันต่าง ๆก็อาจจะต้องมีการทำ Regression Testing ที่จริงจังกว่านี้เพื่อค้นหาว่ามีข้อผิดพลาดเกิดขึ้นหรือไม่หลังจากที่ทำการอัพเกรดเวอร์ชัน)
ถัดมาก ็คือ ผมจะลองทำการตรวจสอบ syntax ต่าง ๆรวมถึงเรื่องของ type ของ Typescript ว่ายังคงเขียนได้ถูกต้องหรือไม่เนื่องจากผมได้มีการอัพเกรดเกี่ยวกับ ESLint และ package ต่าง ๆที่ถูกอัพเกรดก็อาจจะมีการเปลี่ยนแปลงในเรื่องของ type ด้วย รวมถึง typescript ผมก็ได้ทำการอัพเกรดจากเวอร์ชัน 4 มันเป็นเวอร์ชัน 5 ด้วย (อัพเกรดเยอะจริง ๆ) ดังนั้นก็มีความเป็นไปได้ที่โค้ดในส่วนต่าง ๆมันจะไม่สอดคล้องกับ ESLint และ Typescript ...โอเคเรามาดูผลลัพธ์กันครับ
สำหรับ ESLint นั้น ก็จะเป็น warning ไม่ได้ถึงขั้นเป็น error แต่สำหรับ typescript ก็มี error เกิดขึ้น โดยทั้งหมดก็จะเป็น error ที่เกี่ยวกับ React ที่จะไม่ทำการใส่ property
children มาให้ใน type แล้ว (ref) ดังนั้นสิ่งที่ต้องทำในที่นี้ก็คือการไปแก้ไขเกี่ยวกับเรื่อง type ของ component ต่าง ๆที่ต้องการใช้งานเกี่ยวกับ property children ให้มีอยู่ใน type ด้วย
สำหรับปัญหาเกี่ยวกับ ESLint และ Typescript ที่เจอก็ยังถือว่าไม่ได้เป็นปัญหาใหญ่ สามารถแก้ไขได้ง่ายและใช้เวลาไม่นาน
ถัดมาผมก็จะทำการทดสอบการ build เพื่อให้ได้ไฟล์ที่จะนำไปอัพเดททับบนเซิร์ฟเวอร์ เพื่อดูว่าสามารถ build ได้เหมือนปกติรึปล่าว... ผลก็คือ "ไม่ได้ครับ" 😅 มี error เกิดขึ้นระหว่างที่ build ตามภาพด้านล่าง
error นี้ผมใช้เวลาหานานมากกว่าจะเจอต้นตอ ซึ่งมันก็คือ package ที่ชื่อว่า
@uiw/react-markdown-preview ซึ่งผมได้ทำการอัพเกรดพร้อมกับ package อื่น ๆไปก่อนหน้านี้จากเวอร์ชัน 4 ไปเป็นเวอร์ 5
ตอนแรกผมคิดว่ามันเกิดจาก package gatsby-plugin-sharp เนื่องจากมันมีบอกว่า job บางอย่างของมันทำงานไม่สำเร็จ ซึ่ง package นี้ผมใช้คู่กับ "gatsby-plugin-image" เพื่อที่จะใช้งาน component "StaticImage" ของมัน แต่หลังจากที่ผมทำการนำโค้ดที่เกี่ยวข้องกับ package นั้นออกไปและทำการ build อีกครั้ง มันก็ยังเกิด error แบบเดิม ดังนั้นถัดมาผมจึงคิดว่าอาจจะเป็นที่ webpack ที่ต้องไปเพิ่ม configuration บางอย่าง... หลังจากลองสักพักก็ยังไม่เวิร์ค มันดันไปเจอ error บางอย่างเพิ่มอีก 😅
ผมก็เลยรีเสิร์ชเพิ่มเติมและก็ได้ไล่ดู package อื่น ๆ จากนั้นก็มาเอะใจ package นั้นเข้า ผมจึงลอง downgrade มันกลับไปเป็นเวอร์ชันก่อนหน้า (เวอร์ชัน 4) แล้วทำการลอง build อีกครั้ง ปรากฎว่ามันผ่านไปได้ด้วยดี ไม่มี error เกิดขึ้นแล้ว ก็เลยสรุปได้ว่าต้นตอของ error ก็คือ package นั้นนั่นเอง (จะเห็นได้ว่านี่ก็เป็นอีกตัวอย่างที่จะทำให้เข้าใจว่าการอัพเกรด package หลาย ๆตัวพร้อมกันนั้นก็มีความเสี่ยงที่จะเกิดปัญหาขึ้นโดยยากที่จะรู้ได้ว่าสาเหตุหรือต้นตอมันมาจากอะไร)
*Disclaimer: จริง ๆแล้วถ้าเป็นไปได้เราควรจะเข้าใจถึงปัญหาที่เกิดขึ้นจริง ๆก่อนเพื่อที่จะแก้ไขมันได้ถูกจุด ซึ่งสิ่งผมทำก็เป็นเพียงการแก้ไขปัญหาเบื้องต้นเท่านั้น ผมตัดสินใจที่จะใช้วิธี "ตัดปัญหาจากต้นลม" แทนที่จะ "ทำความเข้าใจและแก้ไขปัญหาให้ถูกจุด" เนื่องจากผมไม่อยากใช้เวลาไปกับการแก้ปัญหานี้มากจนเกินไปครับ
จะเห็นได้ว่าแค่อัพเกรดเวอร์ชันก็ทำให้เกิดปัญหาตามมาได้ระดับหนึ่งทั้ง ๆที่เรายังไม่ได้ไปปรับเปลี่ยนในส่วนของโค้ดหลักของเราเลย ปัญหาที่ผมเจอนั้นจริง ๆแล้วยังถือว่าไม่ได้เยอะและยิ่งใหญ่จนแก้ไขได้ยาก แต่สำหรับเพื่อน ๆพี่ ๆน้อง ๆบางคนก็อาจจะไม่ได้เป็นแบบนี้เสมอไป ขึ้นอยู่กับว่าระบบที่ดูแลอยู่นั้นมีความซับซ้อนมากน้อยแค่ไหน มีสเกลเท่าไหร่ ใช้ซอฟต์แวร์อื่น ๆเป็นส่วนประกอบมากน้อยแค่ไหน... และที่สำคัญคือดวงคุณดีหรือไม่! 😂
สรุป
สำหรับคนที่อ่านมาถึงตรงนี้ก็น่าจะพอเห็นถึงสิ่งที่ จะเจอ สิ่งที่ต้องระวัง และสิ่งที่ควรทำ/ไม่ควรทำทั้งก่อนและหลังการอัพเกรดเวอร์ชัน ก็หวังว่าบทความนี้จะมีประโยชน์แก่ผู้ที่เข้ามาอ่านนะครับ ^^