In a year-long effort with over 1,100 files and 95,000 lines of code, Sentry converted 100% of its frontend React codebase from JavaScript to TypeScript.

Recently, Sentry converted 100% of its frontend React codebase from JavaScript to TypeScript. This year-long effort spanned over a dozen members of the engineering team, 1,100 files, and 95,000 lines of code.

In this blog post, we share our process, techniques, challenges, and ultimately, what we learned along this journey.

The Pitch

Back in 2019, we were shipping more frontend bugs than was acceptable. After looking at the underlying causes of these incidents, it became clear that many of these bugs could have been prevented by static analysis and type checking.

During that year’s Hackweek event, Lyn Nagara, Alberto Leal, and Daniel Griesser pitched introducing TypeScript to the Sentry frontend. This team bootstrapped the TypeScript compiler to our build process as well as converted a few non-trivial views — and their related components — to TypeScript.

Hackweek is an event that takes place once a year, giving all Sentry employees the opportunity to set aside their usual work to focus solely on innovative projects and ideas. Hackweek has given birth to numerous applications and tools that are now important parts of our product, like the recently launched Dark Mode project.

Typescript project presentation during Hackweek 2019.

After considering the presentation, we felt Typescript was a strong fit for Sentry because:

• Several classes of bugs could be detected — and eliminated — during compilation.
• We could improve the developer experience through editor integrations such as auto-completion, faster code navigation, and inline compiler feedback.
• We could reduce the need for API documentation, as type annotations help produce self-describing code.
• TypeScript has an active community with a clear and maintained development  roadmap in addition to rapid  releases.
• Many of the libraries we use (including React) already have  type definitions available.
• TypeScript can be adopted incrementally. That meant we can start writing new code with TypeScript and incrementally convert over time.

#javascript #react #typescript #frontend #developer experience #code conversion