首页 > 其他分享 >uniapp 集成 sentry,并上传sourcemap,定位错误

uniapp 集成 sentry,并上传sourcemap,定位错误

时间:2023-04-18 17:24:51浏览次数:31  
标签:uniapp vue app sentry js sourcemap build h5

具体见 : https://blog.csdn.net/weixin_49192390/article/details/113989218?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168178969316800197063528%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168178969316800197063528&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-113989218-null-null.142^v84^control_2,239^v2^insert_chatgpt&utm_term=uniapp%20sentry&spm=1018.2226.3001.4187

另外需要注意以下三个文件

 vue.config.js 代码

const SentryWebpackPlugin = require('@sentry/webpack-plugin')

module.exports = {
  // other configuration
  configureWebpack: {
    plugins: [
      new SentryWebpackPlugin({
        // 这个是APIkey
        authToken: '08e34b496845413bbfb6cd0d67b273026c2fa0d34ad647b7acee3da9c0057ad6',
        // 组织
        org: '52f9e454b69c',
        // 项目
        project: 'javascript-vue',
         configFile: './sentryclirc', //配置文件地址,这个一定要有,踩坑在这里,忘了写导致一直无法实现上传sourcemap
        include: './dist/build/h5/', // 这里一定要注意目录层级别搞错了
        ignore: ['node_modules', 'vue.config.js'],
        // 这个是版本号  要与main.js里面的版本号一致
        release: 'test005',
      }),
    ],

    // 这个可就厉害了 不加这个uni-app不会生成soucemap文件
    devtool: 'source-map',
  },
 

}

main.js 代码 

import App from './App.vue'

const host = 'https://unidemo.dcloud.net.cn/';

import Vue from 'vue'
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
Vue.use(Router);
const router = new Router({
  // ...
});
Sentry.init({
  Vue,
  dsn: "https://[email protected]/4505016043241472",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
 tracesSampleRate: 1.0,
   release: 'test005', // 版本号,每次都npm run build上传都修改版本号
});

App.mpType = 'app'
new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

 

注意红色的要一致 

package.json 

{
  "name": "my-project3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npm run dev:h5",
    "build": "npm run build:h5",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build && rm -rf ./dist/build/h5/static/js/*.map",
    
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "flyio": "^0.6.2",
    "vue": ">= 2.6.14 < 2.7",
    "vuex": "^3.2.0"
  },
  "devDependencies": {"vue-template-compiler": ">= 2.6.14 < 2.7"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "uni-app": {
    "scripts": {}
  }
}

以上红色防止sourcemap上传到生产上面,这里只添加即可,整个代码仅为示例

 

标签:uniapp,vue,app,sentry,js,sourcemap,build,h5
From: https://www.cnblogs.com/xkcp008/p/17330353.html

相关文章

  • uniapp运行app项目无法连接到手机
    1.手机需要打开开发者模式2.adb端口占用(从任务管理器中结束进程) uniapp项目真机调试遇到的问题(持续更新中)-简书(jianshu.com)解决端口占用问题-简书(jianshu.com)......
  • 手机网站左侧弹出菜单功能-uniapp
    效果图     <template> <viewclass="drawer":class="{moveRight:isActive,moveLeft:isClose}"> <uni-nav-bardarkshadowbackground-color="#007AFF"status-bar:left-icon="left_icon"left-text=......
  • FinClip 与 uniapp:轻应用平台与前端开发框架
    原文地址juejin.cnFinClip背后的产品经理发现很多开发者或业务部门的朋友,在刚了解到FinClip的时候,都会好奇FinClip能解决怎样的问题,也会经常将FinClip与uni-app进行对比考虑二者的区别与优劣势。因此在本文中,FinClip的产品经理会和我们深入地探讨FinClip与uni-app之......
  • uniapp面试题
    1.uniapp进行条件编译的两种方法?小程序端和H5的代表值是什么?通过#ifdef、#ifndef的方式H5:H5MP-WEIXIN:微信小程序2.uniapp的配置文件、入口文件、主组件、页面管理部分pages.json配置文件main.js入口文件App.vue主组件pages页面管理部分3.uniapp上传文件时用到a......
  • 2023-04-15 uniapp 点击事件冒泡
    简而言之,即父子元素都有点击事件,这时候子元素触发点击事件会连同父元素的点击事件一并触发,这就是冒泡;而需求就是子不触父。解决方案:子元素的点击事件由原来的@click或者@tap统统换成@tap.stop,据说@tap.stop比@click.stop好。注:只需改变子元素点击事件,子变父不变。......
  • uniapp 使用cli模式,利用jenkins远程部署
    1、uniapp必须使用cli模式,如果是hbuliderx创建的,不支持2、jenkins配置需要publishoverssh插件和node插件,自行百度即可现在主要说说配置1)、系统管理-》系统配置中,找到publishoverssh 2          ......
  • uniapp 使用vconsole
    1、安装vconsolenpminstallvconsole2、引用vconsole,找到main.js文件中,加上以下代码(区分环境):if(process.env.H_NODE_ENV!=='production'){ constvconsole=require('vconsole') Vue.prototype.$vconsole=newvconsole()}3、效果: ......
  • 基于Java+uniapp小程序实现餐厅校园订餐平台
    基于Java+Vue+uniapp微信小程序实现餐厅校园订餐平台博主介绍:5年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域一、前言介绍:传统的校园订餐管理方式都在使用手工记录的方式进行数据的登记,这种方式耗时,而且对于数据量比较大的情况想......
  • UniApp小程序开发如何获取用户手机号
    我们在小程序开发的时候经常遇到这种需求,需要在账号登陆的时候进行手机号获取,并使用手机号登陆。本文讲述如何在前后端分离的状态下获取手机号查阅官网文档不难发现我们需要使用uni.login()这个方法来获取用户的code,获取用户的openid和session_key是需要后端去发请求的,因......
  • uniapp小程序使用高德地图api实现路线规划
    uniapp小程序使用高德地图api实现路线规划 Postedon 2023-01-1011:18  书中枫叶 阅读(1387) 评论(3)  编辑  收藏  举报路线规划简介路线规划常用于出行路线的提前预览,我们提供4种类型的路线规划,分别为:驾车、步行、公交和骑行,满足各种的出行场景。高德开放......