Repository: astral-sh/ruff
File: playground/ruff/src/Editor/Chrome.tsx (TypeScript)

Code before:
import { useCallback, useMemo, useRef, useState } from "react";
import { Header, useTheme, setupMonaco } from "shared";
import { persist, persistLocal, restore, stringify } from "./settings";
import { default as Editor, Source } from "./Editor";
import initRuff, { Workspace } from "ruff_wasm";
import { loader } from "@monaco-editor/react";
import { DEFAULT_PYTHON_SOURCE } from "../constants";

export default function Chrome() {
  const initPromise = useRef<null | Promise<void>>(null);
  const [pythonSource, setPythonSource] = useState<null | string>(null);
  const [settings, setSettings] = useState<null | string>(null);
  const [revision, setRevision] = useState(0);
  const [ruffVersion, setRuffVersion] = useState<string | null>(null);

  const [theme, setTheme] = useTheme();

  const handleShare = useCallback(async () => {
    if (settings == null || pythonSource == null) {
      return;
    }

    await persist(settings, pythonSource).catch((error) =>
      // eslint-disable-next-line no-console
      console.error(`Failed to share playground: ${error}`),
    );
  }, [pythonSource, settings]);

  if (initPromise.current == null) {
    initPromise.current = startPlayground()
      .then(({ sourceCode, settings, ruffVersion }) => {
        setPythonSource(sourceCode);
        setSettings(settings);
        setRuffVersion(ruffVersion);
        setRevision(1);
      })
      .catch((error) => {
        // eslint-disable-next-line no-console
        console.error("Failed to initialize playground.", error);
      });
  }

  const handleSourceChanged = useCallback(
    (source: string) => {
      setPythonSource(source);
      setRevision((revision) => revision + 1);

      if (settings != null) {
        persistLocal({ pythonSource: source, settingsSource: settings });
      }
    },

Review comment (bug):
```suggestion
			try {
        await persist(serialized);
      } catch (error) {
        // eslint-disable-next-line no-console
        console.error("Failed to share playground", error);
      }
```

Code after:
import { useCallback, useMemo, useRef, useState } from "react";
import { Header, useTheme, setupMonaco } from "shared";
import { persist, persistLocal, restore, stringify } from "./settings";
import { default as Editor, Source } from "./Editor";
import initRuff, { Workspace } from "ruff_wasm";
import { loader } from "@monaco-editor/react";
import { DEFAULT_PYTHON_SOURCE } from "../constants";

export default function Chrome() {
  const initPromise = useRef<null | Promise<void>>(null);
  const [pythonSource, setPythonSource] = useState<null | string>(null);
  const [settings, setSettings] = useState<null | string>(null);
  const [revision, setRevision] = useState(0);
  const [ruffVersion, setRuffVersion] = useState<string | null>(null);

  const [theme, setTheme] = useTheme();

  const handleShare = useCallback(async () => {
    if (settings == null || pythonSource == null) {
      return;
    }
    await persist(settings, pythonSource);
  }, [pythonSource, settings]);

  if (initPromise.current == null) {
    initPromise.current = startPlayground()
      .then(({ sourceCode, settings, ruffVersion }) => {
        setPythonSource(sourceCode);
        setSettings(settings);
        setRuffVersion(ruffVersion);
        setRevision(1);
      })
      .catch((error) => {
        // eslint-disable-next-line no-console
        console.error("Failed to initialize playground.", error);
      });
  }

  const handleSourceChanged = useCallback(
    (source: string) => {
      setPythonSource(source);
      setRevision((revision) => revision + 1);

      if (settings != null) {
        persistLocal({ pythonSource: source, settingsSource: settings });
      }
    },
    [settings],
  );

  const handleSettingsChanged = useCallback(