如何从React JS应用运行Databricks任务？问题排查及实现步骤

问题背景 #

我有一个需传入参数才能执行的Databricks Notebook，要在React应用中获取用户输入，点击提交按钮时调用该Notebook并传入参数。已拥有access-token、job id和连接URL，但无法成功建立连接，且需要在任务完成后通知React表单。附上我尝试但未生效的代码：

const handleSubmit = async (event) => {
    event.preventDefault();
 
    try {
 
      const vToken = 'XXXXXX';
      const vJobId = 'YYYYYY';
 
      const url = 'https://XXXXX.azuredatabricks.net/api/2.0/jobs/run-now';
      const headers = {
        Authorization: 'Bearer ' + vToken,
        'Content-Type': 'application/json',
      };
 
      const loaddate = new Date().toISOString().replace(/[-T:.]/g, '');
      const params = {
        job_id: vJobId,
        notebook_params: {
          ZZZZZZZZZ
        },
      };
 
      const response = await axios.post(url, params, { headers });
 
      if (response.data.run_id) {
        setMessage('Databricks job is running in the background');
      } else {
        setMessage('Failed to submit data');
      }
    } catch (error) {
      console.error('Error:', error);
      setMessage('Failed to submit data');
    } finally {
    }
  };

解决步骤及修正方案 #

1. 排查基础错误 #

• 参数格式错误：代码中notebook_params里的ZZZZZZZZZ是无效值，必须是键值对格式，键名要和Notebook中接收的参数名完全匹配，比如{ "load_date": loaddate, "user_input": 你的用户输入变量 }。
• Job ID类型错误：Databricks的job_id是整数类型，不要用字符串包裹，否则会触发接口报错。
• 跨域拦截：如果React应用域名和Databricks域名不一致，浏览器会直接拦截请求。要么通过后端代理转发请求，要么在Databricks工作区配置CORS允许你的React域名。

2. 修正提交代码 #

以下是修复后的提交函数，包含用户输入获取、参数格式修正和更详细的错误捕获：

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const vToken = 'XXXXXX';
    // 注意：job_id必须为整数，不要用字符串
    const vJobId = 123456; 
    const url = 'https://XXXXX.azuredatabricks.net/api/2.0/jobs/run-now';
    const headers = {
      Authorization: `Bearer ${vToken}`,
      'Content-Type': 'application/json',
    };

    // 假设你的表单已通过state存储用户输入，比如formData.userInput
    const userInput = formData.userInput; 
    const loaddate = new Date().toISOString().replace(/[-T:.]/g, '');
    const params = {
      job_id: vJobId,
      notebook_params: {
        // 键名需与Notebook中定义的参数名一致
        load_date: loaddate,
        user_input: userInput 
      },
    };

    const response = await axios.post(url, params, { headers });

    if (response.data.run_id) {
      setMessage(`任务已提交，运行ID：${response.data.run_id}`);
      // 提交成功后启动轮询，监听任务完成状态
      pollJobStatus(response.data.run_id, vToken);
    } else {
      setMessage('提交失败：未获取到任务运行ID');
    }
  } catch (error) {
    // 打印详细错误信息，方便排查问题
    console.error('请求错误:', error.response?.data || error.message);
    setMessage(`提交失败：${error.response?.data?.message || error.message}`);
  }
};

3. 实现任务完成通知（轮询状态） #

Databricks任务是异步执行的，需要通过轮询jobs/runs/get接口获取任务状态，实现完成通知：

// 轮询任务状态的函数，每隔30秒查询一次（可按需调整）
const pollJobStatus = async (runId, token) => {
  const statusUrl = `https://XXXXX.azuredatabricks.net/api/2.0/jobs/runs/get`;
  const headers = {
    Authorization: `Bearer ${token}`,
    'Content-Type': 'application/json',
  };

  const interval = setInterval(async () => {
    try {
      const response = await axios.get(statusUrl, {
        headers,
        params: { run_id: runId }
      });
      const lifeCycleState = response.data.state.life_cycle_state;
      const resultState = response.data.state.result_state;

      // 任务终止时停止轮询
      if (lifeCycleState === 'TERMINATED') {
        clearInterval(interval);
        if (resultState === 'SUCCESS') {
          setMessage('任务执行成功！');
          // 这里可添加成功后的逻辑，比如重置表单、刷新数据
        } else {
          setMessage(`任务执行失败：${response.data.state.state_message}`);
        }
      } 
      // 任务失败或被取消时直接终止轮询
      else if (lifeCycleState === 'FAILED' || lifeCycleState === 'CANCELED') {
        clearInterval(interval);
        setMessage(`任务终止：${response.data.state.state_message}`);
      }
    } catch (error) {
      console.error('查询状态错误:', error);
      clearInterval(interval);
      setMessage('无法获取任务状态，请稍后手动查看');
    }
  }, 30000);
};

4. 关键安全与配置注意事项 #

• Token安全：绝对不要在前端代码中硬编码access-token，这会导致敏感信息泄露。正确做法是通过你的后端服务转发请求，前端调用自己的后端接口，由后端存储并添加token。
• CORS配置：如果必须前端直接调用Databricks接口，需在Databricks工作区的「管理控制台」→「工作区设置」→「CORS」中，添加你的React应用域名到允许列表。
• 权限验证：确保你的access-token拥有jobs.runNow和jobs.runs.get的API权限，可在Databricks的权限管理页面检查配置。

内容的提问来源于stack exchange，提问作者user1702932