getsentry · JoshuaKGoldberg · Apr 17, 2026 · Apr 16, 2026
@@ -783,7 +783,7 @@ export default typescript.config([
       'unicorn/no-invalid-remove-event-listener': 'error',
       'unicorn/no-negated-condition': 'error',
       'unicorn/no-negation-in-equality-check': 'error',
-      'unicorn/no-new-array': 'off', // TODO(ryan953): Fix violations and enable this rule
+      'unicorn/no-new-array': 'error',
       'unicorn/no-single-promise-in-promise-methods': 'warn', // TODO(ryan953): Fix violations and enable this rule
       'unicorn/no-static-only-class': 'off', // TODO(ryan953): Fix violations and enable this rule
       'unicorn/no-this-assignment': 'off', // TODO(ryan953): Fix violations and enable this rule

diff --git a/static/app/actionCreators/projects.spec.tsx b/static/app/actionCreators/projects.spec.tsx
@@ -13,10 +13,14 @@ describe('Projects ActionCreators', () => {
     });
     expect(mock).not.toHaveBeenCalled();
 
-    _debouncedLoadStats(api, new Set([...new Array(50)].map((_, i) => String(i))), {
-      projectId: project.id,
-      orgId: organization.slug,
-    });
+    _debouncedLoadStats(
+      api,
+      new Set([...Array.from({length: 50})].map((_, i) => String(i))),
+      {
+        projectId: project.id,
+        orgId: organization.slug,
+      }
+    );
 
     expect(mock).toHaveBeenCalledTimes(5);
     expect(mock).toHaveBeenLastCalledWith(

diff --git a/static/app/components/checkInTimeline/checkInTimeline.stories.tsx b/static/app/components/checkInTimeline/checkInTimeline.stories.tsx
@@ -54,7 +54,7 @@ function generateMockTickData(
   const buckets = timeWindowConfig.timelineWidth;
   const secondsPerBucket = (timeWindowConfig.elapsedMinutes * 60) / buckets;
 
-  return new Array(timeWindowConfig.timelineWidth)
+  return Array.from({length: timeWindowConfig.timelineWidth})
     .fill(null)
     .map<CheckInBucket<ExampleStatus>>((_, bucketIndex) => {
       const second = Math.floor(bucketIndex * secondsPerBucket);

diff --git a/static/app/components/deprecatedforms/passwordField.tsx b/static/app/components/deprecatedforms/passwordField.tsx
@@ -75,7 +75,8 @@ class PasswordField extends InputField<Props, State> {
     return (
       <div className="form-password saved">
         <span>
-          {this.props.prefix + new Array(21 - this.props.prefix!.length).join('*')}
+          {this.props.prefix +
+            Array.from({length: 21 - this.props.prefix!.length}).join('*')}
         </span>
         {!this.props.disabled && <a onClick={this.startEdit}>Edit</a>}
       </div>

@@ -336,28 +336,30 @@ function DifferentialFlamegraphChangedFunctions(
         onPreviousPageClick={onPreviousPaginationClick}
       />
       {props.loading
-        ? new Array(5).fill(0).map((_, idx) => {
-            return (
-              <DifferentialFlamegraphChangedFunctionContainer key={idx}>
-                <div>
-                  <Placeholder
-                    height="16px"
-                    width="66%"
-                    style={MARGIN_BOTTOM_PLACEHOLDER_STYLES}
-                  />
-                  <Placeholder height="16px" width="48%" />
-                </div>
-                <DifferentialFlamegraphChangedFunctionStats>
-                  <Placeholder
-                    height="16px"
-                    width="32px"
-                    style={RIGHT_ALIGN_PLACEHOLDER_STYLES}
-                  />
-                  <Placeholder height="16px" width="56px" />
-                </DifferentialFlamegraphChangedFunctionStats>
-              </DifferentialFlamegraphChangedFunctionContainer>
-            );
-          })
+        ? Array.from({length: 5})
+            .fill(0)
+            .map((_, idx) => {
+              return (
+                <DifferentialFlamegraphChangedFunctionContainer key={idx}>
+                  <div>
+                    <Placeholder
+                      height="16px"
+                      width="66%"
+                      style={MARGIN_BOTTOM_PLACEHOLDER_STYLES}
+                    />
+                    <Placeholder height="16px" width="48%" />
+                  </div>
+                  <DifferentialFlamegraphChangedFunctionStats>
+                    <Placeholder
+                      height="16px"
+                      width="32px"
+                      style={RIGHT_ALIGN_PLACEHOLDER_STYLES}
+                    />
+                    <Placeholder height="16px" width="56px" />
+                  </DifferentialFlamegraphChangedFunctionStats>
+                </DifferentialFlamegraphChangedFunctionContainer>
+              );
+            })
         : props.functions
             .slice(
               state.page * state.pageSize,

@@ -217,7 +217,7 @@ function getDartFrame(
 }
 
 function ljust(str: string, len: number) {
-  return str + new Array(Math.max(0, len - str.length) + 1).join(' ');
+  return str + Array.from({length: Math.max(0, len - str.length) + 1}).join(' ');
 }
 
 function getNativeFrame(frame: Frame, includeLocation: boolean): string {

@@ -54,7 +54,7 @@ describe('EventTraceView', () => {
         performance_issues: 1,
         projects: 1,
         transactions: 1,
-        transaction_child_count_map: new Array(size)
+        transaction_child_count_map: Array.from({length: size})
           .fill(0)
           .map((_, i) => [{'transaction.id': i.toString(), count: 1}]),
         span_count: 0,

diff --git a/static/app/components/illustrations/NoProjectEmptyState.tsx b/static/app/components/illustrations/NoProjectEmptyState.tsx
@@ -208,13 +208,15 @@ const Smoke = styled('g')`
     animation: ${ploom} 3s infinite;
   }
 
-  ${new Array(3).fill(0).map(
-    (_, i) => css`
-      > :nth-child(${i + 1}) {
-        animation-delay: ${4 + i * 0.2}s;
-      }
-    `
-  )}
+  ${Array.from({length: 3})
+    .fill(0)
+    .map(
+      (_, i) => css`
+        > :nth-child(${i + 1}) {
+          animation-delay: ${4 + i * 0.2}s;
+        }
+      `
+    )}
 `;
 
 export function NoProjectEmptyState({className}: {className?: string}) {

@@ -331,7 +331,7 @@ export function GroupList({
         <GroupListHeader withChart={!!withChart} withColumns={columns} />
         <PanelBody>
           {loading
-            ? [...new Array(numPlaceholderRows)].map((_, i) => (
+            ? [...Array.from({length: numPlaceholderRows})].map((_, i) => (
                 <GroupPlaceholder key={i}>
                   <Placeholder height="50px" />
                 </GroupPlaceholder>

diff --git a/static/app/components/modals/bulkEditMonitorsModal.tsx b/static/app/components/modals/bulkEditMonitorsModal.tsx
@@ -185,7 +185,7 @@ export function BulkEditMonitorsModal({Header, Body, Footer, closeModal}: Props)
           emptyMessage={t('No monitors found')}
         >
           {isPending || !monitorList
-            ? [...new Array(NUM_PLACEHOLDER_ROWS)].map((_, i) => (
+            ? [...Array.from({length: NUM_PLACEHOLDER_ROWS})].map((_, i) => (
                 <RowPlaceholder key={i}>
                   <Placeholder height="20px" />
                 </RowPlaceholder>

@@ -225,13 +225,13 @@ function sortFrameResults(
   // If frames have the same start times, move frames with lower stack depth first.
   // This results in top down and left to right iteration
   let sid = -1;
-  const spans = new Array<SpanChartNode | FlamegraphFrame>(results.spans.size);
+  const spans = Array.from<SpanChartNode | FlamegraphFrame>({length: results.spans.size});
   for (const n of results.spans.values()) {
     spans[++sid] = n.span;
   }
 
   let fid = -1;
-  const frames: FlamegraphFrame[] = new Array(results.frames.size);
+  const frames = Array.from<FlamegraphFrame>({length: results.frames.size});
   for (const n of results.frames.values()) {
     frames[++fid] = n.frame;
   }

@@ -131,9 +131,9 @@ export function SuspectFunctionsTable({
     const frameInfos = flamegraphQuery.data?.shared?.frame_infos ?? [];
     const profileExamples = flamegraphQuery.data?.shared?.profiles ?? [];
 
-    const examples = new Array<Array<Exclude<Profiling.ProfileReference, string>>>(
-      frames.length
-    );
+    const examples = Array.from<
+      Array<Profiling.ContinuousProfileReference | Profiling.TransactionProfileReference>
+    >({length: frames.length});
 
     for (const profile of flamegraphQuery.data?.profiles ?? []) {
       if (isSampledProfile(profile)) {

@@ -25,7 +25,7 @@ function Gridlines({
 }) {
   return (
     <Timeline.Columns totalColumns={cols} remainder={remaining}>
-      {[...new Array(cols)].map((_, i) => (
+      {[...Array.from({length: cols})].map((_, i) => (
         <DarkerLine key={i} lineStyle={lineStyle}>
           {children ? children(i) : null}
         </DarkerLine>

@@ -110,12 +110,13 @@ export const ReplayActivityColumn: ReplayTableColumn = {
       return null;
     }
     const colors = theme.chart.getColorPalette(0);
-    const scoreBarPalette = new Array(10).fill([colors[0]]);
+    const scoreBarPalette = Array.from<string[]>({length: 10}).fill([colors[0]]);
     return (
       <DropdownContainer key="activity">
         <ScoreBar
           size={20}
           score={replay?.activity ?? 1}
+          // @ts-expect-error -- TODO: Resolve this mismatch
           palette={scoreBarPalette}
           radius={0}
         />

diff --git a/static/app/components/scoreBar.tsx b/static/app/components/scoreBar.tsx
@@ -41,10 +41,10 @@ function BaseScoreBar({
 
   return (
     <div className={className} {...props}>
-      {[...new Array(scoreInBounds)].map((_j, i) => (
+      {[...Array.from({length: scoreInBounds})].map((_j, i) => (
         <Bar {...barProps} key={i} color={palette[paletteIndex]} />
       ))}
-      {[...new Array(maxScore - scoreInBounds)].map((_j, i) => (
+      {[...Array.from({length: maxScore - scoreInBounds})].map((_j, i) => (
         <Bar key={`empty-${i}`} {...barProps} empty />
       ))}
     </div>

diff --git a/static/app/components/search/index.spec.tsx b/static/app/components/search/index.spec.tsx
@@ -169,14 +169,16 @@ describe('Search', () => {
     expect(opener.location.href).toBe('https://vandelayindustries.io/import');
   });
   it('renders max search results', async () => {
-    const results: ResultItem[] = new Array(10).fill(0).map((_, i) => ({
-      resultType: 'integration',
-      sourceType: 'organization',
-      title: `${i} Vandelay Industries - Import`,
-      to: 'https://vandelayindustries.io/import',
-      model: {slug: 'vdl-imp'},
-      resolvedTs: 0,
-    }));
+    const results: ResultItem[] = Array.from({length: 10})
+      .fill(0)
+      .map((_, i) => ({
+        resultType: 'integration',
+        sourceType: 'organization',
+        title: `${i} Vandelay Industries - Import`,
+        to: 'https://vandelayindustries.io/import',
+        model: {slug: 'vdl-imp'},
+        resolvedTs: 0,
+      }));
 
     render(
       <Search

diff --git a/static/app/components/search/sources/index.tsx b/static/app/components/search/sources/index.tsx
@@ -61,5 +61,5 @@ export function SearchSources(props: Props) {
     [props, renderResults, sources]
   );
 
-  return renderSources(new Array(sources.length), 0);
+  return renderSources(Array.from({length: sources.length}), 0);
 }
diff --git a/static/app/components/searchSyntax/renderer.tsx b/static/app/components/searchSyntax/renderer.tsx
@@ -81,7 +81,7 @@ function renderToken(token: TokenResult<Token>, cursor: number) {
 // inline elements cannot be transformed. The filter _must_ be inline to
 // support text wrapping.
 const shakeAnimation = keyframes`
-  ${new Array(4)
+  ${Array.from({length: 4})
     .fill(0)
     .map((_, i) => `${i * (100 / 4)}% { left: ${3 * (i % 2 === 0 ? 1 : -1)}px; }`)
     .join('\n')}

diff --git a/static/app/components/slider/index.tsx b/static/app/components/slider/index.tsx
@@ -163,7 +163,9 @@ export function Slider({
 
     if (ticks) {
       const range = max - min;
-      return [...new Array(ticks)].map((_, i) => min + i * (range / (ticks - 1)));
+      return [...Array.from({length: ticks})].map(
+        (_, i) => min + i * (range / (ticks - 1))
+      );
     }
 
     return [];
@@ -266,7 +268,7 @@ export function Slider({
             </SliderTick>
           ))}
 
-          {[...new Array(nThumbs)].map((_, index) => (
+          {[...Array.from({length: nThumbs})].map((_, index) => (
             <SliderThumb
               ref={node => {
                 if (!node) {

diff --git a/static/app/components/userMisery.tsx b/static/app/components/userMisery.tsx
@@ -25,7 +25,7 @@ export function UserMisery(props: Props) {
   // 0 User Misery while still preserving the actual value for sorting purposes.
   const adjustedMisery = userMisery > 0.05 ? userMisery : 0;
 
-  const palette = new Array(bars).fill(colors[0]);
+  const palette = Array.from<string>({length: bars}).fill(colors[0]);
   const score = Math.round(adjustedMisery * palette.length);
 
   let title: React.ReactNode;

@@ -84,7 +84,7 @@ export function SkeletonPanelContents({onClick}: PanelContentsProps) {
 function ManySlowComponents() {
   return (
     <Fragment>
-      {[...new Array(100)].map((_, index) => (
+      {[...Array.from({length: 100})].map((_, index) => (
         <VerySlowComponent key={index} />
       ))}
     </Fragment>

diff --git a/static/app/styles/animations.tsx b/static/app/styles/animations.tsx
@@ -42,7 +42,7 @@ export const pulse = (size: number) => keyframes`
 `;
 
 export const makeShake = (distance = 3) => keyframes`
-${new Array(50)
+${Array.from({length: 50})
   .fill(0)
   .map(
     (_, i) => `${i * 2}% {
@@ -55,7 +55,7 @@ ${new Array(50)
 `;
 
 export const makeOpacityJitter = () => keyframes`
-${new Array(50)
+${Array.from({length: 50})
   .fill(0)
   .map(
     (_, i) => `${i * 2}% {

@@ -100,7 +100,9 @@ export function useFetchParallelPages<Data>({
 
   const cursors = useMemo(
     () =>
-      new Array(Math.ceil(hits / perPage)).fill(0).map((_, i) => `0:${perPage * i}:0`),
+      Array.from({length: Math.ceil(hits / perPage)})
+        .fill(0)
+        .map((_, i) => `0:${perPage * i}:0`),
     [hits, perPage]
   );
 

@@ -49,7 +49,7 @@ describe('HistogramQuery', () => {
     const getMock = MockApiClient.addMockResponse({
       url: '/organizations/test-org/events-histogram/',
       body: {
-        'measurements.fp': new Array(10)
+        'measurements.fp': Array.from({length: 10})
           .fill(null)
           .map((_, i) => ({bin: i * 1000, count: i})),
       },

@@ -59,7 +59,7 @@ export function makeColorBufferForNodes(
 ): number[] {
   const length = frames.length;
   // Length * number of frames * color components
-  const colorBuffer: number[] = new Array(length * 4 * 6);
+  const colorBuffer = Array.from<number>({length: length * 4 * 6});
 
   for (let index = 0; index < length; index++) {
     const frame = frames[index];
@@ -90,7 +90,7 @@ function makeColorBuffer(
 ): number[] {
   const length = frames.length;
   // Length * number of frames * color components
-  const colorBuffer: number[] = new Array(length * 4 * 6);
+  const colorBuffer = Array.from<number>({length: length * 4 * 6});
 
   for (let index = 0; index < length; index++) {
     const frame = frames[index];

@@ -33,7 +33,7 @@ function addChild(frame: FlamegraphFrame) {
 
 function addChildrenToDepth(frame: FlamegraphFrame, n: number) {
   let node = frame;
-  Array.from(new Array(n)).forEach(() => {
+  Array.from(Array.from({length: n})).forEach(() => {
     node = addChild(node);
   });
   return node;

@@ -95,7 +95,8 @@ export class FlamegraphChart {
         name: measurement.name,
         lineColor: colorComponentsToRGBA(colors[j]!),
         fillColor: colorComponentsToRGBA(colors[j]!),
-        points: new Array(measurement?.values?.length ?? 0).fill(0),
+        // @ts-expect-error -- TODO: Figure out how to resolve this types mismatch?
+        points: Array.from({length: measurement?.values?.length ?? 0}).fill(0),
       };
 
       if (